Hexo yilia主题配置gitalk插件

2020-09-03

字数统计: 995字 | 阅读时长: 4分

前言

今天想给我的yilia博客配置一下评论系统，左选右选选择了不会被墙又不像国内评论插件浮夸的gitment，
一切都配置好了给我报Object ProgressEvent错误，经调查发现作者服务器到期了，但是作者公开了
该部分的源码，可以供使用者搭一个服务器来运行，但对于我这种轻度博客用户来说，自己制作属实
有些繁琐，使用其他人搭建好的服务器又不知何日会不能使用，总没什么安全感，于是采用gitalk来
实现评论功能。gitalk使用虽然简单，但中途还是遇到一些弯路，所以写一篇博文来记录一下。
本文参考：https://www.cnblogs.com/liuurick/p/10713673.html ，在其基础上解决了一些常见错误。
以下是实现步骤：

一、在GitHub注册OAuth application

注册网址：https://github.com/settings/applications/new

OAuth

Application name: 随便起一个名字
Homepage URL; 因为我有自己的域名，所以填写https+自己域名
Application description:描述，选填
Authorization callback URL: 填写与Homepage URL相同的域名

填写完毕后点击Register application 跳转到另外一个界面，这里可以得到一个
Client ID和Client Secret，在之后的步骤会用到。
接下来因为yilia本身并未对gitalk有预先配置，所以需要手动配置一些代码。

二、在layout/_partial/post目录下新增gitalk.ejs文件

代码如下：

<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div> 

<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>
<script type="text/javascript">

if(<%=theme.gitalk.enable%>){
	var gitalk = new Gitalk({
  	clientID: '<%=theme.gitalk.ClientID%>',
  	clientSecret: '<%=theme.gitalk.ClientSecret%>',
  	repo: '<%=theme.gitalk.repo%>',
  	owner: '<%=theme.gitalk.githubID%>',
  	admin: ['<%=theme.gitalk.adminUser%>'],
  	id: '<%= page.date %>',
  	distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container') 
}
</script>

三、修改source-src/css/目录下comment.scss文件

在原来的基础上增加了#gitalk-container，

代码如下：

#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
	padding: 0 30px !important;
	min-height: 20px;
}

#SOHUCS {
	#SOHU_MAIN .module-cmt-list .block-cont-gw {
		border-bottom: 1px dashed #c8c8c8 !important;
	}
}

四、在layout/_partial目录下的article.ejs文件内新增gitalk相关的配置代码：

代码如下：

<% if(theme.gitalk.enable){ %>
  <%- partial('post/gitalk', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

这里注意要把这段代码插到原本gitment位置的上方。

五、在yilia主题配置文件(_config.yml)中新增gitalk相关的配置：

代码如下：

gitalk:
  enable: true #是否开启
  githubID: abcd #你的Github用户名
  repo: abcd.github.io #Github仓库名称
  ClientID: d59609200a63b0eexxxx #创建的Application ClientID
  ClientSecret: d5eb433efa8075a46a3c6ec2744212acdbxxxxx #创建的Application ClientSecret
  adminUser: abcd # 评论初始化账户(GitHub ID)
  distractionFreeMode: true # 是否开启分心自由模式 也就是免打扰

记得把gitment的配置注释掉

之后理论上hexo clean+hexo g+hexo d就可以使用了。

但是我在配置完后出现了issue找不到的问题，

即”未找到相关的Issues进行评论，请联系XXX进行创建”

这里笔者并不清楚造成这种情况的具体原因，只给出

对我有用的解决方案。

六、解决方案

先将OAuth Apps的Homepage URL与Authorization callback URL属性调成http链接，尝试是否可用。

调为http后笔者的gitalk可以正常登录一次，然而注销后出现另一问题，登录后直接跳转到主界面，无法再次登录。

这种情况可能是gitpages设置了强制https导致的，我是先到GitHub的仓库中找到settings，向下拉列表可以看到gitpages的设定，

将enforcehttps先取消再打开，然后将之前设置为http的两个属性重新设置回https，这个问题就解决了。