Skip to main content

Gitment!静态博客必备

· 6 min read

本博客托管于 Github,之前使用多说作为评论系统,然而多说停止支持,多方寻找最终决定使用 Gitment

这里转载了完整的使用说明并进行了部分修改,作者的原说明在此

基础使用

1. 注册 OAuth Application

点击此处 来注册一个新的 OAuth Application。其他内容可以随意填写,但要确保填入正确的 callback URL(一般是评论页面对应的域名,如 http://muzhou.tech

你会得到一个 client ID 和一个 client secret,这个将被用于之后的用户登录

2. 引入 Gitment

将下面的代码添加到你的页面:

其中container标识可以修改为你喜欢的名字,我把它替换成了commentcontainer
注意其中的 repo 是指你的项目名,而不是项目在 github 上的地址

<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 将会随着作者开发变动。如果你希望始终使用最新的界面与特性即可引入上述代码

如果你希望引用确定版本的 Gitment,则应该使用 npm 进行安装

$ npm install --save gitment

关于构造函数中的更多可用参数请查看 Gitment Options

3. 初始化评论

页面发布后,你需要访问页面并使用你的 GitHub 账号登录(请确保你的账号是第二步所填 repo 的 owner),点击初始化按钮

之后其他用户即可在该页面发表评论。

4. 使用

在使用的时候可以把评论框当作 github 中的 issue(本来就是这样的),请注意这里的所有功能都是基于 issue 功能的,你在这里的操作与对应 issue 是联动的 对于博客所有者来说,github 提供的邮件提醒功能可以及时的将新评论发送到你的邮箱

自定义

Gitment 很容易进行自定义,你可以写一份自定义的 CSS 或者使用一个新的主题。(主题可以改变 DOM 结构而自定义 CSS 不能)

比如你可以通过自定义主题将评论框放在评论列表前面:

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
},
}
const gitment = new Gitment({
// ...
theme: myTheme,
})
gitment.render('container')

更多自定义内容请查看文档

其他问题

语言问题

考虑到 GitHub 本身使用英文,而本项目面向用户均为 GitHub 用户,所以作者没有提供中文支持的打算。实在有需求的可以通过自定义主题支持中文

请勿滥用

在开发这个项目时我就一直有一个疑虑:我这样做有没有滥用 GitHub?为此我仔细读了 GitHub Terms of Service 中 API Terms 的部分,认为自己并没有违反协议。之后我向 GitHub 发邮件询问了这一问题。GitHub 给出的回复是:

We’re pleased to see you making use of the tools and resources available on GitHub.

因此本项目的确没有违反 GitHub 使用协议。但我还是想提醒使用本项目的用户,请保持克制,切勿滥用

样式版权

在项目开源前作者曾实现了一个像素级抄袭 GitHub Issues 样式的界面,但在阅读 ToS 时发现违反了 Section F,并在和 GitHub 邮件沟通的过程中确认了这一行为是侵权的。因此便改成了现在的样式。请其他想要自定义样式的用户也留意版权问题

写在最后

从开始搭建这个博客开始,我逐渐感受到了开源环境带来的美好。实话说,到现在我已经有能力不依赖 github 托管自己的博客了,可是由于比较忙所以没有改,这次又使用 github 托管评论是鉴于我的博客流量还算小,评论量也很小
感谢 github