基于 Hexo + GitHub Pages 搭建個人部落格（三）

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

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

掃描二維碼關注微信公衆号，了解更多

---------------------------------------------