爲 Hexo 的 Next 主題添加 Gitalk 評論

Gitalk 是一個基於 Github Issue 的評論插件，使用 Github 帳號登錄，界面乾淨整潔，最喜歡的一點是支持 MarkDown 語法，在個人博客裏添加了之後就可以很簡便的進行評論和回覆了。

---

主要特性：

• 使用 Github 登錄
• 支持多語言 [en, zh-CN, zh-TW, es-ES, fr]
• 支持個人或組織
• 無干擾模式（設置 distractionFreeMode 爲 true 開啓）
• 快捷鍵提交評論 （cmd | ctrl + enter）
• 支持 MarkDown 語法

界面效果：

安裝

我這邊使用的 Next 主題，版本是 5.1.3。

1. 創建 Github 倉庫

需要在自己的 Github 賬號下創建一個倉庫來存放評論，創建的倉庫只要 public 就行，其餘沒要求。

2. 創建 Github Application

需要創建一個 Github Application 用來授權登錄，如果沒有 點擊這裏申請，Authorization callback URL 填寫你主頁地址，比如我的就是 https://jonzzs.cn，其他都隨意填。

3. 爲 Next 主題添加 Gitalk 支持

• 首先創建 Gitalk 的 swig 文件，放在 themes/next/layout/_third-party/comments 文件夾下，命名爲 gitalk.swig ，內容如下。

  {% 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 %}
  

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

  {% include 'gitalk.swig' %}
  

• 在 themes/next/layout/_partials/comments.swig 文件末找到最後的 {% endif %} 語句，替換爲如下代碼。

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

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

  gitalk:
    enable: true # 是否啓用
    owner: Jonzzs # 用戶名
    repo: BlogComment # 存放評論的倉庫名
    clientID: 96fe4c8974d2415f9fc0 # Github Application 的 clientID
    clientSecret: ece2551d6a09bfe9f9421ac6e85f1472daf6122c # Github Application 的 clientSecret
    admin: Jonzzs # 用戶名
    distractionFreeMode: false # 評論時遮照效果的開關
  

• 最後執行 hexo clean && hexo g && hexo d 重新發布博客即可。

---

我的傳送門： 博客 、簡書 、微博 、GitHub 。