Hexo 使用 Gitalk 增加留言簿

嘀咕

在 Calpa’s Blog 遇到一个漂亮的留言簿，一直怨念着要放到自己的博客里。终于，搞定了！

使用的插件为 Gitalk，本文仅介绍基础功能，其他功能请自行查看文档、调试。

Gitalk 直接使用 Github Issue 来生成留言板。

操作步骤

安装插件

与安装其他插件一样，不赘述了，记得要在 Hexo 对应的路经下安装：

npm i --save gitalk

新建 Github Application

点此新建：New OAuth Application

• Homepage URL 和 Authorization callback URL 两项，填写使用 Gitalk 的域名（不用加二级前缀），比如我的博客，填 arlmy.me 即可，不用填 z.arlmy.me
• 跳转的页面不要关，后面要用到 clientID 和 clientSecret

创建留言簿页面

• 在 source 路经创建 guestbook
• 在 guestbook 路经创建 index.md

引入代码

打开 index.md

第一部分，引入 CSS 样式表和 js 代码，复制粘贴即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

第二部分，引入加载 Gitalk 的 div 模块，复制粘贴即可：

<div id="gitalk-container"></div>

第三部分，引入一个 js 函数，以便使用 hexo g 命令时能够自动编译，复制粘贴，然后按后述讲解补充一下：

<script type="text/javascript">
	var gitalk = new Gitalk({
	  clientID: 'Github Application Client ID',
	  clientSecret: 'Github Application Client Secret',
	  repo: 'Github repo',
	  owner: 'Github repo owner',
	  admin: ['Github repo collaborators'],
	  perPage: 20
	})

	gitalk.render('gitalk-container')
</script>

讲解：

• clientID: 新建 Github Application 步骤得到的，不要删引号！
• clientSecret: 新建 Github Application 步骤得到的，不要删引号！
• repo 和 owner 两项，是为了把留言用的 issue 放在特定的 repo 下面，用这两个元素定位
  • 比如你要把留言板的 issue 放在名为 Orgs/yes.github.io 的 repo 下，那么 repo 就填写 yes.github.io，owner 则填写 Orgs，不要删引号！
• admin: 也就是你的 Github id，填入即可，可填多人。不要删括号和引号！
• perPage: 每页显示多少条留言

顶栏增加入口

与 source 同级的 themes, maupassant 文件夹下，打开 _config.yml，menu 部分增加：

- page: GUESTBOOK
  directory: guestbook/
  icon: fa-commenting

使用的 icon 为 Font Awesome Icons，在网站上找一个自己喜欢的 icon，复制简写代码过来就行了，我选的是 fa-commenting

部署

hexo g -d

最终链接

域名后加 /guestbook 即为最终留言簿所在的链接

初始化

留言簿页面需要初始化。部署后到页面内，授权自己的 Github 账号登陆（即本 Application 的管理员），然后任意发一条信息即可。

其他

可以使用 Gitalk 为任意一篇文章增加评论功能，也可以放到博客的任意页面下面（添加方式与本页流程相同），记得要初始化，Gitalk 将自动在 Github 端增加 issue。

---

CHANGELOG

• 180822 Arlmy 创建
• 180822 Arlmy 撰写、发布