静态博客配置 gitalk 评论系统

Posted by Sir0xb on 2019-07-29 20:20:35 +0800

静态站点的评论系统虽然很多,但综合考虑能够真正用起来并且很稳定的很少。 以前的多说没了,Disqus虽然很强大,但毕竟是第三方,也免不了可能出现多说的情况。所以,我的站点最后选用了 gitalk ,站点就在 git 上,用 git 提供的功能应该能稳定点。

网上虽然有很多关于 gitalk 的文章,不过可能他们进行的太过顺利,于是很多细节没有写出来,所以参考那些文章会遇到大把大把的问题。 这次通过自己安装评论系统,把经验写出来,希望其他人不要遇到同样的坑。

准备工作

登录 github 创建应用授权。

登录之后点击右上角的设置,如下图:

进入设置界面之后,点击左下角的 Developer settings,如下图:

先点击左侧的 OAuth Apps,随后可以看到创建按钮 New OAuth App,如下图:

重点来了。下图是我填写的信息,我说明下。

  • Application name: 就是应用的名字,可以随意起一个名字。

  • Homepage URL: 填写自己的站点域名,如果与来源网站不同,会出现找不到评论的错误页面。如下图:

  • Authorization callback URL: 这个填写git项目地址。 可以不是博客站点项目,可以自己创建一个评论的项目,没问题的。但需要注意的是,这个地址的结尾,会在后续的 repo 字段里用到。


静态站点添加评论系统

这套系统跟选用的博客系统没有任何关系,是独立的第三方应用,所以添加方式可以自行选择。

运行代码的参数,后面说明。

第一种:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.min.js"></script>
 
<!-- or -->
 
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

在文章模版里添加

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

最后找个地儿运行如下代码:

const gitalk = new Gitalk({
clientID            : 'GitHub Application Client ID',
clientSecret        : 'GitHub Application Client Secret',
repo                : 'GitHub repo',
owner               : 'GitHub repo owner',
admin               : ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id                  : location.pathname,      // Ensure uniqueness and length less than 50
distractionFreeMode : false  // Facebook-like distraction free mode
})
 
gitalk.render('gitalk-container')

第二种: 安装 npm

npm i --save gitalk

在博文模版里引入资源

import Gitalk from 'gitalk'
...
import 'gitalk/dist/gitalk.css'
...

博文模版中添加锚点

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

最后找个地儿运行如下代码:

const gitalk = new Gitalk({
clientID            : 'GitHub Application Client ID',
clientSecret        : 'GitHub Application Client Secret',
repo                : 'GitHub repo',
owner               : 'GitHub repo owner',
admin               : ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id                  : location.pathname,      // Ensure uniqueness and length less than 50
distractionFreeMode : false  // Facebook-like distraction free mode
})
 
gitalk.render('gitalk-container')

最后再说说参数。

创建好的 git 应用授权,在 1 user 部分能找到 clientIDclientSecret

第三个参数,是在创建授权时在 Authorization callback URL 填入的项目地址的项目名称。 这个如果填写的不一样,博文下方的界面能渲染出来,但是初始化 & 评论时出现请求 404。返回结果如下:

{
"message":"Not Found",
"documentation_url":"https://developer.github.com/v3"
}

第四个参数和第五个参数,填写 git 账号ID即可。

第六个参数有个潜规则,如果超过长度 50 可能会遇到错误,自己可以 location.pathname 看看是不是过长。 我这里直接选用了博文的随机 ID 地址。

最后一个参数不用动。


能做的做完了

刷新页面,测试下评论系统吧。

- THE END -