博客留言系统更新为Gitalk

目录

1. 原由
2. 官网
3. ejs版步骤
4. 问题
5. 优化
6. 参考

1. 原由

之前用友言评论，最近打开发现gg了；刚好看到有道友发的有关Gitalk评论功能。基于GitHub的issue和Preact，GitHub大法好，果断采用啊。于是，这个改版列入了周末计划。

2. 官网

https://github.com/gitalk/gitalk/blob/master/readme-cn.md

3. ejs版步骤

1.Github上新建一个仓库，命名如blog_comment。

2.创建OAuth Application，链接

Application name: 第一步建立的仓库名`blog_comment`
Homepage URL: https://yourgithubname.gitbub.io/
Authorization callback URL: https://yourgithubname.gitbub.io/

3.theme目录下的config中加入

# Gitalk 
gitalk: 
  enable: true    #用来做启用判断可以不用
  clientID: 'clientID'    #OAuth Application
  clientSecret: 'clientID'   #OAuth Application
  repo: blog_comment仓库   #刚创建blog_comment用于gitalk Issue的仓库名称
  owner: username    #github用户名
  admin: username
  distractionFreeMode: true  # 类似于Facebook的阴影效果
  labels: ['Gitalk']  # 用于生成Issue的标签

发现网上的基本上没有基于Hexo-Theme-Yilia的教程，只能看着其他模版，来改写语法的不同了。

4.gitalk.ejs

<% if(theme.gitalk.enable) {%>
<% if(theme.gitalk.distractionFreeMode) {%>
	<link rel="stylesheet" href="/gitalk/gitalk.css">
	<script src="/gitalk/gitalk.min.js"></script>
	<script type="text/javascript">
		var gitalk = new Gitalk({
			id: location.pathname,
			clientID:  '<%- theme.gitalk.clientID %>', 
			clientSecret: '<%- theme.gitalk.clientSecret %>',
			repo: '<%- theme.gitalk.repo %>',
			owner: '<%- theme.gitalk.owner %>',
			admin: '<%- theme.gitalk.admin %>',
			distractionFreeMode: '<%- theme.gitalk.distractionFreeMode %>',
		})
		gitalk.render('gitalk-container')
	</script>
<% } %>
<% } %>

4. 问题

替换过程中遇到问题。

1.Error: not found

• 仓库未建立或名称错误
• 语法改写错误，没获取clientID，可查看redirectURL是否包含正确的clientID

我的问题是语法错误，ejs和swig语法区别。

2.未授权

未建立Oauth Apps，入口

clientID未获取，可能是上面的错误。

3.issue不存在

初始化issue；对应的id，唯一标示。

id是location.url还是location.pathname,可以在console调试。

在comment仓库中，创建对应的issue；label必须设置成id对应的，且中文paathname的label太长。

一个文章一个issue。

比较麻烦，可否脚本自动化？==已支持自动化。

5. 优化

1.加载速度

将Gitalk的js和css拿到本地，放置在resource/gitalk目录下。引用方式如下：

<link rel="stylesheet" href="/gitalk/gitalk.css">
<script src="/gitalk/gitalk.min.js"></script>

2.css优化

# 加入margin值
.gt-container {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 16px;
  margin: 0 30px;
}

6. 参考

• http://zhangchenghui.cn/2017/11/28/Gitalk/
• https://www.jianshu.com/p/9be29ed2f4b7

• 本文作者： Linking
• 本文链接： https://linking.fun/2018/01/06/comment-sys-with-gitalk/
• 版权声明： 版权所有，转载请注明出处！