Gitment安装配置

需求:多说倒了,再次说明国内开源环境的脆弱,畅言还要进行备案。最后还是找基于国外开源系统靠谱,比较了一下还是选择了Gitment,原因是标星比较多。虽然说BLOG没什么人访问,没什么必要加评价,但感觉还是加上评价才像个BOLG,而且多学点技术总是好的。
前言:官方的教程过于简单,参考了几篇个人文章都配置不成功,最后主要参考以下文章成功了:http://skyhacks.org/2017/08/04/AddGitmentToNext/

主要步骤如下:

注册 OAuth Application

点击此处 来注册一个新的 OAuth Application。其他内容可以随意填写,但要确保填入正确的 callback URL(一般是评论页面对应的域名,如 https://dj9399.github.io/)。你会得到一个 client ID 和一个 client secret,这个将被用于之后的用户登录。

引入 Gitment

将下面的代码添加到你的页面:hexo主题是找到主题/layout/_partials/comments.swig,在最后一个 elseif代码块下面添加Gitment相关的内容

'{% elseif theme.gitment.enable %}
<div onclick="showGitment()" id="gitment_title" class="gitment_title">显示 Gitment 评论</div>
<div id="container" style="display:none"></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>
const myTheme = {
  render(state, instance) {
    const container = document.createElement('div');
    container.lang = "en-US";
    container.className = 'gitment-container gitment-root-container';
    container.appendChild(instance.renderHeader(state, instance));
    container.appendChild(instance.renderEditor(state, instance));
    container.appendChild(instance.renderComments(state, instance));
    container.appendChild(instance.renderFooter(state, instance));
    return container;
  }
}
function showGitment() {
  $("#gitment_title").attr("style", "display:none");
  $("#container").attr("style", "").addClass("gitment_container");
  var gitment = new Gitment({
    id: window.location.pathname,
    theme: myTheme,
    owner: '{{ theme.gitment.owner }}',
    repo: '{{ theme.gitment.repo }}',
    oauth: {
      client_id: '{{ theme.gitment.client_id }}',
      client_secret: '{{ theme.gitment.client_secret }}'
    }
  });
  gitment.render('container');
}
</script>`

配置文件添加gitment支持

找到主题文件下的_config.yml,自行添加字段:
repo是重点啊!原来是自己的仓库名,比如我的就是dj9399.github.io,之前就是这里写成了仓库REPO导致配置报错

gitment: enable: true owner: dj9399 repo: dj9399.github.io client_id: XXX client_secret: XXX

“显示 Gitment 评论” 的按钮样式

在 next/source/css/_common/components 目录中新建一个 gitment.styl 的 css 样式文件, 复制以下代码

.gitment_title:hover { color: #fff; background: #0a9caf; background-image: initial; background-position-x: initial; background-position-y: initial; background-size: initial; background-repeat-x: initial; background-repeat-y: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(10, 156, 175); } .gitment_title { border: 1px solid #0a9caf; border-top-color: rgb(10, 156, 175); border-top-style: solid; border-top-width: 1px; border-right-color: rgb(10, 156, 175); border-right-style: solid; border-right-width: 1px; border-bottom-color: rgb(10, 156, 175); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(10, 156, 175); border-left-style: solid; border-left-width: 1px; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .gitment_title { display: inline-block; padding: 0 15px; padding-top: 0px; padding-right: 15px; padding-bottom: 0px; padding-left: 15px; color: #0a9caf; cursor: pointer; font-size: 14px; }

然后打开同目录中的 components.styl 文件, 随便找个位置(我放在最后)添加一句
@import “gitment”;

初始化评论

页面发布后,你需要访问页面并使用你的 GitHub 账号登录(请确保你的账号是第二步所填 repo 的 owner),点击初始化按钮。
之后其他用户即可在该页面发表评论。

这一步比较麻烦,要手动一篇篇去初始化。

遇到的问题:

1、显示按钮文字乱码,把显示页面”comments.swig”另存为utf-8,再覆盖一下原文件即可

2、显示按钮只显示文字,而不是教程中的按钮。算了,找不到相关资料,加上问题不大。先不管

显示 Gitment 评论