需求：多说倒了，再次说明国内开源环境的脆弱，畅言还要进行备案。最后还是找基于国外开源系统靠谱,比较了一下还是选择了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、显示按钮只显示文字，而不是教程中的按钮。算了，找不到相关资料，加上问题不大。先不管