Valine添加博主标签

我搜遍全网对于Valine添加博主标签,大都是懒人博客里面的教程,但他的教程对Butterfly 3.0.1不支持,需要自己修改一下,才能使用。看了懒人博客,和他下面的评论后终于修改好了,故记录于此。

修改valine.pug文件

修改Butterfly主题下的/layout/iuncludes/third-party/comments/valine.pug,我修改的如下,可参照原来的版本对比修改


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
- let emojiMaps = '""'
if site.data.valine
- emojiMaps = JSON.stringify(site.data.valine)

script(src=url_for(theme.CDN.valine))
script.
var requestSetting = function (from,set) {
var from = from
var setting = set.split(',').filter(function(item){
return from.indexOf(item) > -1
});
setting = setting.length == 0 ? from :setting;
return setting
}

var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
var requiredFields = requestSetting(['nick','mail','link'],'#{ theme.valine.requiredFields }')
let friends = '#{theme.valine.friends}'.split(',')
let master = '#{theme.valine.master}'.split(',')
let tagMeta = '#{theme.valine.tagMeta || "博主,小伙伴,访客"}'.split(',')

function loadValine () {
function initValine () {
window.valine = new Valine({
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: master,
friends: friends,
tagMeta: tagMeta,
metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder || {})}
});
if ('#{theme.valine.requiredFields}') { valine.config.requiredFields= '#{theme.valine.requiredFields}'.split(',') }
}

if (typeof Valine === 'function') initValine()
else $.getScript('!{url_for(theme.CDN.valine)}', initValine)
}

if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
if (!{theme.comments.lazyload}) loadComment(document.querySelector('#vcomment'),loadValine)
else setTimeout(() => loadValine(), 0)
} else {
function loadOtherComment () {
loadValine()
}
}

修改butterfly.yml文件

添加最后的 master friends metaPlaceholder tagMeta这几项,master friends是博主和小伙伴的邮箱经过md5加密后的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
valine:
appId: # leancloud application app id
appKey:# leancloud application app key
pageSize: 20 # comment list page size
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
placeholder: 留下邮箱可以快速收到回复!\n昵称和邮箱必填\n昵称栏输入QQ会使用QQ的昵称和头像 # valine comment input placeholder (like: Please leave your footprints)
guest_info: nick,mail,link # valine comment header info (nick/mail/link)
recordIP: # Record reviewer IP
serverURLs: # 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加密后的博主邮箱
- f644d72a2de2163cbd232954d2f2789a
friends: # md5加密后的小伙伴邮箱
- 5c43aebcd3c384d461188a1c26db5ab7
metaPlaceholder: # 输入框的背景文字
nick: 昵称/QQ号(必填)
mail: 邮箱(必填)
link: 网址(https://)
tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'

修改valine的CDN

将Valine的CDN修改成如下所示

https://cdn.jsdelivr.net/gh/imgyh/HexoStatic@latest/js/Valine.min.js