为hexo博客增加gitalk评论功能

2019-03-18

博客的评论系统使用gitment了很长时间，具体的搭建方式也有介绍，详见：使用Hexo和GitHub免费搭建个人博客-3，最近越来越不好使了，经常出现登录不上的问题，经过一天的折腾，试过了：livere与gitalk，后来决定选择了gitalk，下面记录具体过程。

说在前面的话

为了说明方便，本博客使用的是基于hexo的yilia主题，其他主题方式很类似。

1、准备工作

1.1、注册一个OAuth Application

先注册一个OAuth Application，注册地址：https://github.com/settings/applications/new。填写的内容如下（点击图片查看大图），填完提交后，在完成后的详情界面中，复制出 Client ID 和 Client Secret 两组码以备用：

1.2、为博客主题添加配置参数

打开博客主题目录下的_config.yml配置文件，例如：我使用的主题是yilia，那么我应该打开的配置文件应该在\themes\yilia下的_config.yml配置文件，而不是hexo博客根目录下的_config.yml配置文件，接着根据自己的实际情况添加配置代码如下 【注意：冒号后面一定要跟一个空格】：

Gitalk:
  enable: true  # 配置是否开启gitalk的开关
  owner: LanTingShuXu      #你的 GitHub ID
  repo: lantingshuxu.github.io    #存储评论的repo仓库名称（可以是博客的git仓库名）
  client_id: e**********7         #1.1注册复制出来的client ID
  client_secret: 7b8****10608f5c  #1.1复制出来的client secret

批注：上面的配置代码可以自定义，方便自己记忆即可，意思是：不一定要写Gitalk、enable、owner、repo等单词，这些都是方便以后代码做变量引用而已，他们的作用仅仅是变量而已。

2、添加评论模块

2.1、添加gitalk的ejs文件

进入目录\themes\博客主题\layout\_partial\post，新建文件gitalk.ejs，添加如下代码，其中类似<%=theme.Gitalk.client_id%>的语法就是引用的1.2小节中添加的配置文件：

<!-- Gitalk 评论 start  -->
<!-- Link Gitalk 的支持文件  -->
<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>
<script type="text/javascript">
    var gitalk = new Gitalk({
         // gitalk的主要参数【引用_config.yml中特定的变量】
        clientID: '<%=theme.Gitalk.client_id%>',
        clientSecret: '<%=theme.Gitalk.client_secret%>',
        repo: '<%=theme.Gitalk.repo%>',
        owner: '<%=theme.Gitalk.owner%>',
        admin: ['<%=theme.Gitalk.owner%>'],
        id: "<%=url%>" // 这是仓库的id，这里使用的是文章的url作为id，也可以是path
    });
    gitalk.render('gitalk-container');
</script> 
<!-- Gitalk end -->

2.2、将gitalk添加到文章模板中

使用文本文档打开文件\themes\博客主题\layout\_partial\article.ejs，在最后添加以下代码，【其中if (theme.Gitalk.enable)判断的是1.2小节中的配置文件开关是否开启】：

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

3、初始化文章评论

通过以上两步即可将gitalk集成到博客中了，但是想让别人成功评论，还需要初始化评论，具体做法为：将博客推送到github上，打开需要初始化的文章，拖动到文章最底部，使用自己的github账号登录以完成评论功能的初始化。