为什么使用 Gitalk 做评论组件

博客网站都需要支持评论系统，方便与他人交流文章细节。Gitalk 就是一款易用，易集成，支持 Markdown，使用 github 账号登录的评论组件，非常适合技术博客使用。

GItalk 评论界面如下：

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 的方法都一样，可能就是在哪个文件引入的区别，照猫画虎就可以。