博客Valine评论样式美化

Posted 2023-05-12

参考技术A 原文链接： 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 叔的（😅就是这么好意思），之前找了很多图，都觉得不是很好看，选来选去最后还是用 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 提示你的博客收到了评论。原作者 小康博客 的 原文 写的非常详细了，如果需要开启这个功能，可以移步去阅读，我这里就不再花大篇幅赘述这个功能。

Leancloud+Valine打造Hexo个人博客极简评论系统

以下配置是基于Next主题6.1.0版本
效果见个人博客（暂时停用）的最下方评论。

Leancloud配置

首先访问Leancloud官网https://leancloud.cn/
有Github账号的小伙伴可以用Github账号进行登陆然后绑定邮箱就可以啦！
进入之后点击创建应用

这样我们就创建好啦！

接着点击应用右上角的设置进入设置界面

选择应用key，这样就可以看到我们接下来需要使用到的key

接着进入应用中心绑定你的个人博客域名

Valine配置

首先下载最新的Valine.min.js核心代码库到本地（下面是链接）
https://cdn.jsdelivr.net/npm/valine@1.1.9-beta9/dist/
右击Valine.min.js选择链接另存为即可

将下载好的 Valine.min.js 放置于 next\\source\\js\\src\\ 下
接着，打开valine配置文件进行配置
valine配置文件路径：next\\layout\\_third-party\\comments\\valine.swig

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unjkp.com/valine/dist/Valine.min.js"></script>  //删除Valine核心代码库外链调用
  <script src="/js/src/Valine.min.js"></script>  //调用刚下载的本地文件以加速加载速度

  {% set valine_uri = \'/js/src/Valine.min.js\' %}  //这里改为从本地加载
  {% if theme.vendors.valine %}
    {% set valine_uri = theme.vendors.valine %}
  {% endif %}
  <script src="{{ valine_uri }}"></script>
  
  <script type="text/javascript">
    var GUEST = [\'nick\',\'mail\',\'link\'];
    var guest = \'{{ theme.valine.guest_info }}\';
    guest = guest.split(\',\').filter(function (item) {
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: \'#comments\' ,
        verify: {{ theme.valine.verify }},
        notify: {{ theme.valine.notify }},
        appId: \'{{ theme.valine.appid }}\',
        appKey: \'{{ theme.valine.appkey }}\',
        placeholder: \'{{ theme.valine.placeholder }}\',
        avatar:\'{{ theme.valine.avatar }}\',
        guest_info:[\'nick\'] ,  //评论者只需要提供评论的昵称即可
        pageSize:\'{{ theme.valine.pageSize }}\' || 10,
    });
    //增加以下六行代码去除 power by valine
    var infoEle = document.querySelector(\'#comments .info\');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
      infoEle.childNodes.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }
  </script>
{% endif %}

然后我们去主题配置文件中进行修改
主题配置文件路径：next\\_config.yml
找到以下参数进行修改

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true //打开valine评论功能
  appid: 你的leancloud appid 
  appkey: 你的leancloud appkey 
  notify: false //邮件提醒
  verify: true //评论时是否有验证码，需要在Leancloud 设置->安全中心 中打开
  placeholder: 说点什么吧！ //评论框默认显示
  avatar: hide //评论者的头像,我这里设置的不显示
  guest_info: nick # custom comment header
  pageSize: 10 # pagination size

PS：评论者头像可以进行如下设置

到此，一个极简评论系统就完成啦！