这个系列我们前面已经更新了两篇，点击下列链接可直接访问：
基于 Hexo + GitHub Pages 搭建个人博客（一）
基于 Hexo + GitHub Pages 搭建个人博客（二）
一、添加扫描二维码关注功能
打开 themes 目录下的 next 主题配置文件，找到 Wechat Subscriber 标签，将该标签下的配置改成如下形式：
# Wechat Subscriber
wechat_subscriber:
enabled: true # 打开图片显示功能
qcode: /images/wechat-qcode.jpg # 需要显示的二维码图片
description: 扫描二维码关注微信公众号，了解更多 # 在图片的底部添加描述
配置完成后，切记将所需要扫描的二维码图片放置在 images 文件夹下面，否则系统找不到图片。
结果如下图所示：
二、添加文章赞赏功能
打开 themes 目录下的 next 主题配置文件，找到 Reward 标签，将该标签下的配置改成如下形式：
# Reward
reward_comment: 赞赏是最好的支持与鼓励！ # 添加打赏描述
wechatpay: /images/wechatpay.jpg # 微信收款码图片
alipay: /images/alipay.jpg # 支付宝收款码图片
#bitcoin: /images/bitcoin.png
配置完成后，切记将所需要收款码图片放置在 images 文件夹下面，否则系统找不到图片。
结果如下图所示：
三、添加文章版权声明功能
打开 themes 目录下的 next 主题配置文件，找到 Declare license on posts 标签，将该标签下的配置改成如下形式：
# Declare license on posts
post_copyright:
enable: true # 激活版权声明模块
license: CC BY-NC-SA 3.0 # 版权许可协议
license_url: https://compassblog.github.io/ # 声明的文章的可点击链接（域名）
配置完成后，执行如下 主目录下打开 Git Bash 命令窗口，执行如下命令开启 hexo 服务器：
hexo s
浏览器访问，显示结果如下图所示：
四、添加 Gitalk 评论系统
1、什么是 Gitalk
Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件，这款评论插件使用 Github 登录，也可以快速提交评论，其实有一款与 Gitalk 类似的评论插件叫 Gitment，然而这款有国内大神编写的评论插件已经不再维护，因此就只能选择国外的 Gitalk 了，并且 Gitalk 支持移动端。
2、为什么要用 Gitalk
我们知道 hexo 博客 的 Next 主题支持多种评论系统的继承，例如 Disqus，畅言，网易云跟帖，多说，来比力，友说，红杏等评论系统，但是这些评论系统要么不再提供服务，要么需要「科学上网」才能够加载，要么就是龟速加载，好吧，我想说的就是 Gitalk ，现在你明白为啥要用 Gitalk 了？
3、Gitalk 评论系统集成
（1）新建一个 GitHub 仓库，用于存放评论的记录，如下图所示：
（2）在 GitHub 上新建一个 OAuth application ： 点击这里可以直接新建
新建 OAuth application 详细说明：
Application name //第（1）点建立的仓库名称
Homepage URL //博客地址
Application description //可不填
Authorization callback URL //博客地址
如下图所示：
完成后，我们回获得如下图中的相关信息，后面可能会用到：
（3）创建 Gitalk 的 swig 文件，在博客的主目录中打开 themes/next/layout/_third-party/comments 文件夹，新建 gitalk.swig 文件，在文件中配置如下代码：
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.gitalk.enable %} //_config.yml文件若没有添加enable: true可删除该判断
{% if theme.gitalk.distractionFreeMode %}
<link rel='stylesheet' href="https://yiyeti.cc/usr/themes/veryse/css/gitalk.css">
<script src="https://yiyeti.cc/usr/themes/veryse/css/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '{{theme.gitalk.clientID}}',
clientSecret: '{{theme.gitalk.clientSecret}}',
id: window.location.pathname,
repo: '{{theme.gitalk.repo}}',
owner: '{{theme.gitalk.owner}}',
admin: '{{theme.gitalk.admin}}',
distractionFreeMode: '{{theme.gitalk.distractionFreeMode}}',
})
gitalk.render('gitalk-container')
</script>
{% endif %}
{% endif %}
{% endif %}
（4）在同样的目录下找到并打开 index.swig 文件，在文件中配置如下代码引入 gitalk.swig 文件：
{% include 'gitalk.swig' %}
（5）在博客的主目录中打开 themes/next/layout/_partials/ 文件夹，找到并打开 comments.swig 文件，找到最后一个if分支，即下面这个分支代码：
{% elseif theme.valine.appid and theme.valine.appkey %}
<div id="vcomments"></div>
在这个 if 分支后加一个 Gitalk 的分支，代码如下：
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
（6）在 themes/next/_config.xml 主题配置文件中加入如下配置：
gitalk:
enable: true # 是否开启 Gitalk 评论
owner: # GitHub 用户名
repo: #仓库名称
ClientID: ******
ClientSecret: ******
admin: # GitHub 用户名
distractionFreeMode: true
到这里，Gitalk 评论系统基本就已经集成了。
后记： 最近 GitHub 限制了访问 label 的长度，即当我们博客文章的标题标签转换成 Issue超过 50 个字符时，Gitalk 评论系统便无法进行初始化，即对我们博客题目有了限制。而对于这个问题的解决，目前的想法是可以通过 md5 转换的方式封装 id，后续如果有好的解决办法，再更新吧。
扫描二维码关注微信公众号，了解更多
---------------------------------------------