評論系統從Disqus到Valine
摘要：
本文首發於我的個人部落格： Suixin's Blog
Yelee主題預設支援三款主題：Disqus，多說和友言評論，參見 Yelee主題使用說明 。而目前多說和友言已經不能用了，Disqus也需要科學上網才可以載入使用，故新增一款新的評論系統勢在必行。
Valine ...
本文首發於我的個人部落格： ofollow,noindex">Suixin's Blog
Yelee主題預設支援三款主題：Disqus，多說和友言評論，參見 Yelee主題使用說明 。而目前多說和友言已經不能用了，Disqus也需要科學上網才可以載入使用，故新增一款新的評論系統勢在必行。
Valine
Valine 是一款優秀的評論系統，漂亮的介面、顯示瀏覽器資訊/系統資訊、支援匿名評論、支援Markdown、Emoji等都是它的絕對優勢，上圖
Valine介面
在Yelee中配置
簡單幾步，即可完成主題的適配：
valine: on: true appid: ***** # App ID appkey: ***** # App Key verify: true # 驗證碼 notify: true # 評論回覆郵箱提醒 avatar: mp # 匿名者頭像選項 placeholder: Just go go!
CDN: 中加入
valine: //unpkg.com/[email protected]/dist/Valine.min.js
- 在
/yelee/layout/_partial/article.ejs中加入
<% } else if (theme.valine.on){ %>
<%- partial('comments/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
縮排與其他的評論程式碼保持一致；
- 建立
/yelee/layout/_partial/comments/valine.ejs檔案，寫入
<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
<div id="vcomment" class="comment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="<%- theme.CDN.valine %>"></script>
<script>
new Valine({
el: '#vcomment',
notify: '<%= theme.valine.notify %>',
verify: '<%= theme.valine.verify %>',
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar: "<%= theme.valine.avatar %>"
});
</script>
</section>
- 在
/yelee/source/css/_partial/mobile.styl最後加入：
#comments {
margin: (10/16)rem 10px !important;
padding: 1rem !important;
}
大功告成，執行 hexo g -d 即可看到Valine的評論框啦！
Valine的使用
評論框支援三個選項：暱稱、郵箱、網址。
暱稱：展示在評論區的暱稱；
郵箱：在 Gravatar 註冊的郵箱，填寫後可顯示自定義的頭像；要想收到回覆提醒必須填寫郵箱哦～
網址：可設定為個人主頁，評論後可通過點選暱稱跳轉到該網址。
別忘了，最重要的，Valine支援Markdown語法哦，快在評論區留言吧～
Valine Admin
一位大神對Valine進行了修改： Valine Admin 是 Valine 評論系統的擴充套件和增強，主要實現評論郵件通知、評論管理、垃圾評論過濾等功能。支援完全自定義的郵件通知模板，基於Akismet API實現準確的垃圾評論過濾。
根據 配置手冊 進行一番配置，現在本文下方的評論系統已經完美支援郵件提醒了。
注：只有填寫了郵箱才可以收到回覆的郵件提醒哈～（這不是廢話麼……）