基於 Hexo 鍵入評論功能详情 - 前端,hexo,博客搭建唐志遠日志

原文鏈接：基於 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 是一個簡潔、安全、免費的靜態網站評論系統，基於騰訊雲開發。

效果預覽

在這裏插入圖片描述
效果02.jpg

效果-m-02.jpg

特色

簡單

免費搭建（使用雲開發作為評論後台，每個用户均長期享受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 部署教程_嗶哩嗶哩_bilibili

步驟

申請 MongoDB 賬號

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

創建免費 MongoDB 數據庫，區域推薦選擇【AWS / N. Virginia (us-east-1)】
創建數據庫用户，按步驟設置允許所有 IP 地址的連接（為什麼？），填完信息後，點擊【Finish and Close】
在 Clusters 頁面點擊【Connect】，選擇【Connect your appliction】，記錄數據庫連接字符串，請將連接字符串中的<password>修改為第三步中數據庫密碼，留着備用（將在第7步中用到）。
申請 Vercel 賬號，可以選擇 Github 賬號來同步
點擊此鏈接將 Twikoo 一鍵部署到 Vercel

點擊 Create，等待 Deploy完成，可看到如下效果：
進入【Settings】->【Environment Variables】，添加環境變量【MONGODB_URI】，值為第 3 步的數據庫連接字符串
進入【Deployments】，然後在任意一項後面點擊更多（三個點），然後點擊【Redeploy】，最後點擊下面的【Redeploy】
進入【Overview】，點擊【Domains】下方的鏈接，如果環境配置正確，可以看到 “Twikoo 雲函數運行正常” 的提示

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

在主題中寫入 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:

效果如下：

在這裏插入圖片描述

唐志遠日志

@tangzhiyuan

标签

前端 (1157)

Javascript (735)

Css (108)

hexo (22)

flex (17)

博客搭建 (14)

博客 (6)

個人網站 (1)

动态

基於 Hexo 鍵入評論功能 - 动态详情

前言

推薦閲讀

通用配置

Twikoo（推薦）

效果預覽

特色

簡單

易用

安全

即時

個性

便捷管理

缺點

Vercel 部署

頻教程

步驟

Disqus

Disqusjs

Livere

Gitalk

Valine

參考教程

Waline

Utterances

Giscus

Add a new 评论

唐志遠 日志

@tangzhiyuan

标签

前端 (1157)

Javascript (735)

Css (108)

hexo (22)

flex (17)

博客搭建 (14)

博客 (6)

個人網站 (1)

动态

基於 Hexo 鍵入評論功能 - 动态 详情

前言

推薦閲讀

通用配置

Twikoo（推薦）

效果預覽

特色

簡單

易用

安全

即時

個性

便捷管理

缺點

Vercel 部署

頻教程

步驟

Disqus

Disqusjs

Livere

Gitalk

Valine

參考教程

Waline

Utterances

Giscus

Add a new 评论

唐志遠日志

基於 Hexo 鍵入評論功能 - 动态详情