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.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) 提交评论.
到此为止就完成了!
如果你刷新之后看不到效果,那就等一会再刷新,他会有延迟的。
可以看看我的我的博客地址参考一下,也欢迎去留言。
考文章:
三步搞定hexo留言板