Hexo使用Gitalk设置评论区

wsuo

发布于 2020-07-31 15:16:10

9460

发布于 2020-07-31 15:16:10

文章被收录于专栏：技术进阶之路技术进阶之路

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：kk 限制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.swig 的 body 结束标签前

三、添加配置

上面用到很多参数，这些参数正常来说，放到 _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) 提交评论.