DIYsay
日志7
标签15
分类2

Next主题集成gitalk

Disqus被墙,搭建API使用并非长久之计,集成gitalk评论系统。
gitalk1

Register a new OAuth application

参数说明:

  • Application name:应用名称,自己随便填
  • Homepage URL:填写自己的博客地址
  • Application description:简介,自己随便填
  • Authorization callback URL:填写自己的博客地址

完成后会活动:Client ID以及Client Secret,后续需要用到。

修改主题配置文件_config.yml

增加以下内容:

1
2
3
4
5
6
7
8
gitalk:
enable: true
githubID: 你的GitHub名称 #例如:DIYsay
repo: 你的仓库名称 #创建一个仓库用来装评论,这里填写仓库名称
ClientID: Client ID
ClientSecret: Client Secret
adminUser: 你的GitHub名称 #指定可初始化评论账户,例如:DIYsay
distractionFreeMode: true

创建gitalk.swig

/layout/_third-party/comments/目录下创建gitalk.swig文件,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if page.comments && theme.gitalk.enable %}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '{{ theme.gitalk.ClientID }}',
clientSecret: '{{ theme.gitalk.ClientSecret }}',
repo: '{{ theme.gitalk.repo }}',
owner: '{{ theme.gitalk.githubID }}',
admin: ['{{ theme.gitalk.adminUser }}'],
id: location.pathname,
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')
</script>
{% endif %}

修改comments.swig

路径:/layout/_partials/comments.swig,在最后一个<diy>后增加以下语句:

1
2
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>

修改index.swig

路径:layout/_third-party/comments/index.swig,最后一行增加以下内容:

1
{% include 'gitalk.swig' %}

创建gitment.styl

/source/css/_common/components/third-party/目录下创建gitalk.styl文件,内容如下:

1
2
3
4
.gt-header a, .gt-comments a, .gt-popup a
border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
top: 0.7em;

修改third-party.styl

路径:/source/css/_common/components/third-party/third-party.styl,最后一行增加以下内容:

1
@import "gitalk";

可能遇到的问题

  • 页面提示ERROR NOT FOUND:可能是仓库未创建或者仓库名填写错误。
  • 每篇文章都需要初始化:next主题版本过低,建议更新到5.1.1及以上版本。