Hexo 有很多留言板的第三方插件(多说、disqus、Gitment、Gitalk 等等),但是这里主要讲解怎么使用 Gitalk,
因为它比较好看。

我一篇衔接用Hexo搭建个人博客网站,主要解决遗留的问题,因为哪一篇太长了,放在一起不好看。

一、创建 GitHub Application

目的就一个,拿到 clientID clientSecret, 说白了就是有权限去操作的 Git 仓库,给你创建 Issue 来放留言内容:
点这里创建

除了最后一个参数要填写你的博客地址,比如我的是:https://wsuo.github.io/
其余的参数随便填,甚至都不用记住

二、 引入 gitalk 的代码

themes/[theme_name]/layout/_script/_comments/ 目录下,创建gitalk.swig文件。

<!-- gitalk.swig -->
<link href="https://cdn.bootcss.com/gitalk/1.4.0/gitalk.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/gitalk/1.4.0/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script type="text/javascript">
  var gitalk = new Gitalk({
    clientID: '{{ theme.gitalk.ClientID }}',
    clientSecret: '{{ theme.gitalk.ClientSecret }}',
    repo: '{{ theme.gitalk.repo }}',
    owner: '{{ theme.gitalk.owner }}',
    admin: ['{{ theme.gitalk.adminUser }}'],
    id: md5(location.pathname),   // ISSUE:location.href 限制50个字符 (应该是Issue 内容存数据库的标识, 具体在页面上无感)
    labels: '{{ theme.gitalk.labels }}'.split(',').filter(l => l),  // 需要的 labels需要一个数组,否则会报错
    perPage: {{ theme.gitalk.perPage }},
    pagerDirection: '{{ theme.gitalk.pagerDirection }}',
    createIssueManually: {{ theme.gitalk.createIssueManually }},
    distractionFreeMode: {{ theme.gitalk.distractionFreeMode }}
  })
  gitalk.render('gitalk-container')
</script>

gitalk.swig 引用进来。

<!-- themes/[theme_name]/layout/_script/comments.swig -->
{% include '_comments/gitalk.swig' %}

这里不同的主题可能不太一样,如果没有找到这个 comments.swig , 可以直接放到themes/polarbear/layout/_layout.swigbody 结束标签前

三、添加配置

上面用到很多参数,这些参数正常来说,放到 _config.yaml 里面配置比较好, 后续修改,则不需要去改代码。

# theme/[theme_name]/_config.yaml 添加配置
# ===========================================
# Comments Settings
# ===========================================
gitalk:
  enable: true # 是否启动
  ClientID: Your ClientID # 之前的Client ID
  ClientSecret: Your ClientSecret # 之前的Client Secret
  repo: gitalk # 留言板内容需要存放的仓库名称
  owner: wsuo # 你 github 的帐号 eg: www.github.com/wsuo ,帐号就是wsuo
  adminUser: wsuo # 管理员用户
  labels: # issue 的标签
    - gitalk
  perPage: 15 # 每页展示条数
  pagerDirection: last # 排序方式是从旧到新(first)还是从新到旧(last)
  createIssueManually: false #如果当前页面没有相应的 isssue ,且登录的用户属于 admin,则会自动创建 issue。如果设置为 true,则显示一个初始化页面,创建 issue 需要点击 init 按钮。
  distractionFreeMode: false #是否启用快捷键(cmd|ctrl + enter) 提交评论.

到此为止就完成了!
如果你刷新之后看不到效果,那就等一会再刷新,他会有延迟的。

可以看看我的我的博客地址参考一下,也欢迎去留言。

考文章:
三步搞定hexo留言板