用Gitment替换多说来为基于hexo的静态网站提供评论功能

文章目录

1. 1. 引入Gitment
2. 2. 修改网站主题，启用Gitment
3. 3. 重新生成静态网站，并部署到Github上，查看效果
4. 4. 出错了？检查有没有初始化评论！

本站一直使用多说(duoshuo)来作为外挂的评论服务，但不幸的是，多说将于2017年6月1日正式关停服务。技术到底还是需要Money支撑，无论多么美好的技术。。。

一个多说倒下去，万能的Github站出来，感谢imsun同学，及时的搞出来Gitment这个插件，将Github的Issue讨论和发布功能玩儿活了，变成的博客的评论功能。愚以为此乃想象力配合生产力的完美碰撞！

经过一个多小时的配置和尝试，本站的评论系统成功切换到了Github。基本上参考这篇说明就可以配置好，这里着重说明一下过程中遇到的几个问题。

引入Gitment

其实这一步在npm install --save gitment完之后，在node_modules/gitment/dist下，这两个文件拷贝到：

$ cp <mysite>/node_modules/gitment/dist/style/default.css <mysite>/themes/jacman/source/js/gitment-theme-default.css
$ cp <mysite>/node_modules/gitment/dist/gitment.browser.js <mysite>/themes/jacman/source/js/gitment.browser.js

要注意，<mysite>是本网站的目录，而本网站使用的是jacman这个主题。

修改网站主题，启用Gitment

首先需要引入Gitment的CSS样式文件和JS文件，修改<mysite>/themes/jacman/layout/after_footer.ejs这个文件，在文件头部加入如下内容：

<link rel="stylesheet" href="<%- config.root %>js/gitment-theme-default.css">
<script src="<%- config.root %>js/gitment.browser.js"></script>

在文件末尾加入如下内容：

<!-- Gitment Start -->
<% if( page.comments) { %>
<script>
$(document).ready(function(){
var gitment = new Gitment({
  owner: 'xintq',
  repo: 'xintq.net.comment.repo',
  oauth: {
    client_id: '7fd3e0a06d0021768bdd',
    client_secret: '52c4849b9fe5fa053c455238e57c89eeda747403',
  },
});
if($('#commentContainer')) gitment.render('commentContainer');
});
</script>
<% } %>
<!-- Gitment End -->

注意上面的引入方式中，在gitment.render调用时，我自作聪明，额外加入了两个if判断：

• 第一个if( page.comments)保证了Gitment只在容许评论的页面中出现
• 第二个if($('#commentContainer'))保证了只有在ID为commentContainer的tag存在的前提下，才执行render函数，避免了找不到对象是发生JS错误

接着，把Gitment自动生成的评论界面插入到页面中。由于在jacman主题中，页面布局被进一步细化到了这个文件夹<mysite>/themes/jacman/layout/post，所以这一步需要编辑<mysite>/themes/jacman/layout/post/comment.ejs文件，在文件末尾加入如下内容：

<% if( page.comments) { %>
<section id="comments"  class="comment">
	<div id="commentContainer"></div>
</section>
<% } %>

重新生成静态网站，并部署到Github上，查看效果

$ hexo d -g

出错了？检查有没有初始化评论！

这里把Gitment文档中的内容在重复一下：

页面发布后，你需要访问页面并使用你的 GitHub 账号登录（请确保你的账号是第二步所填 repo 的 owner），点击初始化按钮。之后其他用户即可在该页面发表评论。

(END)