這個系列我們前面已經更新了兩篇，點選下列連結可直接訪問：
基於 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，後續如果有好的解決辦法，再更新吧。