這個系列我們前面已經更新了兩篇，點選下列連結可直接訪問：

基於 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，後續如果有好的解決辦法，再更新吧。

掃描二維碼關注微信公眾號，瞭解更多