Hexo NexT 评论系统 Valine 的使用
文章目錄
- 評論系統 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、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 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 互联网高手教你如何搜集你想要的信息
- 下一篇： 5款考试学习的高效率APP，让你轻松学习