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

小鱼儿 2022-06-07 12:18 313阅读 0赞

原文链接[hexo 博客next主题集成gitment或者gitalk评论系统][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

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 ####

在最后增加一行

{% 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，  
在最后增加一行，引入样式

@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增加内容

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

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

在最后增加一行

{% 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，  
在最后增加一行，引入样式

@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文件。  
引用方法

/lib/gitalk/gitalk.css
    /lib/gitalk/gitalk.min.js

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

## 总结 ##

配置好的next主题可以在[next][]中下载使用  
以上两种方式私以为都是比较稳定的方式，还是值得一试。

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

微信公众号：编程珠玑

[hexo _next_gitment_gitalk]: http://www.yanbinghu.com/2017/10/20/46383.html#more
[gitment]: https://github.com/imsun/gitment
[gitalk]: https://github.com/gitalk/gitalk
[github]: https://github.com/settings/applications/new
[gitalk dist]: https://github.com/gitalk/gitalk/tree/master/dist
[next]: https://github.com/yanbinghu/next
[Next_Gitalk]: https://newdee.cf/posts/4da30c7/