hexo博客yilia主题利用gitalk插件实现评论功能

2020-04-02

hexo博客yilia主题利用gitalk插件实现评论功能

前言

早就想捣鼓个人博客，但一直没有时间与精力，正巧撞上病毒时代，加上老师布置下任务，于是我的第一篇个人博客就诞生了

虽然我有csdn账号，但直接用csdn显然和合我的心意，一是界面丑逼格不高，二是有诸多限制，那时我还没意识到，我将步入一个个大坑之中……

关于之前怎么装的hexo与yilia主题，这里就不再多赘述，网上教程很多，大体也都没什么问题，我就针对一下开通评论功能，讲一下我的方法

正文

刚开始我是准备用valine作为评论系统，但是valine的评论系统是放在LeadCloud上面的，网上的教程很多都不全，有些博文详细讲了在hexo主题上的配置，但是对于LeadCloud上的部署却一笔带过，加上valine版本更新，有些老一点的文章内容也不一定能直接拿来用，半天的操作下来，博客竟然一点变化也没有，而我也硬是没有头绪问题在哪儿……

后来尝试了gitment，有点效果，但是一直报错，还是没办法使用评论功能，后来才知道gitment的开发者早就停止了更新，现在这个情况据说是他的服务器不能用了，晕死……

兜兜转转下，来最终尝试了gitalk，下面是步骤

1.要在我们主题的的路径下添加一个gitalk.ejs文件
路径为 \themes\yilia\layout_partial\post
yilia是我用的主题，如果有用别的主题的就用自己主题的路径
下面是文件的代码:

<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>

2.修改 \themes\yilia\source-src\css 下的comment.scss
用下面的代码替换

#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;
	}
}

3.在 theme\yilia\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)
    }) %>
  <% } %>

注意代码的位置，像我用的yilia主题,代码放在这个位置

最后那一块是gitment的代码，是yilia主题自带的，我将需要新增的代码放在了它的前面

4.在我的yilia主题配置文件(_config.yml)中新增gitalk相关的配置(yilia这里可以将gitment的配置注释掉)：

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

上面的用户名等信息，当然都是填你自己的，既然选择了hexo博客，自然不可能没有连github账号都没有，Gitalk 需要一个 Github Application，也就是需要填的ClientID和ClientSecret，若是没有，可以去这个网站申请

第一个 Application name 是应用名称
第二个 Homepage URL 是主页地址
第三个是描述
第四个是回调地址写你博客的地址

5.提交更新

hexo clean
hexo g
hexo d

这样hexo博客就有一个评论功能啦
我的评论

结尾

虽然有了一个简单的评论功能,但是gitalk似乎并不稳定，经常会出现 network erroe 错误，像这样

可能是因为不是大陆的的原因???
以后有机会还是要找一个更快更稳定的评论方案