hexo

Hexo 博客接入 gitment 评论功能

gitment 完整接入与采坑分享

Posted by YuHo Wang on 2018-06-12

Gitment is a comment system based on GitHub Issues, which can be used in the frontend without any server-side implementation.
Gitment 是一款基于 Github Issues 实现的评论系统，支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

注册 OAuth Application

点击 OAuth Application 前往注册

  • Application name：github 用户名或者 id
  • Homepage URL: 个人博客的地址（如我的是 https://wyh888.github.io）
  • Application description: 应用描述，可以随意填写
  • Authorization callback URl: 回调地址，填授权后返回的地址，一般是个人博客地址（如我的是 https://wyh888.github.io），网上有些教程说是填写 https://github.com，亲测不行，接入后会报这个错 Error: Comments Not Initialized，初始化失败

注册成功后会得到一个 client ID 和一个 client secret，用于之后的用户登录。

接入 Gitment

添加下列代码到页面中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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: '<%= page.date %>', // 可选。默认为 location.href。这个id的作用，就是针对一个文章有唯一的标识来判断这篇本章。如果 id 太长会导致初始化失败，因此要让 id 保证在 50 个字符内，最好是使用 page.date
        owner: '', // Github 用户名或是 Github ID
        repo: '', // 存储评论的 repo，注意这里只要填写仓库名就可以了，如 blog-comment，而不是 https://github.com/wyh888/blog-comment
        oauth: {
            client_id: '', // 上文注册得到的 client ID
            client_secret: '', // 上文注册得到的 client secret
        },
    })
    gitment.render('container')
</script>

初始化评论

配置正确的文章，第一次显示时，会提示还没有初始化，需要文章作者登陆 Github 授权后，会出现初始化按钮，点击按钮后(注意，不要多点按钮，否则 issues 出现多条一样的)，评论功能正常初始化。

关于自动初始化所有文章的功能，到本文编写时，还没有一个完善的解决方法，就是用脚本来执行自动化，有需要的可以详细了解：https://github.com/imsun/gitment/issues/5

参考引用

FEATURED TAGS
hexo