评论系统集成 Gitment

2017-06-08  本文已影响141人  张知卓见

why gitment

多说要挂了
网易云跟帖二级域名不能用
畅言需要备案
来比力出现不明韩语
友言听说不支持HTTPs
Disqus 一墙之隔
Gitment 是一款基于 GitHub Issues 的评论系统。支持在前端直接引入,不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作,同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。虽然 Gitment 只能使用 GitHub 账号进行评论,但考虑到博客受众,这是可以接受的。

use gitment

示例页面
官方文档 写的不细,自己写个。

注册 OAuth Application

callback URL 写博客域名,其他内容可以随意填写,得到一个 client ID 和一个 client secret 备用。

创建 comment repo 备用

用于存放评论到 issues

引入 Gitment

hexo indigo 主题已经集成了 gitment, 可直接在 _config.yml 配置。

gitment: 
  owner: iljyya
  repo: comments
  client_id: f851449a81bef86857ac
  client_secret: 6f3ce61b5e4f9518a13640a35773e5371a575898

集成过程

先参考官方给的接口[1]

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

indigo/layout/_partial/post/comment.ejs 插入

<%- partial('../plugins/disqus') %>

<%} %>

indigo/layout/_partial/plugins/gitment.ejs 添加

<% if (theme.gitment){ %>
<section class="comments" id="comments">
    <div id="gitment_thread"></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({
            owner: '<%- theme.gitment.owner %>',
            repo: '<%- theme.gitment.repo %>',
            oauth: {
                client_id: '<%- theme.gitment.client_id %>',
                client_secret: '<%- theme.gitment.client_secret %>',
            },
        })
        gitment.render('comments')
    </script>
</section>
<% } %>

再按上面配置 _config.yml 即可。[2]


  1. https://imsun.net/posts/gitment-introduction/

  2. http://blog.ckyol.moe/2017/05/04/gitmentHexoTheme/

上一篇 下一篇

猜你喜欢

热点阅读