Valine 已经很久没有更新了，而且 leancloud 实在称不上稳定。后台也需要另外配置。时不时的还会遇到 leancloud 休眠。相比之下，后起之秀 waline 和 twikoo 都有自带后台管理评论和邮件通知。这是本帖最后一次更新。之后若再因为 butterfly 源码变动。本帖一概不理会。有需求的可以自行研究。

修改步骤

打开 [Blogroot]\themes\butterfly\layout\includes\third-party\comments\valine.pug, 按指示添加如下字段。 diff

 script.
 function loadValine () {
 function initValine () {
 const valine = new Valine(Object.assign({
 el: '#vcomment',
 appId: '#{theme.valine.appId}',
 appKey: '#{theme.valine.appKey}',
 placeholder: '#{theme.valine.placeholder}',
 avatar: '#{theme.valine.avatar}',
 meta: '#{theme.valine.guest_info }'.split(','),
 pageSize: '#{theme.valine.pageSize}',
 lang: '#{theme.valine.lang}',
 recordIP: #{theme.valine.recordIP},
 serverURLs: '#{theme.valine.serverURLs}',
 emojiCDN: '#{theme.valine.emojiCDN}',
 emojiMaps: !{emojiMaps},
 enableQQ: #{theme.valine.enableQQ},
 path: window.location.pathname,
+         master: '#{theme.valine.master}'.split(','),
+         friends: '#{theme.valine.friends}'.split(','),
+         tagMeta: '#{theme.valine.tagMeta || "店长,小伙伴,访客"}'.split(','),
 requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],
 visitor: #{theme.valine.visitor}
 }, !{JSON.stringify(theme.valine.option)}))
 }

打开 [Blogroot]\_config.butterfly.yml,

在 valine 配置项添加如下内容。
md5 加密可以使用在线转码，务必使用 32位[小] 进行转码。 diff

 # valine
 # https://valine.js.org
 valine:
 appId:  # leancloud application app id
 appKey:  # leancloud application app key
 pageSize: 10 # comment list page size
 avatar: monsterid # gravatar style https://valine.js.org/#/avatar
 lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
 placeholder:  # valine comment input placeholder (like: Please leave your footprints)
 guest_info: nick,mail,link # valine comment header info (nick/mail/link)
 recordIP: false # Record reviewer IP
 serverURLs: https://???????.api.lncldglobal.com # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
 bg: # valine background
 emojiCDN:  # emoji CDN
 enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
 requiredFields: nick,mail # required fields (nick/mail)
+     master: # md5加密后的博主邮箱
+       - d4e7????4d361ad7????44a14e9e2a94  #可添加多个
+     friends: # md5加密后的小伙伴邮箱
+       - 5c?????bfe6rfc72a????e268ad3819c #可添加多个
+       - 7c?????bfe65fc02a????e2????3919c
+     tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'
 option:

在 CDN 配置项添加如下内容。将 Valine.min.js 替换成 HCLonely 魔改的版本 diff

 CDN:
 # main
 main_css: /css/index.css
 jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
 main: /js/main.js
 utils: /js/utils.js
 # pjax
 pjax: https://npm.elemecdn.com/pjax/pjax.min.js
 # comments
 gitalk: https://npm.elemecdn.com/gitalk@latest/dist/gitalk.min.js
 gitalk_css: https://npm.elemecdn.com/gitalk/dist/gitalk.min.css
-     valine: https://npm.elemecdn.com/valine/dist/Valine.min.js
+     valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

以上步骤完成后，已经可以看到实现效果了。更多内容还请自行下载 Valine.min.js 源码进行修改。

Valine Visitor Tag Beautify

https://akilar.top/posts/d2222705/

作者

Akilar

发布于

2020-10-30

更新于

2021-06-16

许可协议

CC BY-NC-SA 4.0

📁Hexo 🦋Butterfly

Invitation

Akilar

674527148

created:03/09/2020

Welcome to Candyhome

sitelink

加入群聊【🧊Akilar の糖果屋🍭】

Use this card to join the candyhome and participate in a pleasant discussion together .

Welcome to Akilar’s candyhome,wish you a nice day .

昵称

邮箱

网址

8 条评论

Su 2022-02-19

店长，请问怎么用 twikoo，好像在你这暂时没有找到教程

Windows 10

Microsoft Edge 98.0.1108.55

Akilar 店长 2022-02-21

回复 @Su :

twikoo 有自己的官方文档，作者也一直在维护更新。https://twikoo.js.org

Windows 10

Microsoft Edge 98.0.1108.56

free 2022-02-13

请问店长这是用的哪个评论系统呢？

Windows 10

Chrome 98.0.4758.82

Akilar 店长 2022-02-14

回复 @free :

twikoo

Windows 10

Microsoft Edge 98.0.1108.43

wlop 2021-11-28

店长，能出一个 twikoo 的魔改教程吗

Windows 10

Microsoft Edge 96.0.1054.34

Akilar 店长 2021-11-28

回复 @wlop :

twikoo 的基本功能很完善了啊。我也没做啥魔改。

Windows 10

Microsoft Edge 96.0.1054.34

Akilar 店长 2021-11-28

回复 @wlop :

你如果有执念的话，可以看下洪哥写的魔改样式 https://blog.zhheo.com/p/8b1dde4c.html

Windows 10

Microsoft Edge 96.0.1054.34

Akilar 店长 2021-12-06

回复 @wlop :

新写了一篇，你看看合不合你的胃口：twikoo 评论块气泡风格魔改美化

Windows 10

Microsoft Edge 96.0.1054.43

展开

ZMJ0625 2021-11-02

店长，按照这个评论框还是没有了，是新版问题还是我操作错了？店长有没有更新 butterfly@Akilar

Windows 10

Chrome 95.0.4638.69

Akilar 店长 2021-11-02

回复 @ZMJ0625 :

这篇教程有点年头了，butterfly 对这块的改版也一直在做，已经不适合最新的了。

Android 11

Chrome 90.0.4430.82

ZMJ0625 2021-11-02

回复 @Akilar :

店长这个博客是用的以前版本还是换了评论

Windows 10

Chrome 95.0.4638.69

Akilar 店长 2021-11-02

回复 @ZMJ0625 :

目前我用的评论是 twikoo，自带一个后台管理，功能上比 valine 优秀许多。

Android 11

Chrome 90.0.4430.82

ZMJ0625 2021-11-02

回复 @Akilar :

好的，谢谢店长，这个有美化教程吗？

Windows 10

Chrome 95.0.4638.69

Akilar 店长 2021-11-02

回复 @ZMJ0625 :

twikoo 本身自带的样式就够用了。所以我没有另外写它的美化教程。

Android 11

Chrome 90.0.4430.82

ZMJ0625 2021-11-02

回复 @Akilar :

非常感谢您的回复

Windows 10

Chrome 95.0.4638.69

展开

哔哗 2021-06-16

我怎么把评论框给干没了…
hexo 三连以及删除那多出来的两行代码也没用..

Windows 10

Chrome 91.0.4472.106

Akilar 店长 2021-06-16

回复 @哔哗 :

我改下新版

Windows 10

Microsoft Edge 91.0.864.48

怀钰 2021-06-05

店长，可以加上一句，butterfly3.7.7 在 valine.pug 中多了两句代码：

- requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],
- visitor: #{theme.valine.visitor}

需要把这两句注释掉才能添加 master，friends 和 tagMeta 这三句

Windows 10

Chrome 91.0.4472.77

怀钰 2021-06-05

回复 @怀钰 :

否则评论区就会消失

Windows 10

Chrome 91.0.4472.77

Akilar 店长 2021-06-16

回复 @怀钰 :

不能注释掉。注释了才会消失。评论区没加载出来是你括号没闭合。

Windows 10

Microsoft Edge 91.0.864.48

展开

Jefecito 2021-02-17

想问一下如果在 Waline 里想要加这个标签是不是步骤同理？不过最后魔改的这个 CDN 地址如果 Waline 没有的话影响大吗？感谢博主解惑！

Windows 10

Chrome 88.0.4324.150

Akilar 店长 2021-02-17

回复 @Jefecito :

这个只适用于 valine，waline 并不适用。不过最终原理是一致的，都是根据邮箱的 md5 识别码确定是否需要添加标签。理论上来说可以自己添加外挂 js，来实现添加小伙伴标签的效果。

Android 10

QQ Browser 6.2

展开

玩泥巴 2020-12-15

2 1

不能用了好像

Windows 10

Chrome 87.0.4280.88

akilar 店长 2020-12-17

回复 @玩泥巴 :

你在 twikoo 里测 valine 当然不能用啦。

Windows 10

Microsoft Edge 87.0.664.60

Attributes

LV.46

Akilar

文章
456/500

标签
62/100

分类
6/100

流水幽吟绕耳边，
煦风馨语抚心弦，
挥臂欲揽冰钩月，
银星斟酌醉人涎。

加入糖果屋群聊

2022-03-30 WED ☀️ 18 *C 💧 36%

10:11:17

218.22.125.18 notfound AM

目录59

1. Valine 评论添加 [博主，小伙伴，访客] 标签
2. 修改步骤