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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hyb612/article/details/78299971

title: hexo 博客next主题集成gitment或者gitalk评论系统
comments: true
categories: hexo
tags:

  • hexo
  • gitment
  • gitalk
  • next主题
    abbrlink: 46383
    date: 2017-10-20 21:50:00

原文链接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移植

微信公众号:编程珠玑

阅读更多
换一批

没有更多推荐了,返回首页