为 Hexo 主题 indigo 添加 gitment 支持

缘起

却说 hexo 评论系统有 disqus、多说之类。近来多说倒闭，更换新评论系统成为要务。gitment 是新近出现的利用 github issue 系统作评论的评论系统。具有使用方便、免费等优点。因此打算采用此系统。

问题

然而我现在所用主题 indigo 并不支援 gitment。向 issue 反馈后并没有反应。因此只能自力更生。

插件系统

观察主题文件结构

├── _config.yml
├── layout
│   ├── _partial
│   │   ├── ......
│   │   ├── plugins
│   │   ├── post
│   │   ├── ......

发现插件是存储在 plugins 文件夹下的 ejs 模版，打开 disqus.ejs 观察

<% if (theme.disqus_shortname){ %>
<section class="comments" id="comments">
    <div id="disqus_thread"></div>
    <script>
    var disqus_shortname = '<%- theme.disqus_shortname %>';
    lazyScripts.push('//' + disqus_shortname + '.disqus.com/embed.js')
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>
<% } %>

theme.disqus_shortname 为配置文件中 disqus 的调用名称，又做真值判别又做变量。gitment 参数众多就不这样设置。

主题定义了 comments 块放置评论系统，这个写在 indigo/layout/_partial/post/comment.ejs。内容如下：

<% if(post.comments){ %>
<%- partial('../plugins/duoshuo', {
    key: post.slug,
    title: post.title,
    url: url
  }) %>

<%- partial('../plugins/disqus') %>

<%} %>

用 partial 加载，因此添加 <%- partial(‘../plugins/gitment’) %> 用来加载 gitment 插件

gitment 文档介绍加载方法如下：

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
 id: '页面 ID', // 可选。默认为 location.href
 owner: '你的 GitHub ID',
 repo: '存储评论的 repo',
 oauth: {
   client_id: '你的 client ID',
   client_secret: '你的 client secret',
 },
})
gitment.render('container')
</script>

gitment.ejs 里配合主题布局添加

<% if (theme.gitment){ %>
<section class="comments" id="comments">
    <div id="gitment_thread"></div>
    <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
    <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
    <script>
        var gitment = new Gitment({
            owner: '<%- theme.gitment.owner %>',
            repo: '<%- theme.gitment.repo %>',
            oauth: {
                client_id: '<%- theme.gitment.client_id %>',
                client_secret: '<%- theme.gitment.client_secret %>',
            },
        })
        gitment.render('comments')
    </script>
</section>
<% } %>

最后注意 gitment 传回的是 comments 块。

在配置文件里还要加上相关参数

# 开启
gitment:
  owner:
  repo:
  client_id:
  client_secret:
  

测试

经测试，显示完美

---

---

收尾

增添功能当然要惠及大家，因此向作者提出 pull request，希望能合并。第一次向开源界贡献一番，值得庆祝