原文鏈接：基于 Hexo 鍵入評論功能
前言
本站基于
Hexo搭建沾瓦，用的 ?? hexo-theme-butterfly 主題 v3.7.1母赵，請注意最新的?? hexo-theme-butterfly 版本已經(jīng)更新到 v4.3.0 牢屋。
如果你是 v3.7.1 之外的版本叽唱，可能有些地方會有出入僻孝，請留意够滑。
注意：我的博客根目錄路徑為 【G:/hexo-blog/blog-demo】个粱，下文所說的根目錄都是此路徑贾费，將用
[BlogRoot]代替钦购。如果不清楚根目錄路徑，請回到教程 基于 Hexo 從零開始搭建個人博客（二）铸本，查看你執(zhí)行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壳坪，應(yīng)該留意到，與 v3.7.1 版本相比掰烟，各評論的配置項已經(jīng)變的更為精簡爽蝴，具體請參考你所使用主題版本的配置項，只需要將目標(biāo)信息纫骑，填入評論的配置項就行蝎亚，這里主要推薦使用 Twikoo。
推薦閱讀
- 基于 Hexo 從零開始搭建個人博客（一）
- 基于 Hexo 從零開始搭建個人博客（二）
- 基于 Hexo 從零開始搭建個人博客（三）
- 基于 Hexo 從零開始搭建個人博客（四）
- 基于 Hexo 從零開始搭建個人博客（五）
- 基于 Hexo 從零開始搭建個人博客（六）
- 基于 Hexo 鍵入搜索功能
- 基于 Hexo 鍵入分享功能
- 基于 Hexo 鍵入在線聊天功能
- Hexo + Butterfly 自定義右鍵菜單
通用配置
從3.0.0開始先馆，開啟評論需要在comments-use中填寫你需要的評論发框，這里參照你主題版本的格式寫。
支持雙評論顯示煤墙，只需要配置兩個評論（第一個為默認(rèn)顯示）
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
| 參數(shù) | 解釋 |
|---|---|
| use | 使用的評論（請注意梅惯，最多支持兩個，如果不需要請留空） 注意：雙評論不能是 Disqus 和 Disqusjs 一起仿野，由于其共用同一個 ID铣减，會出錯 |
| text | 是否顯示評論服務(wù)商的名字 |
| lazyload | 是否為評論開啟lazyload，開啟后脚作，只有滾動到評論位置時才會加載評論所需要的資源（開啟 lazyload 后葫哗，評論數(shù)將不顯示） |
| count | 是否在文章頂部顯示評論數(shù) livere、Giscus 和 utterances 不支持評論數(shù)顯示 |
| card_post_count | 是否在首頁文章卡片顯示評論數(shù) gitalk鳖枕、livere 魄梯、Giscus 和 utterances 不支持評論數(shù)顯示 |
Twikoo（推薦）
Twikoo 是一個簡潔、安全宾符、免費的靜態(tài)網(wǎng)站評論系統(tǒng)酿秸，基于騰訊云開發(fā)。
效果預(yù)覽
特色
簡單
- 免費搭建（使用云開發(fā)作為評論后臺魏烫，每個用戶均長期享受1個免費的標(biāo)準(zhǔn)型基礎(chǔ)版1資源套餐）
- 簡單部署（支持一鍵部署辣苏、手動部署、命令行部署）
易用
- 支持回復(fù)哄褒、點贊
- 無需額外適配稀蟋，支持搭配淺色主題與深色主題使用
- 支持 API 調(diào)用，批量獲取文章評論數(shù)呐赡、最新評論
- 訪客在昵稱欄輸入 QQ 號退客，會自動補全 QQ 昵稱和 QQ 郵箱
- 訪客填寫數(shù)字 QQ 郵箱，會使用 QQ 頭像作為評論頭像
- 支持評論框粘貼圖片（可禁用）
- 支持插入圖片（可禁用）
- 支持去不圖床、云開發(fā)圖床
- 支持插入表情（可禁用）
- 支持 Ctrl + Enter 快捷回復(fù)
- 評論框內(nèi)容實時保存草稿萌狂，刷新不會丟失
- 支持 Katex 公式
- 支持按語言的代碼高亮
安全
- 隱私信息安全（通過云函數(shù)控制敏感字段（郵箱档玻、IP、環(huán)境配置等）不會泄露）
- 支持 Akismet 垃圾評論檢測（需自行注冊 akismet.com）
- 支持騰訊云內(nèi)容安全垃圾評論檢測（需自行注冊 騰訊云內(nèi)容安全）
- 支持人工審核模式
- 防 XSS 注入
- 支持限制每個 IP 每 10 分鐘最多發(fā)表多少條評論
即時
- 支持郵件提醒（訪客和博主）
- 支持微信提醒（僅針對博主茫藏，基于 Server醬误趴，需自行注冊）
- 支持 QQ 提醒（僅針對博主，基于 Qmsg醬务傲，需自行注冊）
- 支持 QQ 提醒（針對博主QQ或者群凉当，基于 go-cqhttp，需自己有服務(wù)器）
個性
- 支持自定義評論框背景圖片
- 支持自定義“博主”標(biāo)識文字
- 支持自定義通知郵件模板
- 支持自定義評論框提示信息（placeholder）
- 支持自定義表情列表（兼容 OwO 的數(shù)據(jù)格式）
- 支持自定義【昵稱】【郵箱】【網(wǎng)址】必填 / 選填
- 支持自定義代碼高亮主題
便捷管理
- 內(nèi)嵌式管理面板售葡，通過密碼登錄看杭，可方便地查看評論、隱藏評論天通、刪除評論泊窘、修改配置
- 支持隱藏管理入口，通過輸入暗號顯示
- 支持從 Valine像寒、Artalk、Disqus 導(dǎo)入評論
缺點
- 國外請求較慢
- 部署需要實名認(rèn)證
- 不支持 IE
本站是用 Vercel + MongoDB 方案搭建 Twikoo 評論系統(tǒng)瓜贾。
其他幾種部署方式這里不做講解诺祸，詳情請參考：Twikoo 文檔 。
Vercel 部署
頻教程
Twikoo Vercel 部署教程_嗶哩嗶哩_bilibili
步驟
- 申請 MongoDB 賬號
image.png
image.png
填好圖上所需內(nèi)容祭芦，點擊【Create your Atlas account】筷笨。 -
創(chuàng)建免費 MongoDB 數(shù)據(jù)庫，區(qū)域推薦選擇 【AWS / N. Virginia (us-east-1)】
image.png
image.png
image.png - 創(chuàng)建數(shù)據(jù)庫用戶龟劲，按步驟設(shè)置允許所有 IP 地址的連接（為什么胃夏？），填完信息后昌跌，點擊【Finish and Close】
image.png
image.png - 在 Clusters 頁面點擊 【Connect】仰禀，選擇【Connect your appliction】，記錄數(shù)據(jù)庫連接字符串蚕愤，請將連接字符串中的
<password>修改為第三步中數(shù)據(jù)庫密碼答恶，留著備用（將在第7步中用到）。
image.png
image.png
image.png - 申請 Vercel 賬號萍诱，可以選擇 Github 賬號來同步
- 點擊 此鏈接 將 Twikoo 一鍵部署到 Vercel
image.png
點擊 Create悬嗓，等待 Deploy完成，可看到如下效果：
image.png -
進入【Settings】->【Environment Variables】裕坊，添加環(huán)境變量【MONGODB_URI】包竹，值為第 3 步的數(shù)據(jù)庫連接字符串
image.png -
進入【Deployments】，然后在任意一項后面點擊更多（三個點），然后點擊【Redeploy】周瞎，最后點擊下面的【Redeploy】
image.png
image.png - 進入【Overview】悟狱，點擊【Domains】下方的鏈接，如果環(huán)境配置正確堰氓，可以看到 “Twikoo 云函數(shù)運行正臣方ィ” 的提示
image.png
Vercel Domains（包含 https:// 前綴，例如 https://xxx.vercel.app）即為您的環(huán)境 id
image.png - 在主題中寫入 Twikoo 配置項双絮。
在主題配置文件_config.butterfly.yml中修改以下內(nèi)容浴麻，將你換環(huán)境id填入對應(yīng)位置
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
envId: https://xxxxxx.vercel.app/
region:
visitor: true
option:
| 參數(shù) | 解釋 |
|---|---|
| envId | 環(huán)境id |
| region | 環(huán)境地域，默認(rèn)為 ap-shanghai囤攀，如果您的環(huán)境地域不是上海软免，需傳此參數(shù) |
| visitor | 是否顯示文章閲讀數(shù) |
| option | 可選配置 |
開啟 visitor 后，文章頁的訪問人數(shù)將改為 Twikoo 提供焚挠，而不是 不蒜子膏萧。
- 重新編譯運行，即可看到效果蝌衔，點擊評論區(qū)輸入框下方的齒輪狀按鈕榛泛，設(shè)置你的管理密碼，具體配置信息這里不做講解噩斟，按照注解進行配置即可曹锨。
Disqus
- 前往 Disqus官網(wǎng) 注冊賬號
image.png -
登入后點擊首頁的【GET STARTED】，選擇【I want to install Disqus on my site】
image.png -
輸入下圖中所需信息：Websit Name剃允，Category沛简，Language，點擊【Create Site】
image.png
| 參數(shù) | 解釋 |
|---|---|
| Websit Name | short name斥废，且是唯一椒楣，像我是設(shè)置的 tzy1997-blog，short name 在配置評論時需要用到 |
| Category | 類別牡肉，自行選擇 |
| Language | 語言捧灰，自行選擇 |
-
【Select Plan】選擇 Basic
image.png -
接下來在【Configure Disqus】輸入一些配置信息
image.png -
在【Setup Mederration】選擇一個模式就好，最后點擊【Complete Setup】
image.png - 在主題配置文件
_config.butterfly.yml中修改以下內(nèi)容荚板，將你在第3步輸入的【W(wǎng)ebsit Name】填入到 shortname
# disqus
# https://disqus.com/
disqus:
shortname: tzy1997-blog
-
重新編譯運行凤壁，即可看到如下效果：
image.png
Disqusjs
與Disqus一樣，但由于Disqus在中國大陸無法訪問跪另， 使用Disqusjs可以在無法訪問Disqus時顯示評論拧抖。具體可參考Disqusjs。
- 配置 Disqus Application免绿，在 Disqus API Application 處注冊一個 Application唧席。
image.png
image.png -
點擊進入新創(chuàng)建的 Application，獲取你的 API Key（公鑰）。
image.png -
在 Application 的 Settings 頁面設(shè)置你使用 DisqusJS 時的域名淌哟。Disqus API 會檢查 API 請求的 Referrer 和 Origin迹卢。
image.png - 在主題配置文件
_config.butterfly.yml中配置以下內(nèi)容：
# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統(tǒng)，可以實現(xiàn)在網(wǎng)路審查地區(qū)載入 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:
各參數(shù)解釋如下：
| 參數(shù) | 解釋 |
|---|---|
| shortname | 你的 Disqus Forum 的 shortname腐碱，你可以在 Disqus Admin - Settings - General - Shortname 獲取你的 shortname 必須，無默認(rèn)值 |
| siteName | 你站點的名稱掉弛，將會顯示在「評論基礎(chǔ)模式」的 header 中症见；該配置應(yīng)該和 Disqus Admin - Settings - General - Website Name 一致 非必須，無默認(rèn)值 |
| apikey | DisqusJS 向 API 發(fā)起請求時使用的 API Key殃饿，你應(yīng)該在配置 Disqus Application 時獲取了 API Key谋作。 DisqusJS 支持填入一個 包含多個 API Key 的數(shù)組，每次請求時會隨機使用其中一個乎芳；如果你只填入一個 API Key遵蚜，可以填入 string 或 Array。 必填奈惑，無默認(rèn)值 |
| api | DisqusJS 請求的 API Endpoint吭净，通常情況下你應(yīng)該配置一個 Disqus API 的反代并填入反代的地址。你也可以直接使用 DISQUS 官方 API 的 Endpoint https://disqus.com/api/携取，或是使用我搭建的 Disqus API 反代 Endpoint https://disqus.skk.moe/disqus/攒钳。如有必要可以閱讀關(guān)于搭建反代的 相關(guān)內(nèi)容建議，默認(rèn)值為 https://disqus.skk.moe/disqus/ |
| nocomment | 沒有評論時的提示語（對應(yīng) Disqus Admin - Settings - Community - Comment Count Link - Zero comments） 非必須雷滋，默認(rèn)值為 這里冷冷清清的，一條評論都沒有 |
| admin | 你的站點的 Disqus Moderator 的用戶名（也就是你的用戶名）文兢。你可以在 Disqus - Settings - Account - Username 獲取你的 Username 非必須晤斩，無默認(rèn)值 |
| adminLabel | 你想顯示在 Disqus Moderator Badge 中的文字。該配置應(yīng)和 Disqus Admin - Settings - Community - Moderator Badge Text 相同 非必須姆坚，無默認(rèn)值 |
-
重新編譯運行澳泵，即可看到如下效果：
image.png
Livere
- 前往 來必力官網(wǎng) 注冊賬號。
-
進入管理頁面兼呵。
image.png -
選擇默認(rèn)的免費 City 版兔辅，點擊【現(xiàn)在安裝】
image.png -
輸入基本的信息，點擊【申請獲取代碼】
image.png -
獲取【data-uid】
image.png - 在主題配置文件
_config.butterfly.yml中配置以下內(nèi)容：
# livere (來必力)
# https://www.livere.com/
livere:
uid: 這里填你的uid
-
重新編譯運行击喂，即可看到如下效果：
image.png -
可以在管理界面查看 數(shù)據(jù)分析维苔，進行評論管理，評論提醒等懂昂。
image.png
Gitalk
Gitalk 是一個基于 GitHub Issue 和 Preact 開發(fā)的評論插件介时。特性如下：
- 使用 GitHub 登錄
- 支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
- 支持個人或組織
- 無干擾模式（設(shè)置 distractionFreeMode 為 true 開啟）
- 快捷鍵提交評論 （cmd|ctrl + enter）
首先，您需要選擇一個公共github存儲庫（已存在或創(chuàng)建一個新的github存儲庫）用于存儲評論。
然后需要點擊右上角頭像【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】 創(chuàng)建【GitHub Application】進行基本配置 沸柔，找不到地方直接 點擊這里申請循衰。
【Homepage URL】填寫博客的倉庫地址，例如我的填寫https://tzy13755126023.github.io褐澎。
【Authorization callback URL】填寫當(dāng)前使用的域名会钝，例如我的填寫https://fe32.top/，沒有域名工三，跟【Homepage URL】保持一致即可迁酸。
然后可看到目標(biāo)client_id， 繼續(xù)點擊【Generate a new client secret】即可得到目標(biāo)【client_secret】徒蟆。
大致的基本信息如下圖：
最后在主題配置文件_config.butterfly.yml中配置以下內(nèi)容：
# 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的快速段审、簡潔且高效的無后端評論系統(tǒng)全蝶。
由于 Valine 的國際版共享域名將于 2022 年 8 月 1 日起不再向中國大陸的最終用戶提供服務(wù)，國際版共享域名僅服務(wù)于海外用戶寺枉。本站已棄用 Valine 抑淫，改為 Twikoo。如果你更喜歡 Valine 的風(fēng)格姥闪，你可以使用它的國區(qū)版始苇。
參考教程
Valine 文檔
Hexo 優(yōu)化 — Valine 擴展之郵件通知
Valine 添加驗證碼、博主標(biāo)簽及評論微信筐喳、QQ 通知
效果如下：
詳情可參考 基于 Hexo 從零開始搭建個人博客（六）催式，其中有提到過 Valine。
Waline
Waline 是一款從 Valine 衍生的帶后端評論系統(tǒng)避归∪僭拢可以將 Waline 等價成 With backend Valine。
具體配置可參考 waline 文檔梳毙，這里也不做詳細講解哺窄。
在主題配置文件_config.butterfly.yml中配置以下內(nèi)容：
# 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 后，文章頁的訪問人數(shù)將改為 Waline 提供账锹，而不是 不蒜子萌业。
Utterances
與 Gitalk 一樣，基于 GitHub issues 的評論工具奸柬。相對于 Gitalk生年，其相對需要權(quán)限較少。
詳細配置可參考 Utterances鸟缕。
在主題配置文件_config.butterfly.yml中配置以下內(nèi)容：
# 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中配置以下內(nèi)容：
# Giscus
# https://giscus.app/
giscus:
repo:
repo_id:
category_id:
theme:
light: light
dark: dark
option:
效果如下：
