为博客添加Gitment评论系统

前言

    一个好的博客网站，没有评论系统怎么行呢，毕竟要采纳良言，查了国内几个第三方评论系统，如：多说，友言，畅言，最终选择了Gitmeng，今天就教大家如何添加Gitment评论系统。

---

Gitment评论系统

一、Gitment模块

    Gitment 是基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。想了解具体效果，可以点击查看官方Demo Page：Gitment Demo。

二、注册OAuth Application

    首先我们需要申请一个Github OAuth Application，点击https://github.com/settings/applications/new进行注册，填写相关信息，注意：在Authorization callback URL填自己的网站urlhttps://guidozijef.github.io，创建成功后，你会得到一个 client ID 和一个 client secret，这个将被用于之后的用户登录。

三、修改themes下的_config.yml文件

    修改站点配置文件_config.yml，在其中添加：

gitment:
  enable: true
  githubID: yourid
  repo: yourrepo
  ClientID: yourid
  ClientSecret: yoursecret
  lazy: true

其中的client ID 和 client secret换成你自己的就行了。
注意：格式一定要正确，冒号后面要孔一格。

四、在博客中调用Gitment

    在你需要添加评论系统的地方，一般情况下是在_layout目录下的 _partial文件或者post 相关的文件夹里面，吐过没有的话就自己添加一个名字叫gitment的文件，在里面写入：

{% if site.comment_gitment_repo %}
<div id="gitmentContainer"></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: '<%= page.date %>',
        owner: '{{site.github_username}}',
        repo: '{{site.comment_gitment_repo}}',
        oauth: {
            client_id: '{{site.comment_gitment_clientId}}',
            client_secret: '{{site.comment_gitment_clientSecret}}',
        },
    });
    gitment.render('gitmentContainer')
</script>
{% endif %}

保存就可以了。
以上的操作就可以看到评论系统已经成功添加了，接下来我们在把评论汉化一下，

五、Gitment汉化

    Gitment的汉化很简单，只需在模板文件原来定义CSS和JS的那两行改成：

<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>

就行了。

评论之前要先登录和初始化。也可以自动初始化。