静态博客配置 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/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/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 部分能找到 clientID 和 clientSecret

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

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

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

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

最后一个参数不用动。

能做的做完了

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

- THE END -

Copyright © 2022, Built with Gatsby