當前位置:成語大全網 - 端午節詩句 - 博客Valine評論樣式美化

博客Valine評論樣式美化

原文鏈接: /posts/763113948.html

Valine 是壹款非常輕量級無後端實現的評論系統,目前很多靜態博客如 Hexo、Jekyll、Hugo 等等都原生支持 Valine,我使用的 halo 博客由於自帶評論系統的表情包功能很讓我抓狂(等於沒有),所以我仍然選擇繼續使用 Valine(我不會說是因為我不想放棄攢了壹年的評論的)。

Valine官方文檔

截至到本文更新時,Valine 已經更新到了 v1.4.14 版本,之前很多不支持的功能在疫情期間由於作者大大閑置在家連續爆肝 N 個版本後也終於都支持了,當然,還有壹些小功能我們也可以在其他人魔改的 Valine 中找到並使用,這個我稍後推薦。

這個界面美化基本是蘿蔔白菜各有所愛了,有人喜歡原生 Valine 的 “素”,也有人喜歡根據自己的口味改壹改。以下均是針對我的留言區樣式進行的美化,如果妳也是 v1.4.14 版本,妳可以直接使用以下樣式。

這個在 Valine 1.4.5 版本時就已經支持自定義表情包功能了,主要是配置 emojiCDN 和 emojiMaps 兩個配置項,建議移步文檔閱讀。更重要的應該是表情包的來源,這裏推薦 xaoxuu 提供的 CDN 表情包接口 ,覆蓋了 aru 、 tieba 、 qq 、 weibo 等表情包。目前原生的表情包使用方法主要是在 emojiCDN 中寫路徑, emojiMaps 中寫映射關系,這樣在 js 中添加大量表情包的時候還是感覺寫的非常繁瑣,所以我建議最好修改 Valine 源碼中的配置。

首先在源碼中定位到這裏,修改原新浪表情包的路徑,對應 js 配置中的 emojiCDN 字段:

然後定位到這裏,修改表情包的映射路徑,對應 js 中的 emojiMaps 字段:

上面修改源碼可以避免在 js 中寫大量繁瑣的配置,有需要的小夥伴可以考慮壹下。

因為在 js 裏面導入,所以我們添加表情包時也不需要壹個個手動添加,以上面給出的 xaoxuu 表情包為例,我們可以這麽寫:

在上面添加表情包後,進行分類應該是我們最直觀的想法。但是原生 Valine 的作者在目前並沒有提供這個功能,以下我提供壹個 MiniValine 可以實現表情包分類功能。

MiniValine 演示地址

這個作者提供了兩種類型的 Valine 評論插件,壹個是 xCss 樣式的,也就是原生 Valine 樣式的作者;另外壹種是 DesertP 樣式的,我在之前的 Hexo 博客中也使用過(稱為增強版 Valine)。由於現在原生 Valine 的功能已經追上來了,所以我切換回了 xCss 寫的原生 Valine 插件。

扯遠了,話說回來,如果要使用這種自帶表情包分類功能的 Valine 插件的話,可以參考作者提供的 Github 文檔 ,另外,這版的 MiniValine 不僅有表情包分類,下面要提供的博主、小夥伴標識之類的功能都已經集成了,還是很好用的。

這個圖是我抄的 drew 叔的(?就是這麽好意思),之前找了很多圖,都覺得不是很好看,選來選去最後還是用 drew 叔的感覺比較好看。建議大家在找圖的時候最好找白色背景或者透明背景的,不然看起來很難看。

使用方法如下,將 CSS 加到妳的博客樣式文件中。

上述的 url 內的圖片可以換成自己的口味。

這個就根據自己口味改了,甚至可以模仿 Disqus 把這三個輸入框放到與提交按鈕在同壹行。

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

這個比較簡單,也可以給博客添加壹些動態性。

這個看我評論區樣式就知道了,這裏就不放圖了。

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

與原生的相比,多了以下功能:

使用方法與原生的類似,不同的是可以多設置幾個參數:

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

以上在 Valine 的配置中加入參數就可以實現了,並且不影響原生的其它參數。MD5 加密可以推薦壹個 在線生成網站 ,不過 MD5 前端單次加密本身不安全,但是安不安全是相對的,只有郵箱信息本身價值不大。如果對博客安全要求比較高,希望留言的小夥伴郵箱不被泄露(這當然無法完全避免),那麽還是不建議使用這個。

這個功能主要是用 Service 醬完成的,可以實現通過微信或者 qq 提示妳的博客收到了評論。原作者 小康博客 的 原文 寫的非常詳細了,如果需要開啟這個功能,可以移步去閱讀,我這裏就不再花大篇幅贅述這個功能。