Hexo NexT主题集成Gitalk评论

Gitalk 是一款基于 Github Issue 和 Preact 开发的评论插件，评论时需使用 Github 账号进行登录，另一款 Gitment 与之类似。这里记录下在 NexT 主题中集成 Gitalk 的相关步骤。

注册应用（Register Application）

可直接打开：https://github.com/settings/applications/new 进行注册（此操作需要登录）

选择 Developer settings –> OAuth Apps –> 点击 new OAuth App按钮。打开如下页面：

注册成功后，页面跳转，填写如下参数：

# 参数说明:

Application name： # 应用名称，随意填写

Homepage URL： # 网站URL，如 https://www.liaofuzhan.com

Application description # 描述，随意填写

Authorization callback URL：# 网站URL，https://www.liaofuzhan.com

其中 Client ID 和 Client Secret 在后面的配置中用到

开始搭建

以下操作为 next 主题的 gitalk 评论系统搭建，步骤大概如下：

创建 gitalk.swig 文件

定位到路径 next/layout/_third-party/comments/，创建 gitalk.swig 文件，内容：

   {% 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 src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.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: md5(window.location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
       </script>
{% endif %}

这里，解决了 label 长度不能超过 50 的问题的 issue, 用了一个 md5，同时采用了 windows.location.pathname 来区分不同的文章。

这里的 ClientID 和 ClientSecret 就是刚才创建的APP的对应东西

最后你的网站需要建立一个 repo 和一个对应的 app，来装载 comments。上面的代码你不需要修改，我们在后面的 config 里面再来具体配置，第一步完成。

引入 gitalk.swig

在同级目录下的 index.swig 里面加入

{% include 'gitalk.swig' %}

修改 comments.swig，添加 gitalk

修改 next/layout/_partials/comments.swig，添加内容如下，与前面的 elseif 同一级别上：

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

新建 gitalk.styl 样式

定位到 next/source/css/_common/components/third-party/ 然后创建 gitalk.styl 文件，内容如下：

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

引入 gitalk.styl 样式

然后在同级别的 third-party.styl 中导入：

@import "gitalk";

修改主题配置文件

在主题配置文件 theme/next/_config.yml 中添加内容：

gitalk:
  enable: true
  githubID: leafjame
  repo: leafjame.github.io
  ClientID: 0dea18fbxxxx350441
  ClientSecret: 866c25axxxx7dd51abdc8f2b18bcab4
  adminUser: leafjame
  distractionFreeMode: true

说明：

githubID : 你的 github ID，用来说明你是个人还是某个组织的；

repo : 你要新建一个 repo 来保存这些 comments，这里 repo 就随便新建一个就行；

ClientID 和 ClientSecret : 就是文章开头新建 APP 的那些，请注意，这个一定要和你部署的网站的对应起来，一个网站对应一个这个 client；

adminUser: 你的admin 用户名，通常就是你自己

以上就是 next 中添加 gitalk 评论的配置步骤。

注册应用 （Register Application）

开始搭建

注册应用（Register Application）