文章目錄

一、前言

大晚上又魔改評論系統了，

2020年4月16日01:56:39把新版本的自定義圖片改出來了，2333，valine的新版本變化蠻大的。

二、嚐鮮

1.4.4 強勢來襲，嚐鮮加體驗。
文末給出個性定製的方法，skr~~

官方更新文檔：

v1.4.0~1.4.4, 2020-04-11
A 新的SDK加載邏輯
A新增圖片表情 --》算是優化了1.3.10中的表情，個性表情需自改，我在後文中給出方法
A 新增截圖粘貼上傳 --》點贊 , 直接截屏就可以ctrl+v上傳
A 新增圖片拖拽至評論框上傳
A 新增對MathJax的支持
A 新增對KaTex的支持
A 新增評論框樓內回覆 --》我懷疑作者大大看了我這篇文章《Valine–修復評論者暱稱跳轉外鏈出錯》
A 新增對夜間模式的支持 #221
A 全新的評論區UI界面 --》修改了提交框的位置，emmm，diy樣式的話需要重新修改哦
A 新增對zh-CN/zh-TW/en/jp等多國語言的支持
F 修復回覆評論時評論數據需要刷新纔會顯示的Bug #257 --》點贊
F 修復表情和預覽只能點開不能收回的Bug #254 --》點贊
F 修復Edge瀏覽器識別爲Chrome的Bug #250
F 修復Storage is not defined的Bug #242
F 修復可能存在的xss漏洞 #218
F 修復分頁Bug #196
F 修復點擊展開更多擊穿Bug #180
F 修復個別UA識別失敗的Bug
F 修復回覆評論後評論數變爲1的Bug #264
U 表情圖片懶加載 #261
U 刪除驗證碼 #207 --》撤銷了數學計算驗證（惋惜）
U 刪除自帶的郵件提醒 #20 --》撤銷了leacloud自帶郵箱提示（不過我們都用的zhaojun雲引擎吧，不影響）
U 代碼邏輯優化

注: MathJax 和 KaTex 需要當前頁面已加載並配置好相關的資源文件.

三、個性定製

前面先給出一個 Valine1.3.10版的使用和個性定製教程

1. 大佬版

1.3.10版之前的valine評論系統是開源的，可以使用node進行編譯，生成自定義的valine.min.js，再放在github上調用。

可參考：valine-plus，不過這都是老版本了，大佬請自行斟酌，npm肯定比修改js省心。

2.“傻瓜”版

參考我的樣式：

自定義背景
增添個性表情
根據郵箱拉取qq頭像
引入一言api
diy魔改樣式

我的樣式參考模板
cungudafa版：https://cungudafa.top/js/Valine144.min.js

如果感覺還ok，請直接引用我的樣式，不用客氣哦~

不要白嫖了，要記得留言點贊，哈哈哈，讓我知道我們有共同的欣賞水平~

如果你有更多的想法，可以看看後面一版，我魔改的記錄。

3.平民版

下載Valine1.4.4.min.js 到本地
我的主題目錄：themes\sakura\source\js\Valine.min.js
1. ~~官方：unpkg.com/[email protected]/dist/Valine.min.js~~
2. cungudafa版：https://cungudafa.top/js/Valine144.min.js
  請下載我的版本，修改後的哦！
修改爲本地引用
我的評論樣式引入在themes\sakura\layout\_partial\comment.ejs
```
<script src="../js/Valine.min.js"></script>
```
如果你是在footer.ejs，注意相對路徑只有一個點
```
<script src="./js/Valine.min.js"></script>
```
主要個性定製

（1）自定義背景

記住，修改樣式一定要在引入Valine144.min.js之後：

修改background-image 的url對應你的圖片，
今日詩詞，可選部分

<% if (theme.valine.enable && post.comments) { %>
<div id="vcomments"></div>
<!-- 先引入樣式,從footer提前 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<!-- <script src="//unpkg.com/valine/dist/Valine.min.js"></script> -->
<script src="../js/Valine144.min.js"></script>
<!-- 評論框美化 -->
<style>
    .v .veditor{min-height: 10rem;
        background-image: url(https://cdn.jsdelivr.net/gh/cungudafa/img/images/girls2.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-color: rgba(255,255,255,0);
        resize: none;}
</style>

<script>
    new Valine({
        el: '#vcomments',
        lang: 'zh-cn',
        admin_email: '[email protected]',//博主郵箱
        appId: "<%= theme.valine.appId %>",
        appKey: "<%= theme.valine.appKey %>",
        path: window.location.pathname,
        comment_count: true,
        //notify: false, // 郵件提醒!使用第三方就不要添加這個!!
        //verify: true, //驗證碼
        avatar: 'monsterid',//小怪物頭像
        placeholder: "你是我一生只會遇見一次的驚喜 ..."
    });
    
</script>
<!-- 今日詩詞：隨機返回一句古詩詞名句的接口，宅到用來做 Valine 的 placeholder 顯示內容 -->
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
    jinrishici.load(function(result) {
        var jrsc_plac =  result.data.content + "\n「" + result.data.origin.title + "」" + result.data.origin.dynasty + " · " + result.data.origin.author;
        document.getElementById("veditor").setAttribute("placeholder",jrsc_plac);
    })
</script>
<% } %>

（2）增添個性表情

1.4+版本顯示標籤名，不是圖片，感覺nice~，當然後期需要特殊處理一下。

注意在1.4.4版本中表情調用接口是https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/

要個性化顯示錶情包，需要重定向圖片接口

重定向第一處： 表情選擇（y.DEFAULT_EMOJI_CDN+o，可關鍵詞搜索一下）

這裏簡單做了個正則篩選，如果圖片路徑o包含https://開頭，則是自定義表情，不添加默認接口y.DEFAULT_EMOJI_CDN

重定向第二處： 評論區表情顯示（關鍵詞：r.DEFAULT_EMOJI_CDN+(o.data[t]||e)）

這裏簡單做了個正則篩選，如果圖片路徑(o.data[t]||e)包含https://開頭，則是自定義表情，不添加默認接口r.DEFAULT_EMOJI_CDN

下載我的 https://cungudafa.top/js/Valine144.min.js是修改後的了。

手動增添一個表情
參考：Uncle_drew -《valine添加自定義表情》

修改valine.min.js, 或者直接下載我修改後的js

這裏是關鍵字 + 表情鏈接：（只要你想，使勁往裏懟~）

function(e,t){
e.exports={
	傲嬌:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409103906.webp",
	開心:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409104757.webp",
	扣手手:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130304.webp",
	仙女下凡:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130301.webp",
	得瑟:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130258.webp",
	揉左臉:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130254.webp",
	揉右臉:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130249.webp",
	滑稽:"https://cdn.jsdelivr.net/gh/moezx/[email protected]/img/Sakura/images/smilies/icon_huaji.gif",
	smile:"e3/2018new_weixioa02_org.png",

直接用別人家的接口

第一步修改CDN接口：這裏用xaoxuu整理的表情

t.DEFAULT_EMOJI_CDN="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/valine/",
//默認頭像接口"//img.t.sinajs.cn/t4/appstyle/expression/ext/normal/",

第二步修改和增添表情圖片：
~~原樣式：~~

function(e,t){e.exports={smile:"e3/2018new_weixioa02_org.png",lovely:"09/2018new_keai_org.png",happy:"1e/2018new_taikaixin_org.png",clap:"6e/2018new_guzhang_thumb.png",whee:"33/2018new_xixi_thumb.png",haha:"8f/2018new_haha_thumb.png","laugh and cry":"4a/2018new_xiaoku_thumb.png",wink:"43/2018new_jiyan_org.png",greddy:"fa/2018new_chanzui_org.png",awkward:"a3/2018new_heixian_thumb.png",sweat:"28/2018new_han_org.png","pick nose":"9a/2018new_wabi_thumb.png",hum:"7c/2018new_heng_thumb.png",angry:"f6/2018new_nu_thumb.png",grievance:"a5/2018new_weiqu_thumb.png",poor:"96/2018new_kelian_org.png",disappoint:"aa/2018new_shiwang_thumb.png",sad:"ee/2018new_beishang_org.png",tear:"6e/2018new_leimu_org.png","no way":"83/2018new_kuxiao_org.png",shy:"c1/2018new_haixiu_org.png",dirt:"10/2018new_wu_thumb.png","love you":"f6/2018new_aini_org.png",kiss:"2c/2018new_qinqin_thumb.png",amorousness:"9d/2018new_huaxin_org.png",longing:"c9/2018new_chongjing_org.png",desire:"3e/2018new_tianping_thumb.png","bad laugh":"4d/2018new_huaixiao_org.png",blackness:"9e/2018new_yinxian_org.png","laugh without word":"2d/2018new_xiaoerbuyu_org.png",titter:"71/2018new_touxiao_org.png",cool:"c4/2018new_ku_org.png","not easy":"aa/2018new_bingbujiandan_thumb.png",think:"30/2018new_sikao_org.png",question:"b8/2018new_ningwen_org.png","no idea":"2a/2018new_wenhao_thumb.png",dizzy:"07/2018new_yun_thumb.png",bomb:"a2/2018new_shuai_thumb.png",bone:"a1/2018new_kulou_thumb.png","be quiet":"b0/2018new_xu_org.png","shut up":"62/2018new_bizui_org.png",stupid:"dd/2018new_shayan_org.png","surprise ":"49/2018new_chijing_org.png",vomit:"08/2018new_tu_org.png",cold:"40/2018new_kouzhao_thumb.png",sick:"3b/2018new_shengbing_thumb.png",bye:"fd/2018new_baibai_thumb.png","look down on":"da/2018new_bishi_org.png","white eye":"ef/2018new_landelini_org.png","left hum":"43/2018new_zuohengheng_thumb.png","right hum":"c1/2018new_youhengheng_thumb.png",crazy:"17/2018new_zhuakuang_org.png","scold ":"87/2018new_zhouma_thumb.png","hit on face":"cb/2018new_dalian_org.png",wow:"ae/2018new_ding_org.png",fan:"86/2018new_hufen02_org.png",money:"a2/2018new_qian_thumb.png",yawn:"55/2018new_dahaqian_org.png",sleepy:"3c/2018new_kun_thumb.png",sleep:"e2/2018new_shuijiao_thumb.png","watermelon ":"01/2018new_chigua_thumb.png",doge:"a1/2018new_doge02_org.png",dog:"22/2018new_erha_org.png",cat:"7b/2018new_miaomiao_thumb.png",thumb:"e6/2018new_zan_org.png",good:"8a/2018new_good_org.png",ok:"45/2018new_ok_org.png",yeah:"29/2018new_ye_thumb.png","shack hand":"e9/2018new_woshou_thumb.png",bow:"e7/2018new_zuoyi_org.png",come:"42/2018new_guolai_thumb.png",punch:"86/2018new_quantou_thumb.png"}}

修改爲新接口圖片：（我的valine已修改過~，以後需要自增加表情的話，在第一部分增加即可）

function(e,t){
	e.exports={
		傲嬌:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409103906.webp",
		開心:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409104757.webp",
		扣手手:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130304.webp",
		仙女下凡:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130301.webp",
		得瑟:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130258.webp",
		揉左臉:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130254.webp",
		揉右臉:"https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130249.webp",
		滑稽:"https://cdn.jsdelivr.net/gh/moezx/[email protected]/img/Sakura/images/smilies/icon_huaji.gif",
	};
	function aru(str){
        return "aru/aru-" + str + ".gif";
    }
    function tieba(str){
        return "tieba/tieba-" + str + ".png";
    }
    function qq(str) {
        return "qq/qq-" + str + ".gif";
    }
    //e.exports = {};
    for (var i = 1; i < 54; i++) {
      e.exports['tieba-' + i] = tieba(i);
    }
    for (var i = 1; i < 101; i++) {
      e.exports['qq-' + i] = qq(i);
    }
    for (var i = 1; i < 116; i++) {
      e.exports['aru-' + i] = aru(i);
    }
 },

最好是自己整理一下喜歡的評論表情（qq，貼吧，b站都是經典的參考表情，不知道會不會侵權哈，自己整理素材存放到github上最好！）

（3）根據郵箱拉取qq頭像

在我的valine裏這裏也已經修改過了，這裏記錄一下方便查找：

參考我修改1.3.10版：Valine-實現QQ郵箱識別生成頭像地址（完美解決頭像問題）
新版本里也沒有加，qq拉取部分有所更新

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";
	}
}

<img class="vimg" src="'+(qq_img)+'">

（4）diy魔改樣式

改了這麼多js，終於到css了，是diy還是魔改看你的心情啦！

我是直接在頁面F12修改好了複製到style裏去的，其實我不咋會前端，2333。

<!-- 評論框美化 -->
<style>
    .v .veditor{min-height: 10rem;
        background-image: url(https://cdn.jsdelivr.net/gh/cungudafa/img/images/girls2.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-color: rgba(255,255,255,0);
        resize: none;}
    .v .vwrap{padding: 0 0 44px;}
    .v .vwrap .vedit{padding-top:20px;}
    .v .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #fff7f7f7;}
    .v .vinput{padding:10px 15px; text-align: center;}
    .v .vwrap .vheader .vinput{border-bottom:0px}
    .v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}
    .v .vwrap .vrow{position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}
    .v .vrow {font-size: 0;padding: 0px 0;}
    .v .vicon {margin-right: 15px;}
    .v .vrow .vcol.vcol-30{display: none}
    .v .vedit .vctrl span.vpreview-btn{display: none}
    .v .vrow .vcol.vcol-70{width: 100%;}
    .v .vsubmit.vbtn{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#ff9999;}
    .v .vcards .vcard .vh .vhead .vsys{background: #fff7f7f7;}
    .v .vcards .vcard .vh .vmeta .vat{font-size: 12px;display: block;margin-left: 15px;float: right;color: #fff;background-color: #ff9999;line-height: 20px;padding: 0 6px;border-radius: 3px;}
    @media screen and (max-width: 520px){
    .v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}  
    }
</style>

ending~ 撒花。

Valine官方文檔
變化挺大的，不再維護了是遺憾吧，總之感謝作者大大的開源，大家都多去支持一下。
Uncle_drew -《valine添加自定義表情》
這一版是1.4.1，參考，點贊！！
Valine - 一款快速、簡潔且高效的無後端評論系統
入門使用教程
Valine-實現QQ郵箱識別生成頭像地址（完美解決頭像問題）
這一條新版本里也沒有加，qq拉取部分有所更新
Valine–修復評論者暱稱跳轉外鏈出錯

Valine-1.4.4新版本嚐鮮+個性制定（表情包、qq頭像、UI樣式）

文章目錄

一、前言

二、嚐鮮

三、個性定製

1. 大佬版

2.“傻瓜”版

3.平民版

（1）自定義背景

（2）增添個性表情

（3）根據郵箱拉取qq頭像

（4）diy魔改樣式

Hexo（sakura）neat壓縮導致首頁歸檔頁面分頁處錯位（完美解決）

【寶藏分享】自從用了這款PPT插件，小夥伴們都跪着看我

【Keras+TensorFlow+Yolo3】教你如何識別影視劇模型

【Keras+TensorFlow+Yolo3】一文掌握圖像標註、訓練、識別（tf2填坑）

【Yolo3】入門目標檢測實驗--Python+Opencv2+dnn

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Valine-1.4.4新版本嚐鮮+個性制定（表情包、qq頭像、UI樣式）

文章目錄

一、前言

二、嚐鮮

三、個性定製

1. 大佬版

2.“傻瓜”版

3.平民版

（1）自定義背景

（2）增添個性表情

（3） 根據郵箱拉取qq頭像

（4）diy魔改樣式

（3）根據郵箱拉取qq頭像