Butterfly主题Valine评论美化

最新推荐文章于 2025-03-19 14:48:17 发布

姜貞羽

最新推荐文章于 2025-03-19 14:48:17 发布

阅读量2.5k

点赞数 5

分类专栏： Hexo博客

本文链接：https://blog.youkuaiyun.com/weixin_43868299/article/details/108894568

版权

Hexo博客专栏收录该内容

3 篇文章

订阅专栏

今天把Butterfly主题从2.3.5更新到3.2.0后，原本的Valine评论美化没了。幸好提前备份了文件，不过3.x.x后Valine的文件路径发生了变动，写这篇文章记录一下Valine的样式美化。

在 veditor 输入界面增加背景图

在这里插入图片描述
使用方法如下，将CSS加到博客样式文件中，文件路径如下：
X:\XX\HexoBlog\themes\Butterfly\source\css\index.styl

#veditor {
	background-image: url(https://image.bestzuo.cn/images/20200708160947.gif!getwebp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(255, 255, 255, 0);
	resize: vertical
}

url 内的图片可以换成自己的图片。可以设置当鼠标聚焦于输入框时，背景图消失，输入框失去焦点时，背景图重新显示，代码如下：

#veditor:focus{
	background-position-y: 200px;
	transition: all 0.2s ease-in-out 0s;
}

其中的 200px 差不多代表了图片的高度，transition 中的 0.2s 代表了消失的时间，可以根据自己的图片进行调整。

增加博主、小伙伴标识以及浏览器图标

在这里插入图片描述

原生的 Valine 不支持这个美化，所以需要使用魔改的 Valine 文件，在配置文件中搜索Valine，将原来的js替换成魔改版
在这里插入图片描述

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

与原生的相比，魔改版多了以下功能：
①添加博主，小伙伴，访客标签
②添加浏览器和操作系统图标，需引入 fontawesome v5.0+ 的 CSS 样式
③邮箱检测更严格
④增加 QQ 邮箱识别（原版只能通过昵称栏输入 QQ 号识别）
⑤meta placeholder 可自定义
使用方法与原生的类似，不同的是可以多设置几个参数：

参数	类型	说明	默认	示例
tagMeta	Array	标签要显示的文字	[“博主”,“小伙伴”,“访客”]	[“博主”,“小伙伴”,“访客”]
master	Array/String	md5 加密后的博主邮箱	[]	[“fe01ce2a7fbac8fafaed7c982a04e229”]
friends	Array/String	md5 加密后的博主邮箱	[]	[“fe01ce2a7fbac8fafaed7c982a04e229”]
metaPlaceholder	Object	meta placeholder 内容	{}	{“nick”:“昵称 / QQ 号”,“mail”:“邮箱 (必填)”}
verify	Boolean	评论时是否需要验证，需 jQuery 支持	false	true