Hexo+gitalk添加评论

高产似母猪的我又来了，今天的第三篇文章，对博客添加评论功能。

一、next主题

我是采用的next主题添加评论功能。因此，首先需要下载next主题

next主题GitHub地址有两个，之前的好像已经不维护了，反正我下载的hexo版本是最新的，然后我按照网上教程找到之前那个版本的next设置之后会报错，提醒我next有了新的地址。

1、克隆next主题

1	git clone https://github.com/theme-next/hexo-theme-next themes/next

在hexo目录执行这个命令，克隆next主题文件后面的themes/next是指在当前目录的themes目录下新建next文件夹用于存放next主题文件。

2、修改配置文件

下载好之后进入hexo文件目录下的_config.yml文件（注意不是next主题下的_config.yml文件），找到theme字段，修改它的值为next

1	theme: next //注意要有空格

3、启动服务器

在启动服务器之前可以先清除一下缓存之类的，如果不清除很可能启动服务器之后还是原来的主题。

1 2	hexo clean hexo server

浏览器中访问localhost:4000就可以看到更新之后的主题啦。

二、gitalk

1、创建GitHub仓库

在个人的GitHub账号中创建一个新的仓库，用于放置评论，注意要创建public公有的仓库。

2、创建GitHub Application

登录GitHub，点击个人头像找到settings/Developer settings/OAuth Apps点击New OAuth App

注册好之后就会有Client ID和Client Secret，这两个值后续会用到。

为Next主题添加Gitalk支持

其实Gitalk实现主要是依靠四个文件：（新版本next可以跳过1，3步骤）

1、gitalk.swig文件

这个文件在hexo目录的themes\next\layout\_third-party\comments路径中，文件名为gitalk.swig。主要是用来显示评论的组件，就有点类似与那种动态网页的写法。最新版的next是有这个文件的，如果没有的话那你就是老版的next，你需要手动添加：

{% if page.comments && theme.gitalk.enable %}
  <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({
      clientID: '{{ theme.gitalk.clientID }}',
      clientSecret: '{{ theme.gitalk.clientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.owner }}',
      admin: ['{{ theme.gitalk.admin }}'],
      id: location.pathname,
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')
  </script>
{% endif %}

2、index.swig

在主题文件 themes/next/layout/_third-party/comments/index.swig 中引入刚刚添加的文件。

1	{% include 'comments/gitalk.swig' %}

主要还是看你的gitalk文件位于index文件的哪个相对位置，自己看情况写位置信息。

3、comments.swig

在 themes/next/layout/_partials/comments.swig 文件末找到最后的 {% endif %} 语句，替换为如下代码，这个代码就是把之前gitalk.swig文件里的动态页面组件添加到主页面中。可以注意到它们的div的id都是一样的均为gitalk-container。（注意这也是老版本的next才需要修改comments.swig文件，新的next版本是不需要的。）

1
2
3

{% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>
{% endif %}

4、_config.yml

在 themes/next/_config.yml 文件中添加 Gitalk 的配置。

gitalk:
  enable: true # 是否启用
  owner: Twilg # 用户名
  repo: blog_Comments # 存放评论的仓库名
  clientID: 刚刚新建应用的clientID # Github Application 的 clientID
  clientSecret: 刚刚新建应用的clientSecret # Github Application 的 clientSecret
  admin: Twilg # 用户名
  distractionFreeMode: false # 评论时遮照效果的开关

最后，清理一下缓存，生成一下静态文件，部署一下服务器就好啦。

1
2
3

hexo clean
hexo g
hexo d