为什么使用 Gitalk 做评论组件
博客网站都需要支持评论系统，方便与他人交流文章细节。Gitalk 就是一款易用，易集成，支持 Markdown，使用 github 账号登录的评论组件，非常适合技术博客使用。
GItalk 评论界面如下：
Gitalk 的集成方法
Gitalk 的集成很简单，查看 Gitalk 项目的 readme，简单概述就是下面几步。
准备工作
- github 账号
- 一个仓库 repo 用于保存评论，可以用 xxx.github.io，如：al-liu.github.io
- 注册一个新的 OAuth application，点击这里注册。
集成步骤
- 引用 gitalk 的 js，css，有两种方式
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
或使用 npm 安装，npm install。
- 添加一个 container 到页面，
<div id="gitalk-container"></div> - 生成 Gitalk 插件，
const gitalk = new Gitalk({…})其中Client ID,Client Secret来自 Github OAuth application。
查看 Client ID, Client Secret
登录 github 后：
在 Hexo 的 cactus 主题中集成 Gitalk
在 themes/cactus/_config.yml 配置文件中，配置 Gitalk。
disqus:
enabled: false # 确定 disqus 评论是关闭的
shortname: cactus-1
gitalk:
enabled: true # 开关开启
owner: al-liu # 你的 github 用户名
repo: al-liu.github.io # 保存评论的 repo 库
admin: ['al-liu'] # 管理员，你的 github 用户名
clientID: xxx
clientSecret: xxx
cactus 主题默认集成了 disqus 评论系统，将它关闭 enabled 设置成 false。
在 themes/cactus/layout/_partial/comments.ejs 中，
// disqus 评论系统部分
<% if(page.comments && theme.disqus.enabled){ %>
<div class="blog-post-comments">
<div id="disqus_thread">
<noscript><%= __('comments.no_js') %></noscript>
</div>
</div>
<% } %>
// 下面添加 Gitalk 部分
<% if(page.comments && theme.gitalk.enabled){ %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<div id="gitalk-container"></div>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '<%= theme.gitalk.clientID %>',
clientSecret: '<%= theme.gitalk.clientSecret %>',
id: md5(window.location.pathname),
repo: '<%= theme.gitalk.repo %>',
owner: '<%= theme.gitalk.owner %>',
admin: '<%= theme.gitalk.admin %>',
distractionFreeMode: '<%= theme.gitalk.on %>'
})
gitalk.render('gitalk-container')
</script>
<% } %>
<%= theme.gitalk.clientID %> 这些类似标签，对应的是 _config.yml 中的各种配置项，参考前面说到的 Gitalk 项目 readme 的集成方法，代码中先引入 Gitalk 的 js 和 css，还引入了一个 md5 的 js 库，这个后面会用到。下面是添加 container 页 <div id="gitalk-container"></div>, 添加 Gitalk 脚本 var gitalk = new Gitalk ...。需要注意的是 id: md5(window.location.pathname) 这里，是为了防止文章标题过长，导致 Error: Validation Failed. 的错误，详情请见这个issue#102。
在 themes/cactus/layout/post.ejs 中查看最后一行是不是 <%- partial('_partial/comments') %> 确认将 comments.ejs 引入进来。
如果hexo s 访问本地服务不能用，部署到 Github 上再试，hexo clean,hexo g, hexo d。
到此 Hexo 的 cactus 主题集成 Gitalk 评论就完成了。其他主题集成 Gitalk 的方法都一样，可能就是在哪个文件引入的区别，照猫画虎就可以。
