hexo 博客next主题集成gitment或者gitalk评论系统

前言

之前使用多说，多说挂了，用网易跟帖代替，网易跟帖又没了。前段时间用来必力，感觉还行，但总归不踏实。后面发现有gitment，用github的issue作为评论载体，感觉靠谱许多。下面介绍一下hexo 的naxt主题中如何集成gitment以及gitalk评论系统。注：next主题版本为5.1.3,其他版本可能略有差异。

准备

在使用以上两个评论系统之前，都需要在github注册新的应用

参数说明：

Application name：   #应用名称
Homepage URL：  #网站URL
Application description #描述
Authorization callback URL：#网站URL

填写完成后，点击register application。

最后会生成Client ID以及Client Secret，后面需要用到。

完成之后需要创建一个仓库，仓库的名称为刚才应用的名称。

next主题集成gitment

主题配置

修改主题配置文件next/_config.yml



# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
  enable: true
  githubID: github帐号
  repo: 仓库名  #例如：BlogComments
  ClientID: Client ID
  ClientSecret: Client Secret
  lazy: flase  #false显示github评论框

修改next/languages/zh-Hans.yml

在zh-Hans.yml中增加一行，当然来如果你的主题语言是英语，就修改
en.yml

1	gitmentbutton: 显示评论

修改/layout/_partials/comments.swig

在文件的最后一个

</div>

后面再插入一个else if 分支

{% elseif theme.gitment.enable %}
       {% if theme.gitment.lazy %}
         <div onclick="ShowGitment()" id="gitment-display-button">{{  __('gitmentbutton') }}</div>
         <div id="gitment-container" style="display:none"></div>
       {% else %}
         <div id="gitment-container"></div>
       {% endif %}

修改layout/_third-party/comments/index.swig

在最后增加一行

1	{% include 'gitment.swig' %}

在/layout/_third-party/comments/目录下增加gitment.swig

内容如下：

{% if theme.gitment.enable %}
   {% set owner = theme.gitment.githubID %}
   {% set repo = theme.gitment.repo %}
   {% set cid = theme.gitment.ClientID %}
   {% set cs = theme.gitment.ClientSecret %}
   <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
   <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
   {% if not theme.gitment.lazy %}
       <script type="text/javascript">
           var gitment = new Gitment({
              id: window.location.pathname, 
               owner: '{{owner}}',
               repo: '{{repo}}',
               oauth: {
                   client_id: '{{cid}}',
                   client_secret: '{{cs}}',
               }});
           gitment.render('gitment-container');
       </script>
   {% else %}
       <script type="text/javascript">
           function ShowGitment(){
               document.getElementById("gitment-display-button").style.display = "none";
               document.getElementById("gitment-container").style.display = "block";
               var gitment = new Gitment({
                   id: document.location.href, 
                   owner: '{{owner}}',
                   repo: '{{repo}}',
                   oauth: {
                       client_id: '{{cid}}',
                       client_secret: '{{cs}}',
                   }});
               gitment.render('gitment-container');
           }
       </script>
   {% endif %}
{% endif %}

增加gitment.styl

在./source/css/_common/components/third-party/下增加gitment.styl
内容如下：

#gitment-display-button{
     display: inline-block;
     padding: 0 15px;
     color: #0a9caf;
     cursor: pointer;
     font-size: 14px;
     border: 1px solid #0a9caf;
     border-radius: 4px;
 }
 #gitment-display-button:hover{
     color: #fff;
     background: #0a9caf;
 }

修改third-party.styl

修改/source/css/_common/components/third-party/third-party.styl，
在最后增加一行，引入样式

1	@import "gitment";

小结

可能遇到的问题

1.页面提示ERROR NOT FOUND
解决：一般是由于你的repo填写错误，repo纯粹指的是的你的仓库名称。

2.每篇文章都需要初始化
next主题版本过低，建议更新到5.1.1及以上版本，可全部自动初始化每篇文章的评论。

3.在上面说到的路径找不到对应文件时，建议使用find 命令查找，因为next主题的目录结构可能会变化。

4.在本地查看时，建议打开浏览器的调试模式，可以查看控制台是否有错。

特点总结

优点

样式比较还可以，并且支持markdown语法，能够预览，相对于其他评论系统应该是比较稳定可靠来。

缺点

1.移动端不支持
2.只能使用github登录，不过github应该已经够了。

next主题集成gitalk

在集成gitalk之前，同样需要建立应用，操作步骤已经在准备章节中说明了。
gitalk

主题配置

修改主题配置文件next/_config.yml

在修改主题配置文件next/_config.yml中增加以下内容

gitalk:
  enable: true
  githubID: github帐号	 
  repo: 仓库名称
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号#指定可初始化评论账户
  distractionFreeMode: true

增加/layout/_third-party/comments/gitalk.swig

增加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 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 %}

修改/layout/_partials/comments.swig

在最后一个div增加内容

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

修改layout/_third-party/comments/index.swig

在最后增加一行

1	{% include 'gitalk.swig' %}

增加gitment.styl

在./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;

修改third-party.styl

修改/source/css/_common/components/third-party/third-party.styl，
在最后增加一行，引入样式

1	@import "gitalk";

小结

可能遇到的问题

1.页面提示ERROR NOT FOUND
解决：可能是仓库未创建或者仓库名填写错误。

2.每篇文章都需要初始化
next主题版本过低，建议更新到5.1.1及以上版本.

3.在上面说到的路径找不到对应文件时，建议使用find 命令查找，因为next主题的目录结构可能会变化。

4.在本地查看时，建议打开浏览器的调试模式，可以查看控制台是否有错。

特点总结

优点

支持移动端

缺点

缺点：不支持markdown在线预览

提高加载速度

为了提高加载速度，可以将gitalk.swig的https://unpkg.com/gitalk/dist/gitalk.css和https://unpkg.com/gitalk/dist/gitalk.min.js替换加载本地文件。

比如，在next/source/lib下新建gitalk文件夹，里面放置gitalk.css和gitalk.min.js文件。
引用方法

1 2	/lib/gitalk/gitalk.css /lib/gitalk/gitalk.min.js

上面两个文件可以在github上的gitalk dist中下载

常见问题

提示Error: Cannot read property ‘avatarUrl’ of null

原因：评论中的github用户已经被注销了，需要到你的评论仓库删除该用户的评论。

总结

配置好的next主题可以在next中下载使用
以上两种方式私以为都是比较稳定的方式，还是值得一试。另外写这篇文章时，这两种评论系统的一些特点，可能到最新版本已经没有了，因此需要自己去尝试。

欢迎提出意见或者建议。
参考文章：Next主题的Gitalk移植