文章目錄

• 評論系統 Valine 的使用
• • 1 Valine 的介紹
  • 2 Valine 的使用
  • 3 Valine 的配置
  • 4 Valine 的優化
  • • 4.1 去除 Valine的 Powered By
    • 4.2 郵件通知功能
    • • 4.2.1 原郵箱模板通知功能
      • 4.2.2 Valine-Admin 通知功能
    • 4.3 實現評論顯示 QQ 郵箱頭像
    • • 4.3.1 下載 Valine.min.js
      • 4.3.2 增加 QQ 頭像判別
    • 4.4 設置郵箱審核規則
    • 4.5 點擊回復直接評論
    • 4.6 實現評論自定義背景

---

評論系統 Valine 的使用

注明：以下方案是在 Valine 1.4.9 版本下完成，對于其他版本應該會根據實際情況修改參數，使用 F12 查看參數修改即可使用！（說明于 2020 - 04 - 25）

強烈推薦大佬們直接去看 cungudafa 對于 Valine 評論系統的優化，實在是棒，本人博客：EnjoyToShare 的評論系統也是根據這位大佬的文章闡述修改而來，在此對她表示感謝！

1 Valine 的介紹

一款快速、簡潔且高效的無后端評論系統。

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

理論上支持但不限于靜態博客，目前已有 Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用 Valine。

Valine 特性

• 快速
• 安全
• Emoji 😉
• 無后端實現
• MarkDown 全語法支持
• 輕量易用(~15kb gzipped)
• 文章閱讀量統計 v1.2.0+

2 Valine 的使用

1 注冊 LeanCloud

2 創建 Valine 應用，名稱任意，例如 Valine-Admin

3 進入對應的應用，點擊 設置 -> 應用 Keys，獲取 AppID 和 AppKey

4 在 Hexo 博客主題配置文件 next/_config.yml 中進行配置，大家也可根據自己來設置該評論設置。

valine:enable: true # 設置為true，默認為falseappid: # 將應用key的App ID設置在這里appkey: # 將應用key的App Key設置在這里notify: false# 郵箱通知 , https://github.com/xCss/Valine/wiki，默認為falseverify: false# 驗證碼 默認為falseplaceholder: Just go go ^_^ # 初始化評論顯示，根據自己修改，這里默認，avatar: monsterid # 頭像風格，默認為mm，可進入網址：https://valine.js.org/visitor.html查看頭像設置，這里有許多頭像風格，進行設置guest_info: nick,mail,link # 自定義評論標題pageSize: 10 # 分頁大小，10頁就自動分頁visitor: true # 是否允許游客評論 ，進入官網查看設置：https://valine.js.org/visitor.html

了解更多 Valine 配置參數信息請參考：Valine 官方文檔

3 Valine 的配置

1 查看評論

點擊 存儲 -> 結構化數據，選擇 創建 Class，名稱 Comment，其他保持默認，以后就可在此 Class 內查看

注：選擇 Valine 評論系統是因為支持國內網絡，不需要連接外網（翻墻）就可以進行顯示評論系統，而且很好管理，頁面簡單

2 文章閱讀量統計

點擊 存儲 -> 結構化數據，選擇創建 Class，名稱 Counter，其他保持默認，以后就可在此 Class 內查看

4 Valine 的優化

4.1 去除 Valine的 Powered By

我喜歡簡潔一點，所以想去掉這個提示。查看 Elements 可以看到這個 div，那么我只要移除這個 div 下的所有子節點，就可以去掉這個 Powered By 了。

但是怎么改呢？

使用 F12，按 ctrl + shift + c，鼠標放到 Powered By 的地方，點擊一下，看到如下圖：

這個 div 里的就是要修改的，打開 themes/next/source/css/_custom/custom.styl 文件，添加以下內容：

// 隱藏 valine 的 powered by .vcopy.txt-right {display: none; }

效果：

4.2 郵件通知功能

4.2.1 原郵箱模板通知功能

登錄 leadcloud 后臺，在應用的設置->郵件模板->郵件主題（修改主題名稱和內容，保存）

修改郵件主題：你在{{appname}}的評論收到了新的評論

內容如下：（鏈接為你的博客主頁鏈接）

<p>Hi, {{username}}</p> <p>你在 {{appname}} 的評論收到了新的回復，請點擊查看：</p> <p> <a href="https://cungudafa.gitee.io" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">馬上查看</a></p>

點擊 “保存” 按鈕

并且修改主題配置文件：改成 true

郵件回復功能

登錄 leadcloud 后臺，在應用的設置->郵件模板->郵件主題（修改主題名稱和內容，保存）

修改郵件主題：你在{{appname}}的評論收到了新的評論

內容如下：（鏈接為你的博客主頁鏈接）

<p>Hi, {{username}}</p> <p>你在 {{appname}} 的評論收到了新的回復，請點擊查看：</p> <p> <a href="https://cungudafa.gitee.io" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">馬上查看</a></p>

點擊 “保存” 按鈕

并且修改主題配置文件：改成 true

不是很 nice！下面給出一個加強 plus 版

4.2.2 Valine-Admin 通知功能

這里會使用到 Valine Admin，Valine Admin 項目是一個對 Valine 評論系統的拓展應用，可增強 Valine 的郵件通知功能?；?Leancloud 的云引擎與云函數，主要實現評論郵件通知、評論管理、自定義郵件通知模板等功能，而且還可以提供郵件 通知站長 和 @ 通知 的功能。

（1）設置云引擎

• 需要確保 Valine 的基礎功能是正常的，參考 Valine 官方文檔

• 進入 Leancloud 對應的 Valine 應用中。

• 點擊 云引擎 -> 設置 填寫代碼庫：https://github.com/wugenqiang/Valine-Admin，保存

• 設置自定義環境變量，需要設置云引擎的環境變量以提供必要的信息，變量參數參考下面的配置項

配置項

變量示例說明

SITE_NAME	HONGWEI’S Blog	[必填] 網站名稱
SITE_URL	https://wugenqiang.github.io	[必填] 網站地址，最后不要加 /
SMTP_SERVICE	QQ	[必填] 郵件服務提供商，支持 QQ、163、126、Gmail 以及 更多。 — 如這里沒有你使用的郵件提供商，請查看自定義郵件服務器
SMTP_USER	xxxx@qq.com	[必填] SMTP登錄用戶，一般為郵箱地址
SMTP_PASS	xxxx	[必填] SMTP登錄密碼，一般為授權碼，而不是郵箱的登陸密碼，請自行查詢對應郵件服務商的獲取方式
SENDER_NAME	HONGWEI’S Blog Valine 評論提醒	[可選] 發件人
ADMIN_URL	https://xxx.leanapp.cn/	[建議] Web主機二級域名，用于自動喚醒
TO_EMAIL	xxxxx@gmail.com	[可選] 指定站長收信郵箱，默認值為SITE_USER。用于 SMTP 發件人與站長收件人不一致的情況下使用。
TEMPLATE_NAME	rainbow	[可選] 通知郵件的模板（default和rainbow），參考高級功能

• 點擊 云引擎 -> 部署，選擇 Git 源碼部署，分支或版本號輸入 master，下載最新依賴（可選），部署

（2）評論后臺管理

• 點擊 云引擎 -> 設置，在Web主機域名位置點擊申請，獲取二級域名，現在的二級域名不支持自定義，如果想好記請參考高級功能

• 設置后臺管理登錄信息，點擊 存儲 -> 結構化數據，選擇 _ User -> 添加行，只需要填寫 password、username、email 這三個字段即可, 使用 email 作為賬號登陸、password 作為賬號密碼、username 任意即可。（為了安全考慮，此 email 必須為配置中的 SMTP_USER 或 TO_EMAIL， 否則不允許登錄）_

輸入 https://kilqxscmpyri.leanapp.cn/ 登陸測試：輸入你自己的二級域名

此后，可以通過 https://二級域名.leanapp.cn/ 管理評論

（3）定時任務接收

防止云引擎休眠

免費版的 LeanCloud 容器，是有強制性休眠策略的，不能 24 小時運行：

• 每天必須休眠 6 個小時
• 30 分鐘內沒有外部請求，則休眠
• 休眠后如果有新的外部請求實例則馬上啟動（但激活時此次發送郵件會失敗）。

分析了一下上方的策略，如果不想付費的話，最佳使用方案就設置定時器，目前基于 LeanCloud 自帶定時器實現了兩種云函數定時任務：

• 自動喚醒，定時訪問 Web APP 二級域名防止云引擎休眠（推薦）
• 定時檢查，每天定時檢查 24 小時內漏發的郵件通知

配置

• 首先需要添加環境變量，點擊 云引擎 -> 設置，配置自定義環境變量，變量名ADMIN_URL，變量值 Web 主機域名，即二級域名地址，添加后重啟容器環境變量才會生效

• 配置定時任務，擊 云引擎 -> 定時任務

  • 配置自動喚醒（推薦），創建定時任務，名稱任意，生產環境選擇 self-wake 云函數，Cron 表達式填入 0 */20 7-23 * * ?，表示每天 7 - 23 點每 20 分鐘訪問一次，這樣可以保持每天的絕大多數時間郵件服務是正常的。
  • 配置定時檢查，創建定時任務，名稱任意，生產環境選擇 resend-mails 云函數，Cron 表達式填入 0 0 8 * * ?，表示每天早 8 點檢查過去 24 小時內漏發的通知郵件并補發

顯示這樣表明 OK

效果圖：

4.3 實現評論顯示 QQ 郵箱頭像

1 獲取接口

一個是 QQ 頭像的，一個是 Gravatar 國內源，它們的調用方式如下：

• QQ頭像： http://q1.qlogo.cn/g?b=qq&nk=QQ號&s=100
• Gravatar頭像： http://cdn.v2ex.com/gravatar/md5加密后的郵箱?s=100

以上就是兩個頭像接口的信息，值得注意的是 Gravatar 后面的 s 分辨率參數可以隨意定義，而 QQ 不行，QQ 只有幾個有限的分辨率，比如 100, 200, 640，其它的數字會報 400 錯誤，所以 QQ 的 s 參數更像是一種清晰度，寬高還是通過 css 定義比較好。

2 步驟實現：

• 獲取郵箱判斷是否為 qq 郵箱
• 提取 qq 號
• 將 valine 中的頭像地址改為上述接口地址

3 F12 查看源碼–發現 valine 中顯示頭像的相關代碼是：（關鍵標簽：vimg）

再以ctrl+F快速查找（關鍵詞：vimg），不負眾望，在 Valine.min.js 中找到

替換掉 src 即可，好了，思路清晰，下面開始實現：

4.3.1 下載 Valine.min.js

引入 Valine.min.js 到本地themes/next/source/js/src/Valine.min.js
修改引入本地的 Valine

在 themes/next/layout/_partials/footer.swig 中引入 <script src="./js/src/Valine.min.js"></script>

4.3.2 增加 QQ 頭像判別

注意你的 valine 的版本號，我這里是 v1.4.9

打開 Valine.min.js，ctrl+F 快速查找關鍵詞：

(j.cdn+(0,s.default)(t.get("mail"))+j.params)

稍加換行如圖所示：(換行按分號換行)

//var qq_img = m.cdn + a(e.get("mail")) + m.params; var qq_img = E.cdn+(0,s.default)(t.get("mail"))+E.params; if (t.get("mail").indexOf("@qq.com") >= 0) {var prefix = t.get("mail").replace(/@.*/, "");//前綴var pattern = /^\d+$/g; //正則表達式var result = prefix.match(pattern);//match 是匹配的意思if (result !== null) {qq_img = "//q1.qlogo.cn/g?b=qq&nk=" + prefix + "&s=100";} }

流程：

• 默認還是 gravator 頭像接口
• 判斷是否是 qq 郵箱，提取前綴 prefix
• qq 頭像接口是 qq 號，如正則篩選剔除–重命名了帶英文的 qq 郵箱
• 拼接頭像地址
• 加入 src 顯示！

測試使用：

4.4 設置郵箱審核規則

在 themes/next/layout/_partials/footer.swig 中引入：

<script>// 自定義郵箱審核規則document.body.addEventListener('click', function(e) {if (e.target.classList.contains('vsubmit')) {const email = document.querySelector('input[type=email]');const nick = document.querySelector('input[name=nick]');const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if (!email.value || !nick.value || !reg.test(email.value)) {const str = `<div class="valert text-center"><div class="vtext">請填寫正確的昵稱和郵箱！</div></div>`;const vmark = document.querySelector('.vmark');vmark.innerHTML = str;vmark.style.display = 'block';setTimeout(function() {vmark.style.display = 'none';vmark.innerHTML = '';}, 2500);}}}) </script>

效果如下：

4.5 點擊回復直接評論

在 themes/next/layout/_partials/footer.swig 中引入：

<script>// 點擊回復直接評論,官方版本點擊回復時都是跳回到頁面上方的評論框進行回復，評論框是固定不動的// 參考https://immmmm.com/valine-diy,用到jQuery$(document).ready(function(){//$('.vemoji-btn').text('😀');$("#vcomments").on('click', 'span.vat',function(){$(this).parent('div.vmeta').next("div.vcontent").after($("div.vwrap"));$('textarea#veditor').focus();})}) </script>

效果如下：

4.6 實現評論自定義背景

在 themes/next/layout/_partials/footer.swig 中引入：

<!-- 評論框美化 --> <style>#comments .veditor{min-height: 10rem;background-image: url(https://gitee.com/wugenqiang/PictureBed/raw/master/CS-Notes/20200425091751.png);background-size: contain;background-repeat: no-repeat;background-position: right;background-color: rgba(255,255,255,0);resize: none;} </style>

效果如下：

總結

以上是生活随笔為你收集整理的Hexo NexT 评论系统 Valine 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。