关于个人博客加入gitalk评论插件

简单的方法与问题总结

Posted by Otone on August 30, 2018

前言

大家建个人博客,都会使用到留言评论功能,现在的评论系统有很多,比较多人用的有多说(已关闭)、畅言来必力,国外的有disqus(不会翻墙的就不适用拉说实话作为一个程序猿不会翻墙真的好嘛23333),这里我推荐的是gitalk,我就来讲一讲怎么添加gitalk插件。

正文

1st. gitalk界面、功能、特点及原理

gitalk 是使用 Github 帐号登录,需要项目上传到github上(写代码连Github都不知道可别把emmmm),界面简洁,可使用的参数多,支持多语言,还支持Markdown语法

gitalk的原理是基于Github issue和Preact开发的评论插件,实际上就是在issue上提问题发表,之前还有个类似的gitment,不过已经比较久没维护了。

2nd. 设置gitalk

将这段代码插入到你的网站:

<!-- Gitalk 评论 start  -->

<!-- Link Gitalk 的支持文件  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>
    <script type="text/javascript">
    var gitalk = new Gitalk({

    // gitalk的主要参数
		clientID: `Github Application clientID`,
		clientSecret: `Github Application clientSecret`,
		repo: `存储你评论 issue 的 Github 仓库名`,
		owner: 'Github 用户名',
		admin: ['Github 用户名'],
		id: '页面的唯一标识,gitalk会根据这个标识自动创建的issue的标签',
    
    });
    gitalk.render('gitalk-container');
</script>

<!-- Gitalk end -->

一个一个讲一讲上面的所需要的参数:

  • clientID,创建Github Application获得的clientID(怎么创建我下面讲)
  • clientSecret,也是创建Github Application获得的
  • repo,存储你评论(也就是issue)的仓库名,建议用你本身的项目仓库
  • owner,'Github用户名'
  • admin,管理员,可以有多个,用数组表示['GitHub用户名']
  • id:页面标识,gitalk根据这个标识来创建对应issue的标签(你总不能啥页面下面都是那个评论吧~),我使用的是页面的相对路径window.location.pathname
  • 剩下的参数是自由选择添加拉,可以看这里

3rd. 创建 Github Application

上面讲到 Client IDClient Secret 需要创建Github Application获得,现在就来讲一讲这个Github Application如何创建

首先点击这里

  • Application name:随意,自己知道就行
  • Homepage URL:appliaction主页,写自己的博客地址
  • Application description:描述,自己写(
  • Authorization callback URL:回调地址,所返回的地址,写自己的博客地址

点击Register application创建

好啦,这就看到我们的 clientID 和 Client Secret ,Client Secret是私密的,就像是密码,自己保存好。什么?你说我上面的漏出来了?那你用啊,能用算我输

参数都设置好之后,将代码推送到GitHub,没问题的话进入你自己的博客页面就会有gitalk的内容了。

当你用GitHub帐号(管理员)登录时,就会在你repo对应的仓库下创建issue。

当然,你也可以手动去创建issue,只要标签没问题都一样的。

最后の一些问题

gitalk需要每个对应页面都用管理员登录一下创建对应的issue…

要自动创建的话可以参考一下这篇wiki

还有我自己设置的时候遇到的一些问题,我也在这里讲一讲

  • gitalk设置之后出现 Error: Validation Failed :
    label太长了….命名文章标题别太长了

  • 登录后返回页面,页面url后出现 ?error=redirect_uri_mismatch&
    error_description=The+redirect_uri+MUST+match
    +the+registered+callback+URL+for+this+application.
    &error_uri=https%3A%2F%2Fdeveloper.github.com
    %2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting
    -authorization-request-errors%2F%23redirect-uri-mismatch:
    去Setting/Developer settings查看你对应的application的Authorization callback URL有没有写对

还有别的问题,可以在gitalk下的issue找找

最后,给个 star 吧~ 就是这样~