博客Valine評論樣式美化

原文鏈接：https://bestzuo.cn/posts/763113948.html

Valine 是一款非常輕量級無后端實現(xiàn)的評論系統(tǒng)蜓萄，目前很多靜態(tài)博客如 Hexo隅茎、Jekyll、Hugo 等等都原生支持 Valine绕德，我使用的 halo 博客由于自帶評論系統(tǒng)的表情包功能很讓我抓狂（等于沒有）患膛，所以我仍然選擇繼續(xù)使用 Valine（我不會說是因為我不想放棄攢了一年的評論的）。

Valine官方文檔

截至到本文更新時耻蛇，Valine 已經(jīng)更新到了 v1.4.14 版本踪蹬，之前很多不支持的功能在疫情期間由于作者大大閑置在家連續(xù)爆肝 N 個版本后也終于都支持了，當然臣咖，還有一些小功能我們也可以在其他人魔改的 Valine 中找到并使用遍坟，這個我稍后推薦郭宝。

Valine 1.4.14 版本功能及界面美化（持續(xù)更新）

這個界面美化基本是蘿卜白菜各有所愛了，有人喜歡原生 Valine 的 “素”，也有人喜歡根據(jù)自己的口味改一改郑什。以下均是針對我的留言區(qū)樣式進行的美化，如果你也是 v1.4.14 版本，你可以直接使用以下樣式。

使用表情包

這個在 Valine 1.4.5 版本時就已經(jīng)支持自定義表情包功能了闻镶，主要是配置 emojiCDN 和 emojiMaps 兩個配置項，建議移步文檔閱讀丸升。更重要的應該是表情包的來源铆农，這里推薦 xaoxuu 提供的 CDN 表情包接口，覆蓋了 aru狡耻、tieba墩剖、qq、weibo 等表情包夷狰。目前原生的表情包使用方法主要是在 emojiCDN 中寫路徑岭皂，emojiMaps 中寫映射關系，這樣在 js 中添加大量表情包的時候還是感覺寫的非常繁瑣沼头，所以我建議最好修改 Valine 源碼中的配置爷绘。

首先在源碼中定位到這里，修改原新浪表情包的路徑进倍，對應 js 配置中的 emojiCDN 字段：

image

然后定位到這里揉阎，修改表情包的映射路徑，對應 js 中的 emojiMaps 字段：

image

上面修改源碼可以避免在 js 中寫大量繁瑣的配置背捌，有需要的小伙伴可以考慮一下。

因為在 js 里面導入洞斯，所以我們添加表情包時也不需要一個個手動添加毡庆，以上面給出的 xaoxuu 表情包為例，我們可以這么寫：

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",
    };
    
    //這三個獲取表情包路徑名
    function aru(str){
        return "aru/aru-" + str + ".gif";
    }
    function tieba(str){
        return "tieba/tieba-" + str + ".png";
    }
    function qq(str) {
        return "qq/qq-" + str + ".gif";
    }

    //這三個寫入到表情包路徑中
    for (var i = 1; i < 54; i++) {   //54 是 tieba 表情包的個數(shù)
      e.exports['tieba-' + i] = tieba(i);
    }
    for (var i = 1; i < 101; i++) {  //101 是 qq 表情包的個數(shù)
      e.exports['qq-' + i] = qq(i);
    }
    for (var i = 1; i < 116; i++) {  //116 是 aru 表情包的個數(shù)
      e.exports['aru-' + i] = aru(i);
    }
 },

表情包分類

在上面添加表情包后么抗，進行分類應該是我們最直觀的想法。但是原生 Valine 的作者在目前并沒有提供這個功能亚铁，以下我提供一個 MiniValine 可以實現(xiàn)表情包分類功能蝇刀。

MiniValine 演示地址

這個作者提供了兩種類型的 Valine 評論插件，一個是 xCss 樣式的徘溢，也就是原生 Valine 樣式的作者吞琐；另外一種是 DesertP 樣式的，我在之前的 Hexo 博客中也使用過（稱為增強版 Valine）然爆。由于現(xiàn)在原生 Valine 的功能已經(jīng)追上來了站粟，所以我切換回了 xCss 寫的原生 Valine 插件。

扯遠了曾雕，話說回來奴烙，如果要使用這種自帶表情包分類功能的 Valine 插件的話，可以參考作者提供的 Github 文檔，另外切诀，這版的 MiniValine 不僅有表情包分類揩环，下面要提供的博主、小伙伴標識之類的功能都已經(jīng)集成了幅虑，還是很好用的丰滑。

在 veditor 輸入界面增加背景圖

這個圖是我抄的 drew 叔的（??就是這么好意思），之前找了很多圖翘单，都覺得不是很好看吨枉，選來選去最后還是用 drew 叔的感覺比較好看。建議大家在找圖的時候最好找白色背景或者透明背景的哄芜，不然看起來很難看貌亭。

image

使用方法如下，將 CSS 加到你的博客樣式文件中认臊。

#veditor {
    background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(255, 255, 255, 0);
    resize: vertical
}

上述的 url 內(nèi)的圖片可以換成自己的口味圃庭。

將 nick、email失晴、link 輸入框分開

這個就根據(jù)自己口味改了剧腻，甚至可以模仿 Disqus 把這三個輸入框放到與提交按鈕在同一行。

image

使用前請確保 Valine 評論的 div 的 id 是 vcomments涂屁，即 <div id="vcomments"></div> 如果是 class 為 vcomments书在，那么將以下的 # 換成 . 即可。

#vcomments .vheader .vnick {
      width: 31%;
      border: 2px solid #dedede;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px
}

#vcomments .vheader .vmail {
      width: 31%;
      border: 2px solid #dedede;
      margin-left: 34px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px
}

#vcomments .vheader .vlink {
      width: 31%;
      border: 2px solid #dedede;
      margin-left: 34px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px
}

鼠標放置頭像旋轉

這個比較簡單拆又，也可以給博客添加一些動態(tài)性儒旬。

img.vimg {
     transition: all 1s   /* 旋轉時間為 1s */
}

img.vimg:hover {
     transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
}

評論卡片式背景

這個看我評論區(qū)樣式就知道了，這里就不放圖了帖族。

#vcomments .vcards .vcard {
    padding: 15px 20px 0 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
    transition: all .3s
}

#vcomments .vcards .vcard:hover {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12)
}

#vcomments .vcards .vcard .vh .vcard {
    border: none;
    box-shadow: none;
}

增加博主栈源、小伙伴標識以及瀏覽器圖標

這個原生的 Valine 就不支持了，我們需要使用魔改的 Valine 文件竖般，可以直接將原生的 Valine 替換為以下的 Valine.min.js 文件甚垦。

//魔改版 Valine.min.js
https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

與原生的相比，多了以下功能：

添加博主涣雕，小伙伴艰亮，訪客標簽
添加瀏覽器和操作系統(tǒng)圖標，需 fontawesomeV5 支持
郵箱檢測更嚴格
增加 QQ 郵箱識別（原版只能通過昵稱欄輸入 QQ 號識別）
meta placeholder 可自定義

使用方法與原生的類似挣郭，不同的是可以多設置幾個參數(shù)：

參數(shù)	類型	說明	默認	示例
tagMeta	Array	標簽要顯示的文字	[“博主”,“小伙伴”,“訪客”]	[“博主”,“小伙伴”,“訪客”]
master	Array/String	md5 加密后的博主郵箱	[]	[“fe01ce2a7fbac8fafaed7c982a04e229”]
friends	Array	md5 加密后的小伙伴郵箱	[]	[“fe01ce2a7fbac8fafaed7c982a04e229”]
metaPlaceholder	Object	meta placeholder 內(nèi)容	{}	{“nick”:“昵稱 / QQ 號”,“mail”:“郵箱 (必填)”}
verify	Boolean	評論時是否需要驗證垃杖，需 jQuery 支持	false	true

舉個例子，我們可以在 Valine 的配置 js 中增加字段如下：

 new Valine({
        el: '#vcomments',
        appId: '',
        appKey: '',
+       master: '48c8f1e79dd340e4b247820fee013082',   //博主郵箱md5
+       tagMeta: ["博主","小伙伴","訪客"],     //標識字段名
+       friends:  ["fe01ce2a7fbac8fafaed7c982a04e229","fe01ce2a7fbac8fafaed7c982a04e229"],  //小伙伴郵箱Md5
        metaPlaceholder: {"nick":"昵稱/QQ號","mail":"郵箱（完全保密）"},
        placeholder: "填寫郵箱可以及時收到回復哦(●'?'●)",
        avatar: 'wavatar',
        enableQQ: true,
    });

以上在 Valine 的配置中加入?yún)?shù)就可以實現(xiàn)了丈屹，并且不影響原生的其它參數(shù)调俘。MD5 加密可以推薦一個在線生成網(wǎng)站伶棒，不過 MD5 前端單次加密本身不安全，但是安不安全是相對的彩库，只有郵箱信息本身價值不大肤无。如果對博客安全要求比較高，希望留言的小伙伴郵箱不被泄露（這當然無法完全避免）骇钦，那么還是不建議使用這個宛渐。

微信/QQ 通知評論消息

這個功能主要是用 Service 醬完成的，可以實現(xiàn)通過微信或者 qq 提示你的博客收到了評論眯搭。原作者小康博客的原文寫的非常詳細了窥翩，如果需要開啟這個功能，可以移步去閱讀鳞仙，我這里就不再花大篇幅贅述這個功能寇蚊。