原文链接：https://bestzuo.cn/posts/763113948.html
Valine 是一款非常轻量级无后端实现的评论系统，目前很多静态博客如 Hexo、Jekyll、Hugo 等等都原生支持 Valine，我使用的 halo 博客由于自带评论系统的表情包功能很让我抓狂（等于没有），所以我仍然选择继续使用 Valine（我不会说是因为我不想放弃攒了一年的评论的）。
截至到本文更新时，Valine 已经更新到了 v1.4.14 版本，之前很多不支持的功能在疫情期间由于作者大大闲置在家连续爆肝 N 个版本后也终于都支持了，当然，还有一些小功能我们也可以在其他人魔改的 Valine 中找到并使用，这个我稍后推荐。
Valine 1.4.14 版本功能及界面美化（持续更新）
这个界面美化基本是萝卜白菜各有所爱了，有人喜欢原生 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 表情包为例，我们可以这么写：
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 表情包的个数
e.exports['tieba-' + i] = tieba(i);
}
for (var i = 1; i < 101; i++) { //101 是 qq 表情包的个数
e.exports['qq-' + i] = qq(i);
}
for (var i = 1; i < 116; i++) { //116 是 aru 表情包的个数
e.exports['aru-' + i] = aru(i);
}
},
表情包分类
在上面添加表情包后，进行分类应该是我们最直观的想法。但是原生 Valine 的作者在目前并没有提供这个功能，以下我提供一个 MiniValine 可以实现表情包分类功能。
这个作者提供了两种类型的 Valine 评论插件，一个是 xCss 样式的，也就是原生 Valine 样式的作者；另外一种是 DesertP 样式的，我在之前的 Hexo 博客中也使用过（称为增强版 Valine）。由于现在原生 Valine 的功能已经追上来了，所以我切换回了 xCss 写的原生 Valine 插件。
扯远了，话说回来，如果要使用这种自带表情包分类功能的 Valine 插件的话，可以参考作者提供的 Github 文档，另外，这版的 MiniValine 不仅有表情包分类，下面要提供的博主、小伙伴标识之类的功能都已经集成了，还是很好用的。
在 veditor 输入界面增加背景图
这个图是我抄的 drew 叔的（😅就是这么好意思），之前找了很多图，都觉得不是很好看，选来选去最后还是用 drew 叔的感觉比较好看。建议大家在找图的时候最好找白色背景或者透明背景的，不然看起来很难看。
使用方法如下，将 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 内的图片可以换成自己的口味。
将 nick、email、link 输入框分开
这个就根据自己口味改了，甚至可以模仿 Disqus 把这三个输入框放到与提交按钮在同一行。
使用前请确保 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
}
鼠标放置头像旋转
这个比较简单，也可以给博客添加一些动态性。
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);
}
评论卡片式背景
这个看我评论区样式就知道了，这里就不放图了。
#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
与原生的相比，多了以下功能：
- 添加博主，小伙伴，访客标签
- 添加浏览器和操作系统图标，需
fontawesomeV5支持 - 邮箱检测更严格
- 增加 QQ 邮箱识别（原版只能通过昵称栏输入 QQ 号识别）
- meta placeholder 可自定义
使用方法与原生的类似，不同的是可以多设置几个参数：
| 参数 | 类型 | 说明 | 默认 | 示例 |
|---|---|---|---|---|
| tagMeta | Array | 标签要显示的文字 | [“博主”,“小伙伴”,“访客”] | [“博主”,“小伙伴”,“访客”] |
| master | Array/String | md5 加密后的博主邮箱 | [] | [“fe01ce2a7fbac8fafaed7c982a04e229”] |
| friends | Array | md5 加密后的小伙伴邮箱 | [] | [“fe01ce2a7fbac8fafaed7c982a04e229”] |
| metaPlaceholder | Object | meta placeholder 内容 | {} | {“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 的配置中加入参数就可以实现了，并且不影响原生的其它参数。MD5 加密可以推荐一个在线生成网站，不过 MD5 前端单次加密本身不安全，但是安不安全是相对的，只有邮箱信息本身价值不大。如果对博客安全要求比较高，希望留言的小伙伴邮箱不被泄露（这当然无法完全避免），那么还是不建议使用这个。
微信/QQ 通知评论消息
这个功能主要是用 Service 酱完成的，可以实现通过微信或者 qq 提示你的博客收到了评论。原作者 小康博客 的原文写的非常详细了，如果需要开启这个功能，可以移步去阅读，我这里就不再花大篇幅赘述这个功能。
