封面图信息
名称:pm 17 : 23
作者:Cyka_
图源:pixiv

已获得原作者使用授权

此文章记录的内容涉及到修改主题文件,可能会存在更新主题时候的备份问题,请注意!

加入页脚播放器

这个内容已经在原作者的文档页面中有具体教程,本部分已做更新(2020年11月8日)

您可以按照原作者的方式进行添加,也可以按照本页面的方式进行添加

本页面的方式为将不同功能分散到不同文件中,方便日后修改时清晰易懂。但是同时有一个缺点,就是在升级主题的时候需要自己手动备份,手动恢复,并每次修改主题文件。

如果您不愿意折腾这些内容,强烈建议您参考原作者的链接进行修改。

当然,我比较喜欢折腾,所以这就无所谓了hhhhhh

效果图

首先放一张效果图
效果图

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
if theme.footplayers.enable&&page.footplayers !== false
include ./addons/footplayerh.pug

请严格注意缩进,否则会编译报错。缩进请根据源文件head下的方式去填写,使用2个空格作为缩进。

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.footplayers.enable&&page.footplayers !== false
include ./addons/footplayerh.pug

增加footplayerh.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建footplayerh.pug文件,并且粘贴下述代码。

1
2
3
4
style(type='text/css').
#toggle-sidebar {bottom: 80px;}

.aplayer.no-destroy(data-id=theme.footplayers.id data-server=theme.footplayers.server data-type=theme.footplayers.type data-fixed='true' data-mini='true' data-autoplay=theme.footplayers.auto data-order='random' data-volume='0.55' data-theme=theme.footplayers.theme data-mutex='true' data-preload='auto')

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件 (原作者已经在最新版本中去掉该功能)

在你喜欢的位置增加下述代码

1
2
3
4
5
6
7
8
9
10
# 自定义页脚播放
footplayers:
enable: true
id: 634204834
# id: 29712183 # happy Halloween-sana
auto: "true" # true | false
type: playlist # song, playlist, album, search, artist
# type: song # song, playlist, album, search, artist
server: netease # netease, tencent, kugou, xiami, baidu
theme: '#FE9600'

修改主题配置文件相应位置,如下:

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true

由于需要全局都插入aplayer和meting资源,为了防止插入重复的资源,需要把asset_inject设为false

Hexo的配置文件

1
2
3
aplayer:
meting: true
asset_inject: false

支持跨页播放

直接启用主题的pjax即可。

1
pjax: true

支持自动缩进

在我的网站中,左下角的播放器现在的状态是默认自动缩进,当您点开之后会停留在左下角。

修改方式

这里我修改了页面中的aplayer_css的引用内容。

首先克隆原来的仓库,然后对css文件进行修改,最后修改yml页面下的引用地址。

这里建议您自定义,即自己修改内容,使之更为契合您的小家。当然,如果您就想单纯地想实现我页面中这种隐藏办法,您也可以直接使用我做好的内容

修改方式如下(这里强烈建议您备份原来的地址,方便日后修改)

1
aplayer_css: https://img.cha.moe/css/APlayer.min.css

如果你在文章的头部插入footplayers: false的话,可以在指定文章不显示该播放器,但是如果启用pjax,由其他页面进入该页面时,播放器不会自动消失,音乐也不会自动暂停,需要手动刷新页面。

参考内容

主题原生教程:https://demo.jerryc.me/posts/507c070f/

此内容参考链接:https://hakurei.red/2019/11/25/为Hexo博客添加全局APlayer播放器/
修改主题参考链接:https://bili33.top/2020/03/19/butterfly-customize/#为网站加上全局黑白效果

加入live2d模型

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
if theme.live2d.enable&&page.live2d !== false
include ./addons/live2dwidget.pug

请严格注意缩进,否则会编译报错。缩进请根据源文件head下的方式去填写,使用2个空格作为缩进。

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.live2d.enable&&page.live2d !== false
include ./addons/live2dwidget.pug

增加live2dwidget.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建live2dwidget.pug文件,并且粘贴下述代码。

1
script(src=theme.live2d.link)

(你问我为什么不直接加在inject部分?——因为这样看起来更加高端)

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
3
4
# 自定义(live2d)js
live2d:
enable: true
link: 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js'

未写明的修改内容

  • 克隆并修改了包括但不限于waifu-tips.jsonautoload.jswaifu.css等文件
  • 修改了live2d模型的位置(将模型从左边移动到右边,并且适配相关按钮位置)
  • 根据该博客的布局修改了waifu的语料库,使之个性化。

这里提供修改后的仓库链接:https://github.com/chmoe/live2d-widget

如果你不愿意修改也可以直接使用我的。

如果你在文章的头部插入live2d: false的话,可以在指定文章不显示live2d模型,但是如果启用pjax,由其他页面进入该页面时,live2d不会自动消失,需要手动刷新页面。

参考内容

live2d-widget 作者仓库:https://github.com/stevenjoezhang/live2d-widget

自动变更网站标题

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
if theme.funnytitle.enable
include ./addons/funnytitle.pug

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.funnytitle.enable
include ./addons/funnytitle.pug

增加funnytitle.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建funnytitle.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
script.
window.onload = function(){
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
//- 如果有网站副标题才将网站标题保存(防止保存成歌曲名称或者是funnytitle内容)
if(document.title.indexOf("#{config.subtitle}") != -1){
OriginTitle = document.title;
}
document.title = "#{theme.funnytitle.hide}";
clearTimeout(titleTime);
if ("#{theme.funnytitle.recover.enable}"){
titleTime = setTimeout(function () {
if("#{theme.funnytitle.recover.music}"){
document.title = document.getElementsByClassName("aplayer-title")[0].innerText + document.getElementsByClassName("aplayer-author")[0].innerText;
$('.aplayer-title').bind('DOMNodeInserted',function(e){ //- 监听歌曲名称
$('.aplayer-author').bind('DOMNodeInserted',function(e){ //- 监听歌手名称
document.title = document.getElementsByClassName("aplayer-title")[0].innerText + document.getElementsByClassName("aplayer-author")[0].innerText;
});
});
}
else {document.title = OriginTitle;}
}, parseInt("#{theme.funnytitle.recover.period}")*1000);
}
}
else {
document.title = "#{theme.funnytitle.show}";
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
}

这个代码解释起来有些困难,所以我懒得解释了。

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
3
4
5
6
7
8
9
# 自定义funnytitle
funnytitle:
enable: true
hide: '大坏蛋你不要我了!' # 回归时展示的内容
show: '就知道你最好了ヾ(Ő∀Ő3)ノ诶嘿嘿' # 隐藏时展示的内容
recover: # 是否恢复原来的标题
enable: true
music: true # 是否将标题改为正在播放的音乐,如果是,则后台显示是只会显示播放的音乐名称
period: 2 # 恢复时长 单位:秒

如果您开启music选项,则需要有下述内容

  • 需要网站展示副标题
  • 需要开启上文的页脚播放器

参考内容

非常抱歉已经无法溯源了 m(_ _)m

自定义鼠标样式

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
if theme.mouse.enable
include ./addons/mouse.pug

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.mouse.enable
include ./addons/mouse.pug

增加mouse.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建funnytitle.pug文件,并且粘贴下述代码。

1
2
3
4
5
6
7
8
9
10
style.
body {
cursor: url(#{theme.mouse.default}), default;
}
input, textarea, p {
cursor: url(#{theme.mouse.text}), text;
}
a, button {
cursor: url(#{theme.mouse.link}), pointer;
}

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
3
4
5
6
# 自定义 鼠标样式
mouse:
enable: true
default: /default.cur # 箭头
text: /text.cur # 文本
link: /link.cur # 链接

上述内容中:xxx.cur为鼠标样式文件,可以在网上检索得到。

参考内容

自定义滚动条样式

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
if theme.scrollbar.enable
include ./addons/scrollbar.pug

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.scrollbar.enable
include ./addons/scrollbar.pug

增加scrollbar.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建scrollbar.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
style.
/* 滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(229, 138, 138, 0.2);
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: #e58a8a;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent
);
border-radius: 2em;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-moz-selection {
color: #fff;
background-color: #49b1f5;
}

就是一个css样式而已

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
3
# 自定义 滚动条样式
scrollbar:
enable: true

参考内容

小康博客:https://www.antmoe.com/posts/a811d614/index.html 的滚动条

网页黑白开关

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
if theme.blackandwhite
include ./addons/blackandwhite.pug

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.blackandwhite
include ./addons/blackandwhite.pug

增加blackandwhite.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建blackandwhite.pug文件,并且粘贴下述代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html
body
// 黑白色
style.
html{
filter: grayscale( 100%);
-webkit-filter: grayscale( 100%);
-moz-filter: grayscale( 100%);
-ms-filter: grayscale( 100%);
-o-filter: grayscale( 100%);
filter: url( "data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale( 1);
}

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
# 黑白页面
blackandwhite: false

参考内容

GamerNoTitle的博客:https://bili33.top/2020/03/19/butterfly-customize/ 4.为网站加上全局黑白效果

Bilibili视频插入

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
3
if theme.bilibili.enable
if page.bilibili || theme.bilibili.inject_eachpage
include ./addons/bilivedioinject.pug

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
6
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.bilibili.enable
if page.bilibili || theme.bilibili.inject_eachpage
include ./addons/bilivedioinject.pug

增加bilivedioinject.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建bilivedioinject.pug文件,并且粘贴下述代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
style.
/*哔哩哔哩视频适配*/
.bilibili {
position: relative;
width: 100%;
}
@media only screen and (max-width: 767px) {
.bilibili {height: 15em;max-width: 25em;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.bilibili {height: 20em;max-width: 30em;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bilibili {height: 30em;max-width: 40em;}
}
@media only screen and (min-width: 1200px) {
.bilibili {height: 40em;max-width: 50em;}
}

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
3
4
# 自定义(bilibili视频插入)CSS
bilibili:
enable: true
inject_eachpage: true

使用时可以在markdown文件中加入下述代码

1
<iframe class="bilibili" src="//player.bilibili.com/player.html?aid=48047567&bvid=BV1qb411p7yp&cid=84166816&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

其中high_quality=1代表着以高质量画面播放(1080p)

这串链接可以在bilibili网页端视频页面视频下方的分享处找到。

参考内容

找不到了,对不起!

你知道的太多了-黑幕

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/目录下的layout.pug文件,在head下边粘贴下述代码。

1
2
3
if theme.heimu.enable
if page.heimu || theme.heimu.inject_eachpage
include ./addons/blackcover.pug

下边是演示代码,或者您也可以直接复制这段代码覆盖相应的内容,以保证缩进。

1
2
3
4
5
6
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
if theme.heimu.enable
if page.heimu || theme.heimu.inject_eachpage
include ./addons/blackcover.pug

增加blackcover.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建blackcover.pug文件,并且粘贴下述代码。

1
2
3
4
5
6
7
8
9
10
style.
.heimu {
background-color: #000;
color: #000;
text-shadow: none;
transition: background-color .4s;
}
.heimu:hover {
background-color: transparent;
}

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
3
4
# 自定义(你知道的太多了)CSS
heimu:
enable: true
inject_eachpage: true

使用时可以在markdown文件中加入下述代码

1
<span class="heimu" title="你知道的太多了"> 这里替换为你想要隐藏的内容 </span>

上边md代码框中title代表鼠标放置时显示的文字

参考内容

CSS+JS轻松实现自定义黑幕效果:https://ucw.moe/archives/js-with-css-implements-heimu.html

个性化valine

修改内容

修改valine.pug文件

找到你的博客主题目录下的valine.pug文件,在head下边粘贴下述代码。

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
let emojiMaps = '""'
if site.data.valine
- emojiMaps = JSON.stringify(site.data.valine)
script.
+ var langName = 'kawai',
+ langMode = {
+ "nick": "* 可爱的名字",
+ "mail": "* 长长的邮箱",
+ "link": "你可爱的家的地址(https://)",
+ "nickFail":"名字再写得长一点就更可爱了呢!",
+ "mailFail":"这个邮箱好像有点问题呢",
+ "sofa": "目前还没有小可爱留下足迹呢",
+ "submit": "决定好啦",
+ "reply": "点这里回复哦",
+ "cancelReply": "不想要回复了",
+ "comments": "个小可爱的评论",
+ "cancel": "取消啦",
+ "confirm": "我确定啦",
+ "continue": "继续好了",
+ "more": "我还想看",
+ "preview": "点击这里就可以预览写的东西啦",
+ "emoji": "可爱的表情",
+ "expand": "我还要看",
+ "seconds": "秒以前的",
+ "minutes": "分钟之前的",
+ "hours": "个小时以前的",
+ "days": "天之前的",
+ "now": "就在刚刚",
+ "uploading":"正在和服务器交♂流信息中",
+ "uploadDone":"交♂流好啦!",
+ "busy":"服务器被NTR了,暂时没能交换信息",
+ "code-98":"又是管理员那家伙弄出的问题,今天晚饭和摄影师一桌。",
+ "code-99": "管理员今天的晚饭鸡腿已扣",
+ "code-100": "管理员没有配置好key,各位小可爱看到的话记得去审问那个家伙",
+ "code-140": "今天和服务器酱交♂流次数太多,服务器身体承受不住了",
+ "code-401": "管理员没有配置好key,各位小可爱看到的话记得去审问那个家伙",
+ "code-403": "地址君:因为我没有签约成为魔法少女,服务器那个家伙把我拒绝掉了!。",
+ "{}": "服务器酱有可能在睡觉,先不要打扰她啦。"
+ };
function loadValine () {
function initValine () {
window.valine = new Valine({
el: '#vcomment',
appId: '#{theme.valine.appId}',
appKey: '#{theme.valine.appKey}',
+ master: '#{theme.valine.masterEmail}'.split(','), //博主邮箱md5
+ tagMeta: '#{theme.valine.recogniseLabel}'.split(','), //标识字段名
+ //- tagMeta: ["博主","小伙伴","访客"], //标识字段名
+ friends: '#{theme.valine.friendsEmail}'.split(','), //小伙伴邮箱Md5
placeholder: '#{theme.valine.placeholder}',
avatar: '#{theme.valine.avatar}',
meta: '#{theme.valine.guest_info }'.split(','),
pageSize: '#{theme.valine.pageSize}',
lang: '#{theme.valine.lang}',
+ langMode: langMode,
recordIP: #{theme.valine.recordIP},
serverURLs: '#{theme.valine.serverURLs}',
emojiCDN: '#{theme.valine.emojiCDN}',
emojiMaps: !{emojiMaps},
enableQQ: #{theme.valine.enableQQ},
path: window.location.pathname,
});
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}) btf.loadComment(document.querySelector('#vcomment'),loadValine)
else setTimeout(() => loadValine(), 0)
} else {
function loadOtherComment () {
loadValine()
}
}

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

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
# 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: en # i18n: zh-CN/zh-TW/en/ja
+ lang: kawai # i18n: zh-CN/zh-TW/en/ja
+
+ # 自定义部分开始
+ masterEmail: e9745926746229e75d8e35d9ad7da64e # 博主邮箱MD5
+ friendsEmail: 0be83444da5d521f3c40212e240bb5bf, fdd3aa3bf035bb3ce17c05338b82a74f # 小伙伴们的邮箱MD5
+ recogniseLabel: 博主抹茶, 认识的小可爱, 新来的小可爱 # 不同标识
+
+ # 自定义部分结束
+
placeholder: "有什么问题的话,各位小可爱可以在这里写下来呀!开通了QQ获取功能,昵称那里填写你的QQ号就可以自动获取邮箱、头像、昵称啦。这里开启了叫做AKISMET的反垃圾评论检测功能哦!" # valine comment input placeholder (like: Please leave your footprints)
guest_info: nick,mail,link # valine comment header info (nick/mail/link)
recordIP: true # 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: https://img.cha.moe/img/blog/valine/valine-bg2.gif # valine background# valine background
emojiCDN: https://cdn.jsdelivr.net/gh/GamerNoTitle/ValineCDN@master/ # emoji CDN
enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
requiredFields: nick,mail # required fields (nick/mail)

1
2
3
4
5
6
7
CDN:
# comments
gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
- valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
+ # valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
+ valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

上文lang中的kawai需要与valine.pug中的名称对应。

这里采用了其他人开发的改版valine,非原版。

参考内容

https://valine.js.org/i18n.html

https://github.com/HCLonely/Valine

增加单推卡片

修改内容

修改layout.pug文件

找到你的博客根目录/themes/butterfly/layout/includes/widget/目录下的index.pug文件,在head下边粘贴下述代码。

1
2
3
4
5
6
7
8
9
10
#aside_content.aside_content
if theme.aside.card_author.enable
include ./card_author.pug
.sticky_layout
if theme.aside.card_announcement.enable
include ./card_announcement.pug
+ if theme.aside.card_oshi.enable
+ include ../addons/card_oshi.pug
if theme.aside.card_recent_post.enable
include ./card_recent_post.pug

增加card_oshi.pug文件

你的博客根目录/themes/butterfly/layout/includes/目录下新建一个addons文件夹,在新建的文件夹下新建card_oshi.pug文件,并且粘贴下述代码。

1
2
3
4
5
6
.card-widget.card-oshi
.card-content
.item-headline
i.iconfont.icon-torii-gate.card-announcement-animation
span= _p(theme.aside.card_oshi.title)
.announcement_content!= theme.aside.card_oshi.content

修改主题配置文件

修改主题目录下的_config.yml或者如果你采用了平滑升级,则修改butterfly.yml文件

在你喜欢的位置增加下述代码

1
2
3
4
5
6
7
aside:
···
+ card_webinfo: true
+ card_oshi:
+ enable: true
+ title: 单推
+ content: "内容"

修改index.pug文件时,上下顺序代表最终显示顺序,请根据需要调整。

参考内容

找不到了,对不起!


待编辑内容部分

缩减文章链接地址

隐藏文章