嘀咕

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
  • 跳转的页面不要关,后面要用到 clientIDclientSecret

创建留言簿页面

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

引入代码

打开 index.md

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

1
2
<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 模块,复制粘贴即可:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
<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.ymlmenu 部分增加:

1
2
3
- 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 撰写、发布