• 百 度
  • 京 东
  • 淘 宝
  • 知 乎
  • Bing
  • Google
  • Yandex
  • Quora
  • GitHub
  • StackOverflow
  • SegmentFault
  • 医 疗

3-hexo评论系统Gitment说明

  1. 项目介绍
  2. 基础使用
    1. 1. 注册 OAuth Application
    2. 2. 引入 Gitment
    3. 3. 初始化评论
    4. 4. 自定义
  3. 其他问题
    1. 1. 语言问题
    2. 2. 请勿滥用
    3. 3. 样式版权

这是 3-hexo 说明文件,转载自 孙士权的个人博客:https://imsun.net/posts/gitment-introduction/

项目介绍

Gitment孙士权 实现的一款基于 GitHub Issues 的评论系统。
支持在前端直接引入,不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作;
同时有完整的 Markdown / GFM 和代码高亮支持;
尤为适合各种基于 GitHub Pages 的静态博客或项目页面。
 
本博客评论系统已迁移至 Gitment。
虽然 Gitment 只能使用 GitHub 账号进行评论,但考虑到博客受众,这是可以接受的。

基础使用

1. 注册 OAuth Application

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

2. 引入 Gitment

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

<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. 自定义

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')

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

其他问题

1. 语言问题

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

2. 请勿滥用

在开发这个项目时我就一直有一个疑虑:我这样做有没有滥用 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 使用协议。但我还是想提醒使用本项目的用户,请保持克制,切勿滥用。

3. 样式版权

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


转载请注明来源。

文章标题:3-hexo评论系统Gitment说明

本文作者:bas369.com

发布时间:2020-07-03, 07:37:00

最后更新:2020-07-03, 21:48:17

原始链接:https://www.bas369.com/more/learning_notes/2020/07/03/3-hexo%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9FGitment%E8%AF%B4%E6%98%8E/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


  • 关于我们
  • 苏公网安备 32132302010228号
  • 联系我们
目录