基于 Hexo 鍵入評論功能，重點推薦 Twikoo

原文連結：基于 Hexo 鍵入評論功能

注意：本站的評論系統已從 Valine 更換成 Twikoo。

前言

本站基于 Hexo
搭建，用的 🦋 hexo-theme-butterfly 主題 v3.7.1，請注意最新的🦋 hexo-theme-butterfly 版本已經更新到 v4.3.0 。

如果你是 v3.7.1 之外的版本，可能有些地方會有出入，請留意。

注意：我的部落格根目錄路徑為【G:/hexo-blog/blog-demo】，下文所說的根目錄都是此路徑，将用
[BlogRoot] 代替。如果不清楚根目錄路徑，請回到教程基于 Hexo 從零開始搭建個人部落格（二），檢視你執行 hexo init xxx
這條指令時所選擇的路徑，例如我選擇的路徑是【G:/hexo-blog】，我的部落格根目錄即為【G:/hexo-blog/xxx】。

修改站點配置檔案
_config.yml
，路徑為【BlogRoot/_config.yml】。

修改主題配置檔案
_config.butterfly.yml
，路徑為【BlogRoot/_config.butterfly.yml】。

若你的主題版本大于 v4.0.0，應該留意到，與 v3.7.1 版本相比，各評論的配置項已經變的更為精簡，具體請參考你所使用主題版本的配置項，隻需要将目标資訊，填入評論的配置項就行，這裡主要推薦使用 Twikoo。

通用配置

從3.0.0開始，開啟評論需要在

comments-use

中填寫你需要的評論，這裡參照你主題版本的格式寫。

支援雙評論顯示，隻需要配置兩個評論（第一個為預設顯示）

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
    # - Disqus
    # - Valine
    - Twikoo # 這裡按照你主題版本的格式寫
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

參數	解釋
use	使用的評論（請注意，最多支援兩個，如果不需要請留白）注意：雙評論不能是 Disqus 和 Disqusjs 一起，由于其共用同一個 ID，會出錯
text	是否顯示評論服務商的名字
lazyload	是否為評論開啟lazyload，開啟後，隻有滾動到評論位置時才會加載評論所需要的資源（開啟 lazyload 後，評論數将不顯示）
count	是否在文章頂部顯示評論數 livere、Giscus 和 utterances 不支援評論數顯示
card_post_count	是否在首頁文章卡片顯示評論數 gitalk、livere 、Giscus 和 utterances 不支援評論數顯示

Twikoo（推薦）

Twikoo 是一個簡潔、安全、免費的靜态網站評論系統，基于騰訊雲開發。

效果預覽

特色

簡單

免費搭建（使用雲開發作為評論背景，每個使用者均長期享受1個免費的标準型基礎版1資源套餐）
簡單部署（支援一鍵部署、手動部署、指令行部署）

易用

支援回複、點贊
無需額外适配，支援搭配淺色主題與深色主題使用
支援 API 調用，批量擷取文章評論數、最新評論
訪客在昵稱欄輸入 QQ 号，會自動補全 QQ 昵稱和 QQ 郵箱
訪客填寫數字 QQ 郵箱，會使用 QQ 頭像作為評論頭像
支援評論框粘貼圖檔（可禁用）
支援插入圖檔（可禁用）
支援去不圖床、雲開發圖床
支援插入表情（可禁用）
支援 Ctrl + Enter 快捷回複
評論框内容實時儲存草稿，重新整理不會丢失
支援 Katex 公式
支援按語言的代碼高亮

安全

隐私資訊安全（通過雲函數控制敏感字段（郵箱、IP、環境配置等）不會洩露）
支援 Akismet 垃圾評論檢測（需自行注冊akismet.com）
支援騰訊雲内容安全垃圾評論檢測（需自行注冊騰訊雲内容安全）
支援人工稽核模式
防 XSS 注入
支援限制每個 IP 每 10 分鐘最多發表多少條評論

即時

支援郵件提醒（訪客和部落客）
支援微信提醒（僅針對部落客，基于Server醬，需自行注冊）
支援 QQ 提醒（僅針對部落客，基于Qmsg醬，需自行注冊）
支援 QQ 提醒（針對部落客QQ或者群，基于go-cqhttp，需自己有伺服器）

個性

支援自定義評論框背景圖檔
支援自定義“部落客”辨別文字
支援自定義通知郵件模闆
支援自定義評論框提示資訊（placeholder）
支援自定義表情清單（相容OwO 的資料格式）
支援自定義【昵稱】【郵箱】【網址】必填 / 選填
支援自定義代碼高亮主題

便捷管理

内嵌式管理面闆，通過密碼登入，可友善地檢視評論、隐藏評論、删除評論、修改配置
支援隐藏管理入口，通過輸入暗号顯示
支援從 Valine、Artalk、Disqus 導入評論

缺點

國外請求較慢
部署需要實名認證
不支援 IE

本站是用 Vercel + MongoDB 方案搭建 Twikoo 評論系統。

其他幾種部署方式這裡不做講解，詳情請參考：Twikoo 文檔。

Vercel 部署

頻教程

Twikoo Vercel 部署教程

步驟

申請MongoDB 賬号

填好圖上所需内容，點選【Create your Atlas account】。

2. 建立免費 MongoDB 資料庫，區域推薦選擇【AWS / N. Virginia (us-east-1)】

3. 建立資料庫使用者，按步驟設定允許所有 IP 位址的連接配接（為什麼？），填完資訊後，點選【Finish and Close】

4. 在 Clusters 頁面點選【Connect】，選擇【Connect your appliction】，記錄資料庫連接配接字元串，請将連接配接字元串中的

<password>

修改為第三步中資料庫密碼，留着備用（将在第7步中用到）。

5. 申請 Vercel 賬号，可以選擇 Github 賬号來同步

6. 點選此連結将 Twikoo 一鍵部署到 Vercel

點選 Create，等待 Deploy完成，可看到如下效果：

7. 進入【Settings】->【Environment Variables】，添加環境變量【MONGODB_URI】，值為第 3 步的資料庫連接配接字元串

8. 進入【Deployments】，然後在任意一項後面點選更多（三個點），然後點選【Redeploy】，最後點選下面的【Redeploy】

9. 進入【Overview】，點選【Domains】下方的連結，如果環境配置正确，可以看到 “Twikoo 雲函數運作正常” 的提示

Vercel Domains（包含 https:// 字首，例如 https://xxx.vercel.app）即為您的環境 id

10. 在主題中寫入 Twikoo 配置項。

在主題配置檔案

_config.butterfly.yml

中修改以下内容，将你換環境id填入對應位置

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://xxxxxx.vercel.app/ 
  region: 
  visitor: true
  option:

參數	解釋
envId	環境id
region	環境地域，預設為 ap-shanghai，如果您的環境地域不是上海，需傳此參數
visitor	是否顯示文章閲讀數
option	可選配置

開啟 visitor 後，文章頁的通路人數将改為 Twikoo 提供，而不是不蒜子。

重新編譯運作，即可看到效果，點選評論區輸入框下方的齒輪狀按鈕，設定你的管理密碼，具體配置資訊這裡不做講解，按照注解進行配置即可。

Disqus

前往Disqus官網新增賬號

登入後點選首頁的【GET STARTED】，選擇【I want to install Disqus on my site】

輸入下圖中所需資訊：Websit Name，Category，Language，點選【Create Site】

參數	解釋
Websit Name	short name，且是唯一，像我是設定的 tzy1997-blog，short name 在配置評論時需要用到
Category	類别，自行選擇
Language	語言，自行選擇

【Select Plan】選擇 Basic

接下來在【Configure Disqus】輸入一些配置資訊

在【Setup Mederration】選擇一個模式就好，最後點選【Complete Setup】

在主題配置檔案 _config.butterfly.yml 中修改以下内容，将你在第3步輸入的【Websit Name】填入到 shortname

# disqus
# https://disqus.com/
disqus:
  shortname: tzy1997-blog

重新編譯運作，即可看到如下效果：

Disqusjs

與Disqus一樣，但由于Disqus在中國大陸無法通路，使用Disqusjs可以在無法通路Disqus時顯示評論。具體可參考Disqusjs。

配置 Disqus Application，在Disqus API Application 處注冊一個 Application。

點選進入新建立的 Application，擷取你的 API Key（公鑰）。

在 Application 的 Settings 頁面設定你使用 DisqusJS 時的域名。Disqus API 會檢查 API 請求的 Referrer 和 Origin。

在主題配置檔案 _config.butterfly.yml 中配置以下内容：

# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論清單，相容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
  shortname: 
  siteName: 
  apikey: 
  api: https://disqus.skk.moe/disqus/
  nocomment: # display when a blog post or an article has no comment attached
  admin:
  adminLabel:

各參數解釋如下：

參數	解釋
shortname	你的 Disqus Forum 的 shortname，你可以在 Disqus Admin - Settings - General - Shortname 擷取你的 shortname 必須，無預設值
siteName	你站點的名稱，将會顯示在「評論基礎模式」的 header 中；該配置應該和 Disqus Admin - Settings - General - Website Name 一緻非必須，無預設值
apikey	DisqusJS 向 API 發起請求時使用的 API Key，你應該在配置 Disqus Application 時擷取了 API Key。 DisqusJS 支援填入一個包含多個 API Key 的數組，每次請求時會随機使用其中一個；如果你隻填入一個 API Key，可以填入 string 或 Array。必填，無預設值
api	DisqusJS 請求的 API Endpoint，通常情況下你應該配置一個 Disqus API 的反代并填入反代的位址。你也可以直接使用 DISQUS 官方 API 的 Endpoint `https://disqus.com/api/` ，或是使用我搭建的 Disqus API 反代 Endpoint `https://disqus.skk.moe/disqus/` 。如有必要可以閱讀關于搭建反代的相關内容建議，預設值為 https://disqus.skk.moe/disqus/
nocomment	沒有評論時的提示語（對應 Disqus Admin - Settings - Community - Comment Count Link - Zero comments）非必須，預設值為這裡冷冷清清的，一條評論都沒有
admin	你的站點的 Disqus Moderator 的使用者名（也就是你的使用者名）。你可以在 Disqus - Settings - Account - Username 擷取你的 Username 非必須，無預設值
adminLabel	你想顯示在 Disqus Moderator Badge 中的文字。該配置應和 Disqus Admin - Settings - Community - Moderator Badge Text 相同非必須，無預設值

重新編譯運作，即可看到如下效果：

Livere

前往來必力官網新增賬號。
進入管理頁面。

選擇預設的免費 City 版，點選【現在安裝】

輸入基本的資訊，點選【申請擷取代碼】

擷取【data-uid】

在主題配置檔案 _config.butterfly.yml 中配置以下内容：

# livere (來必力)
# https://www.livere.com/
livere:
  uid: 這裡填你的uid

重新編譯運作，即可看到如下效果：

可以在管理界面檢視資料分析，進行評論管理，評論提醒等。

Gitalk

Gitalk 是一個基于 GitHub Issue 和 Preact 開發的評論插件。特性如下：

使用 GitHub 登入
支援多語言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
支援個人或組織
無幹擾模式（設定 distractionFreeMode 為 true 開啟）
快捷鍵送出評論（cmd|ctrl + enter）

首先，您需要選擇一個公共github存儲庫（已存在或建立一個新的github存儲庫）用于存儲評論。

然後需要點選右上角頭像【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】建立【GitHub Application】進行基本配置，找不到地方直接點選這裡申請。

【Homepage URL】填寫部落格的倉庫位址，例如我的填寫

https://tzy13755126023.github.io

。

【Authorization callback URL】填寫目前使用的域名，例如我的填寫

https://tzy1997.com

，沒有域名，跟【Homepage URL】保持一緻即可。

然後可看到目标client_id，繼續點選【Generate a new client secret】即可得到目标【client_secret】。

大緻的基本資訊如下圖：

最後在主題配置檔案

_config.butterfly.yml

中配置以下内容：

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: 'GitHub Application Client ID'
  client_secret: 'GitHub Application Client Secret'
  repo: 'GitHub repo'
  owner: 'GitHub repo owner'
  admin: 'GitHub repo owner and collaborators, only these guys can initialize github issues'
  language: en # en, zh-CN, zh-TW, es-ES, fr, ru
  perPage: 10 # Pagination size, with maximum 100.
  distractionFreeMode: false # Facebook-like distraction free mode.
  pagerDirection: last # Comment sorting direction, available values are last and first.
  createIssueManually: true # Gitalk will create a corresponding github issue for your every single page automatically
  option:

效果如下：

詳情可參考 Gitalk Readme。

Valine

Valine 誕生于2017年8月7日，是一款基于LeanCloud的快速、簡潔且高效的無後端評論系統。

由于 Valine 的國際版共享域名将于 2022 年 8 月 1 日起不再向中國大陸的最終使用者提供服務，國際版共享域名僅服務于海外使用者。本站已棄用 Valine ，改為 Twikoo。如果你更喜歡 Valine 的風格，你可以使用它的國區版。

參考教程

Valine 文檔Hexo 優化 — Valine 擴充之郵件通知

Valine 添加驗證碼、部落客标簽及評論微信、QQ 通知

效果如下：

詳情可參考基于 Hexo 從零開始搭建個人部落格（六），其中有提到過 Valine。

Waline

Waline 是一款從 Valine 衍生的帶後端評論系統。可以将 Waline 等價成 With backend Valine。

具體配置可參考 waline 文檔，這裡也不做詳細講解。

在主題配置檔案

_config.butterfly.yml

中配置以下内容：

# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
  serverURL: # Waline server address url
  avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image
  emojiCDN: # emoji CDN
  bg: # waline background
  visitor: false
  option:

開啟 pageview 後，文章頁的通路人數将改為 Waline 提供，而不是不蒜子。

Utterances

與 Gitalk 一樣，基于 GitHub issues 的評論工具。相對于 Gitalk，其相對需要權限較少。

詳細配置可參考 Utterances。

在主題配置檔案

_config.butterfly.yml

中配置以下内容：

# utterances
# https://utteranc.es/
utterances:
  repo:
  # Issue Mapping: pathname/url/title/og:title
  issue_term: pathname
  # Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark

效果如下：

Giscus

一個基于 GitHub Discussions 的評論，詳細配置請參考 Giscus 文檔。

在主題配置檔案

_config.butterfly.yml

中配置以下内容：

# Giscus
# https://giscus.app/
giscus:
  repo:
  repo_id:
  category_id:
  theme:
    light: light
    dark: dark
  option:

效果如下：

基于 Hexo 鍵入評論功能，重點推薦 Twikoo

前言

推薦閱讀

通用配置

Twikoo（推薦）

效果預覽

特色

簡單

易用

安全

即時

個性

便捷管理

缺點

Vercel 部署

頻教程

步驟

Disqus

Disqusjs

Livere

Gitalk

Valine

參考教程

Waline

Utterances

Giscus

繼續閱讀