hexo添加gitment评论

今天把博客的评论系统添加上了~欢迎大家拍砖

原来hexo是默认支持多说的，但是我看到多说的那种展示，还有一些其他的评论，觉得不好看没有弄，然后多说本身也关闭了自然评论这功能，于是就换成了gitment。
本来也考虑disqus,但是这个东西需要墙，还有畅言，需要域名备案，觉得麻烦，就用了gitment。
首先感谢作者sun。

配置开始

step 1

gitment本身是一个前端引入的评论，不需要后端配合，这一点感觉挺好，本身博客就是放在github上的静态资源，配合这个，自己弄起来会比较方便一点。

我现在用的主题是hexo-yilia，在主题目录hexo-theme-yilia/layout/_partial/post/下面添加评论的模板，我命名为gitment.ejs(模板是ejs的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% 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>
<% } %>

owner: github的用户名，作者的demo里面写的id，后面有更正
repo:评论存储的仓库，是你用户名下面所存在的仓库
client_id:新建应用所产生的client_id
client_secret:新建应用所产生的client_secret
可以在github->settings->OAuth applications里面进行添加，
也可以走下面这个入口click here
按照作者说的，除了callbackurl其他都可以随意填写

step 2

找到目录下面的_config.yml
在里面添加如下:

1
2
3
4
5
gitment:
  owner: 'your github username'
  repo: 'your github repository'
  client_id: 'your created client_id'
  client_secret: 'your create client_secret'

然后在上级目录找到article.ejs
在最后仿照多说或者其他的添加gitment

1
2
3
<% if(!index && theme.gitment && post.comments){ %>
<%- partial('post/gitment',{post}) %>
<%}%>

也可以将你的client_id之类的写入模板而不写入配置，但是习惯性写入配置了。做法如下:

1
gitment: true

1
2
3
4
5
6
7
8
<% if(!index && theme.gitment && post.comments){ %>
<%- partial('post/gitment',{post:{
            owner: 'your github username'
          repo: 'your github repository'
          client_id: 'your created client_id'
          client_secret: 'your create client_secret'
    }}) %>
<%}%>

如果是这样，上面的gitment.ejs里面的参数就需要改为post了，这就不解释了(看一下ejs语法)

step3

上述配置完成后，运行博客的基本发布流程，然后在文章里面序列化一下评论设置就可以了~也算是简单实用。

问题

Q:该不该这样用？
A:反正现在应该也有挺多人在用，就用吧，而且作者本身也发issue给github，并未反对。(可以用，但不代表可以滥用)

Q:在gitment里面有一个小坑
A:

1
2
3
4
5
6
7
8
9
var gitment = new Gitment({
            id:''，   //这里的id可以是自己生成的序列id。默认取location.href 但是你如果使用默认，请删除此属性，否则在序列化的时候会报错
            owner: '<%- theme.gitment.owner %>',
            repo: '<%- theme.gitment.repo %>',
            oauth: {
                client_id: '<%- theme.gitment.client_id %>',
                client_secret: '<%- theme.gitment.client_secret %>',
            },
        })

Q:在序列话评论的时候，需要当前博客的作者先序列化，否则别人无法进行评论
A:如果你博客有100篇，你就要每个序列化一次，否则不可评论。这一点作者也在处理。

基本流程就是这样，giement本身还提供了不少api，可以去github上进行查看gitment
本文参考作者的记录和评论区解决问题。sun