博客Valine评论样式美化

JavaScript054

博客Valine评论样式美化,第1张

原文链接: https://bestzuo.cn/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 叔的(