为了便于各位博主了解到是否新增了魔改方案，请查看更新记录页
此文原文来自：小康博客
前置说明
相信在这之前，大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律，都是一种方式，大量修改模板（主题源文件）。这种方式的好处就是简单快速且直接，缺点就是每次升级😏，不用我说了吧。除非你不打算在升级。
但是对于一个热爱升级的我来说，我怎么可以这样。于是乎我便写了这篇文章。按照此教程进行的魔改，大部分都是通过引入新的js文件和css文件实现的。这意味着再也不用因为升级而再次魔改而苦恼了😄。同样的缺点也还是有的，引入新文件必定导致页面加载速度下降，下降多少取决于访客网速、电脑配置及服务器的带宽。具体速度可以参考本博客。
此博客环境：Coding + Jsdeliver
这篇文章大部分修改全部没有改动pug模板。基本都是添加css文件和js文件实现的修改。
至此（2020-06-12）只有两项（友链页、双评论）修改改动了pug模板。
至于友链页 ，可改动空间并不大，因此升级主题只需要直接将文件覆盖作者文件即可。
而双评论，只需要每次升级主题将对应文件的else if改为if即可。
相信上述两项pug模板的修改不需要刻意记录也能印在心头把？
快速预览魔改范围
JS/CSS如何使用
下面关于各种修改我会直接给出参考代码，你可以每做一个修改都建立一个新的css/js文件，也可以将所有的代码都复制到一个css/js文件。
JS/CSS如何引用
此篇文章所说的一切引用（包括css和js）都可以参考这里。
- 打开主题配置文件（butterfly.yml）
- 定位搜索 inject
- 其中head是用来引入css的。bottom是用来引入js的。
示例：
1
2
3
4
5
| inject:
head:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/css/flink.min.css">
bottom:
- <script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/hideMobileSidebar.js"></script>
|
注：以上方式2.3.5版本可用，其他版本请自行查找引入自定义js及css的地方。
引用方式说明
引用方式二选一即可。
以相对路径引入
将写好的css文件移动到\Butterfly\source\css\目录下。
然后修改配置文件的引入方式
以外链的方式引入
同样的可以将这个文件上传到cdn，如七牛云、又拍云、GitHub+Jsdeliver等。
只需要将引入地址写为你的文件外链地址即可。
例如我的jsd链接
注：不同版本可能设置略有不同，请仔细对照你所使用版本的文档。引入并非写个连接，而是使用html标签引入。
快速“复制”
不想动手，就想得到魔改后的效果。😏可以直接使用作者自用的css。
直接使用作者自用的css可能会导致自己的布局出现错误排版，或者其他各种问题。无法解决！或者自行解决。（除非自己懂前端。）
小康博客已经放弃所有js脚本修改的特效，所有效果均使用CSS实现
仓库：https://github.com/Dreamy-TZK/Static_butterfly
你可以下载此仓库进行修改，然后构建出属于自己的魔改”装扮“。
使用方式
- clone仓库到本地
npm i安装模块- 运行命令
yarn server即可访问http://localhost:3000/css/style.min.css地址查看生成的css。 - 运行
npm run build即可生成打包的css样式文件（dist的css目录）。
调试小技巧：本地开发调试时，可以将引入的css地址修改为http://localhost:3000/css/style.min.css，等调试完毕后，运行npm run build命令生成样式文件后根据文件名在修改引入。
小康的蝴蝶魔改库
2021年1月3日已放弃维护，使用可能会出现问题。
这个工具库主要为了方便修改js部分而编写的库，以后可能会扩充也可能是最后一个版本。
具体使用与文档参照：xkTool工具库文档
使用此库后此页面所有有关js部分的代码(css代码参照此文档)均可参照文档使用对象方法调用，而无需复制粘贴冗长的代码。例如：
- 随机背景
- 简单插入阿里svg
- banner图滤镜效果、透明
- 。。。
视觉体验
这部分修改主要是针对进入博客后的直观感受。
背景
与本博客同款背景。开启需关闭背景图片设置，可能也需要关闭js动态背景。具体请自己尝试，本人没有尝试过。（主题的background请设置'#efefef'）
背景可参照Hexo博客之butterfly主题优化更换背景这篇文章进行魔改
去掉Banner图
效果图：
通过几行JS即可搞定：
1
2
3
4
| var full_page = document.getElementsByClassName("full_page");
if (full_page.length != 0) {
full_page[0].style.background = "transparent";
}
|
2020-05-17
F 修复连同文章页也变透明的bug
随机banner图
参考xkTool工具库文档
随机背景
参考xkTool工具库文档
鼠标样式
将以下代码复制到你所创建的css文件即可。
1
2
3
4
5
6
7
8
9
| body {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
default;
}
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
default;
}
|
代码解读：以上代码表示当鼠标在body元素及a、img元素上时所显示的鼠标为url路径里的样式。
因此你可以将里边的文件替换为任意鼠标样式。
鼠标*字跟随样式
真实效果可以去IconFont表或者友情链接页面去体验。
这个修改只是一个js，当然你可以全局引入，这样就会在整个博客都有这种效果。当然也可以向我一样，只在某个文章引入。
全局引入
直接在配置文件处引入这个js即可。
https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js
只在部分文章引入
将下边内容复制到markdown即可。注意：如果你的编辑器为你转化成了代码块，请删掉代码块。因为这是一个HTML标签
1
| <script src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js'></script>
|
页脚渐变
同样的将以下代码复制到你所创建的css文件即可。
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
|
@-webkit-keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
#footer {
background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
-o-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#footer:before {
background-color: rgba(0, 0, 0, 0);
}
|
页脚半透明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| #footer {
background: rgba(255,255,255,.15);
color: #000;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
backdrop-filter: saturate(100%) blur(5px)
}
#footer::before {
background: rgba(255,255,255,.15)
}
#footer #footer-wrap {
color: var(--font-color);
}
#footer #footer-wrap a {
color: var(--font-color);
}
|
滚动条
将以下代码复制到你所创建的css文件即可。
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
|
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(73, 177, 245, 0.2);
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
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;
}
|
手机侧边栏默认不展开
最新版主题已集成此功能。
这段修改需要将下边的代码复制到新建的js文件中。
1
2
3
4
5
6
7
8
9
| var mobile_sidebar_menus = document.getElementById("mobile-sidebar-menus");
var menus_item_child = mobile_sidebar_menus.getElementsByClassName(
"menus_item_child"
);
var menus_expand = mobile_sidebar_menus.getElementsByClassName("menus-expand");
for (var i = 0; i < menus_item_child.length; i++) {
menus_item_child[i].style.display = "none";
menus_expand[i].className += " menus-closed";
}
|
这里提供一个现成的地址，可以直接在引用处填写。也可以复制上边的代码到你自己的js文件中。
在线地址：https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/hideMobileSidebar.js
分类卡片折叠
最新版主题已集成此功能，建议更新主题版本。
分类卡片隐藏需要同时引入css和js文件。
JavaScript代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| var card_category_list = document.getElementsByClassName(
"card-category-list child"
);
var item = document.getElementsByClassName("card-category-list-item");
function toggle(t) {
var display = t.parentElement.nextSibling.style.display;
if (display == "none") {
t.parentElement.nextSibling.style.display = "block";
t.parentElement.nextSibling.style.height = "100%";
t.className = t.className.replace("fa-chevron-up", "fa-chevron-down");
} else {
t.parentElement.nextSibling.style.display = "none";
t.className = t.className.replace("fa-chevron-down", "fa-chevron-up");
}
}
for (var i = 0; i < card_category_list.length; i++) {
card_category_list[i].style.display = "none";
card_category_list[i].style.transition = "all 1s";
card_category_list[i].previousSibling.innerHTML +=
'<i class="fa fa-chevron-up menus-expand menus-closed" aria-hidden="true" style="margin-left:20px;" onclick="toggle(this)"></i>';
}
|
CSS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| #aside_content
.card-archives
ul.card-archive-list
> .card-archive-list-item
a
span:first-child,
#aside_content
.card-categories
ul.card-category-list
> .card-category-list-item
a
span:first-child {
width: auto;
min-width: 50%;
}
|
同样的，这个魔改也提供在线地址。
文章表情不换行
这个是一段JS代码，我建议在你需要添加表情的文章引入这段js。如果全局引入可能会拖慢页面加载速度。
1
| <script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/WithoutLine.min.js"></script>
|
以上代码，直接在markdown文档最下边写即可。
注意：如果你用的markdown如果将其转为代码块，那么请删除代码块，因为这是一个脚本内容。正确写的姿势如图（typora为例）：
错误示例：
部分编辑器可能将其自动转化为代码块，请各位博主注意些！
阅读模式的背景与字体
阅读模式下会给body加一个class名，因此改起来很简单。
1
2
3
4
5
6
7
8
9
| .read-mode{
font-size:17px;
}
.read-mode #web_bg{
background:#fdf6e3;
}
|
任意元素添加动效动画
理论上这些动效是可以给任意DOM元素添加的。添加方式很简单，引入一个css库：https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css
然后在DOM元素的类名添加相应的动画即可。
例如网址导航栏可以写为- 网址收藏 || https://dh.xiaokang.me/ || fas fa-infinity faa-shake animated
注意：如果使用On parent hover需要向父级元素添加class名faa-parent animated-hover。其余两个不需要。
MAC代码框美化
最新主题已支持修改代码块配色，建议更新主题
将butterfly.yml的highlight_theme配置项改为mac后任意引入下方一个css即可。（也可加入到自己的css文件中）
Banner魔幻圆圈
参考xkTool工具库文档
页脚养鱼
参考xkTool工具库文档
aplayer播放器隐藏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .aplayer .aplayer-lrc p {
font-size:12px;
font-weight:700;
line-height:16px!important
}
.aplayer .aplayer-lrc p.aplayer-lrc-current {
font-size:15px;
color:#49b1f5
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
left:-66px!important
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left:0!important
}
|
页面类修改
这部分的修改主要是针对一些特殊的页面，例如友链页。
友情链接页面修改
参考：https://www.yuque.com/kdoc/bf/friend
背景设置页
这个页面的初衷是为了测试不同背景下的博客效果。但可以勉强当作背景设置页。效果参考地址：butterfly主题背景更换
这个修改同样需要同时添加css与js代码。
JavaScript代码
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
|
var web_bg = document.getElementById("web_bg");
var content_inner = document.getElementById("content-inner");
var opacity = Cookies.get("opacity");
var bg = Cookies.get("bg");
var animation = Cookies.get("animation");
var type = Cookies.get("type");
if (bg) {
web_bg.style.background = bg;
web_bg.setAttribute("data-type", type);
if (animation) {
web_bg.style.animation = animation;
}
}
function setColor(opacity) {
var light_bg_color = "--light_bg_color: rgb(255, 255, 255," + opacity + ");";
var dark_bg_color = "--dark_bg_color: rgba(18,18,18," + opacity + ");";
content_inner.setAttribute("style", light_bg_color + dark_bg_color);
}
setColor(opacity);
|
CSS代码
1
2
3
4
5
6
7
| #aside_content .card-widget,#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
background: var(--light_bg_color)
}
[data-theme=dark] #nav,[data-theme=dark] .layout_page>div:first-child:not(.recent-posts),[data-theme=dark] .layout_post>#post {
background-color: var(--dark_bg_color)
}
|
将以上js与css全部引入后，新建一个页面。然后在其index.md中（正文部分）写入以下：
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| <style>@keyframes gradientBG{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100% {background-position: 0% 50%;}}#rightside{display:none;}</style>
> 这个页面是用来测试渐变背景的效果，以及不同透明度的效果。如果你有能力可以直接看 css 样式。否则请返回[Hexo 博客之 butterfly 主题优化更换背景](https://www.antmoe.com/posts/7198453/index.html#附录)复制代码。
> 阅读体验及个标签样式请自己进行调整。
## 透明度调节
<center style='margin-bottom:20px' id = 'opt'><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0">透明度0</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.1">透明度0.1</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.2">透明度0.2</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.3">透明度0.3</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.4">透明度0.4</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.5">透明度0.5</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.6">透明度0.6</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.7">透明度0.7</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.8">透明度0.8</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.9">透明度0.9</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="1">透明度1</a></center>
## 背景调节
<div id='demo_style' style='text-align:center;margin:0 auto;'>
### 渐变类
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: url("https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png"),linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;margin-bottom:5px;cursor: pointer;">粉蓝色有图片</div>
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;cursor: pointer;">粉蓝色无图片</div>
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);text-align: center;line-height: 200px;cursor: pointer;">美美哒渐变</div>
<div data-type="color" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(90deg,rgba(247,149,51,.1) 0,rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1) 100%);text-align: center;line-height: 200px;cursor: pointer;">博主同款</div>
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%;animation: gradientBG 15s ease infinite;text-align: center;line-height: 200px;cursor: pointer;">动态渐变</div>
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(to right bottom, rgb(0, 255, 240), rgb(92, 159, 247) 40%, rgb(211, 34, 255) 80%);text-align: center;line-height: 200px;cursor: pointer;">紫蓝色渐变</div>
### 渐变加图片类
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url(https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png),url(https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg)0% 0% / cover;text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">紫蓝色渐变</div>
### 图片类
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/tool/bing/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">必应壁纸</div>
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元图</div>
<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgblogbg/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元背景图</div>
</div>
## 测试文章
### 春
盼望着，盼望着，东风来了，春天的脚步近了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片这安静而和平的夜。乡下去，小路上，石桥边，撑起伞慢慢走着的人;还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。
天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去，“一年之计在于春”;刚起头儿，有的是工夫，有的是希望。
春天像刚落地的娃娃，从头到脚都是新的，它生长着。
春天像小姑娘，花枝招展的，笑着，走着。
春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。
1. 有序列表
2. 有序
3. 有
- 无需列表
- 测试
{% note default icon %}
default
{% endnote %}
{% note primary icon %}
primary
{% endnote %}
{% note success icon %}
success
{% endnote %}
{% note info icon %}
info
{% endnote %}
{% note warning icon %}
warning
{% endnote %}
{% note danger icon %}
danger
{% endnote %}
{% note primary no-icon%}
#### Primary Header**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
<script>var article_container=document.getElementById("demo_style"),opt=document.getElementById("opt");article_container.addEventListener("click",function(e){var t=e.target;"DIV"===t.nodeName&&"bg_test"===t.className&&(web_bg.style.background=t.style.background,web_bg.style.animation=t.style.animation),Cookies.set("bg",t.style.background,{expires:1}),Cookies.set("animation",t.style.animation,{expires:1}),Cookies.set("type",t.getAttribute("data-type"),{expires:1})}),opt.addEventListener("click",function(e){var t=e.target;if("A"===t.nodeName){var a=t.getAttribute("data-opacity");if(a){Cookies.set("opacity",a,{expires:1});var n="--light_bg_color: rgb(255, 255, 255,"+a+");",i="--dark_bg_color: rgba(18,18,18,"+a+");";document.getElementById("content-inner").setAttribute("style",n+i)}}e.preventDefault()});</script>
|
Speak页面
已从主题中移除此页面，使用主页的说说功能作为替代。
功能扩展
这里的修改主要是针对一些功能性的拓展，例如个性标签等等。
推荐：一次性引入除轮播图外的全部标签外挂。直接引用小康的tags.css文件。
https://unpkg.com/xiaokang-style/butterfly/css/tags.csshttps://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/tags.css
上面两个链接任选其一即可。
第一个链接更新速度快，只有10分钟缓存。也就是我发布后，你最多等10分钟即可使用最新的内容。缺点就是加载速度稍微慢一点
第二个链接更新速度稍微慢（可能一天、可能两天等）。有点是jsd加载比unpkg快一点。
二者内容一样，更具自己选择引入一个即可。无需两个全部引用，引用一个即可。
引入小康的tags.css文件（上面的链接）后，此部分除轮播图其余所有标签外挂均可参照小康的 butterfly 主题使用文档进行语法、预览、新增样式等查看。
引入以上链接的好处：
与作者保持更新，每次使用标签，查看文档即可。
理论上文档里的标签外挂都可以使用。
无需自己在手动添加样式使用新标签，因为我已经帮你做了。
更新
以下部分提供的代码不会在进行更新。但如果出现新的样式，会更新到tags.css文件中，因此强烈建议使用上面提供的链接。
标签外挂
此部分修改来源于Volantis主题，扩展的标签分别为Checkbox & Radio、富文本按钮、Folding、fancybox、span。
此项修改需要在源文件中添加新的文件，当然了并不会修改作者源文件。升级时只需要重新把这几个文件放入相应文件即可。文件下载地址：https://tzk.lanzous.com/b06m0pbmh。
添加的位置为：主题目录下的scripts中的tags文件夹中。
接下来引入css即可：https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/plugins.min.css
也可将此css保存到你的文件中，如果你已经引用了小康的pool的css文件，那么所有外挂的标签的css都无需引入。（CSS无需，不代表别的不需要。）
接下来就可以使用扩展标签了，具体语法可以参照源主题文档。
注意：不是所有的标签都可以使用，请对应功能进行使用。
自定义note（图标、颜色）
此项修改引用的图标是阿里iconfont图标。并不适用于Font Awesome。且你所使用的图标需引入的css中存在。关于如何使用阿里iconfont请参考Hexo博客之优雅使用阿里iconfont图标。这里只介绍成功引入阿里图标后如何自定义note标签的图标及颜色。
需要在css中加入以下规则。
1
2
3
4
5
6
7
8
9
10
|
.note.custom {
background-color: #f7f7f7;
border-left-color: #777;
display: block;
}
.custom:not(.no-icon)::before {
font-family: "iconfont";
color:var(--icon-color,#333);
}
|
接下来便可以在md中直接使用HTML标签自定义图标了。
示例：
1
| <div class="note icon custom iconfont 图标名" style="background: #f7f7f7;border-left-color: #777;--icon-color: red;"><p>default</p></div>
|
以上代码中的class名中的图标名在项目中查找。
点击复制代码即可粘贴到图表名。例如以下代码效果。
1
| <div class="note icon custom iconfont icon-QQ" style="background:#f7f7f7;border-left-color:#777;--icon-color: red;"><p>QQ 图标</p></div>
|
因为每个人的项目图标不一样，因此可能会出现class名相同但图标不一样的效果。具体效果以图标项目仓库为准。
常用配色搭配
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| /* default */
<div class="note icon custom iconfont icon-QQ2" style="background: #f7f7f7;border-left-color: #777;"><p>default</p></div>
/* success */
<div class="note icon custom iconfont icon-QQ2" style="background: #eff8f0;border-left-color: #5cb85c;"><p>success</p></div>
/* primary */
<div class="note icon custom iconfont icon-QQ2" style="background: #f5f0fa;border-left-color: #6f42c1;"><p>primary</p></div>
/* info */
<div class="note icon custom iconfont icon-QQ2" style="background: #eef7fa;border-left-color: #428bca;"><p>info</p></div>
/* warning */
<div class="note icon custom iconfont icon-QQ2" style="background: #fdf8ea;border-left-color: #f0ad4e;"><p>warning</p></div>
/* danger */
<div class="note icon custom iconfont icon-QQ2" style="background: #fcf1f2;border-left-color: #d9534f;"><p>danger</p></div>
|
另一种风格的note和小tag标签
note效果展示：
绿色
红色
黄色
灰色
蓝色
小tag标签效果展示：
红色小标签 绿色小标签 蓝色小标签 黄色小标签 灰色小标签
实现起来也很简单，只是对简单的p标签进行修改，为了方便添加颜色，这里提供了以上五种配色的样式。css如下：
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
| span.inline-tag {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .1rem;
border-radius: 6px;
background-color: var(--Color)
}
p.red,
span.red {
--Color: rgb(233, 30, 100);
--ColorA: rgba(233, 30, 100, 0.2);
}
p.green,
span.green {
--Color: rgb(139, 195, 74);
--ColorA: rgba(139, 195, 74, 0.2);
}
p.blue,
span.blue {
--Color: rgb(3, 169, 244);
--ColorA: rgba(3, 169, 244, 0.2);
}
p.yellow,
span.yellow {
--Color: rgb(255, 193, 7);
--ColorA: rgba(255, 193, 7, 0.2);
}
p.grey,
span.grey {
--Color: rgb(76, 76, 76);
--ColorA: rgba(76, 76, 76, 0.2);
}
p.div-border {
padding: 10px;
border: 1px solid var(--Color,#333);
border-radius: 0.4rem;
background-color: var(--ColorA, transparent);
}
p.left {
border-left-width: 5px;
border-left-color: var(--Color);
}
p.bottom {
border-bottom-width: 5px;
border-bottom-color: var(--Color);
}
p.right {
border-right-width: 5px;
border-right-color: var(--Color);
}
p.top {
border-top-width: 5px;
border-top-color: var(--Color);
}
|
使用起来也会简单，为了兼容各种平台，不推荐tag标签的写法。因此只又html标签的写法。这样做的好处是即便复制到各大平台也不会出现奇奇怪怪的标签符号或者报错。
小标签参数说明：<p class='div-border [颜色|方向加粗]'>你的文字</p>写法如下：
1
2
3
4
5
6
7
8
9
10
11
12
| /* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
|
以上代码的效果可以看本段开头处的效果（不写颜色默认为灰色）。当然了你也可以设置某个边框加粗。例如<p class='div-border green left right'>绿色</p>
绿色
渐变note
效果展示
修改方式
css中添加如下样式：
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| .tip {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
background: linear-gradient(90deg,#20a0ff,#20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
box-shadow: 0 3px 5px rgba(32,160,255,.5);
margin-bottom: 20px
}
.tip p {
margin: 5px 0!important
}
.tip:before {
background: #20a0ff;
background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
background: linear-gradient(0deg,#0092ff,#20b8ff);
border-radius: 50%;
color: #fff;
content: "\f129";
font-size: 12px;
position: absolute;
width: 24px;
height: 24px;
line-height: 24.5px;
left: -12px;
top: -12px;
-webkit-box-shadow: 0 0 0 2.5px #fff;
box-shadow: 0 0 0 2.5px #fff;
font-weight: 600;
font-family: "Font Awesome 5 Free";
text-align: center
}
.btn,.getit a {
position: relative
}
.well .tip:before {
-webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
box-shadow: 0 0 0 2.5px #f7f8f9
}
.tip ol {
margin: 0
}
.tip.success {
background: #61be33;
background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
background: -webkit-linear-gradient(left,#61be33,#8fce44);
background: linear-gradient(90deg,#61be33,#8fce44);
text-shadow: 0 -1px #61be33;
-webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
box-shadow: 0 3px 5px rgba(104,195,59,.5)
}
.tip.success:before {
background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
background: linear-gradient(0deg,#52bb1d,#95d34b);
content: "\f00c";
text-shadow: 0 -1px #61be33
}
.tip.warning {
background: #ff953f;
background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
background: -webkit-linear-gradient(left,#ff953f,#ffb449);
background: linear-gradient(90deg,#ff953f,#ffb449);
text-shadow: 0 -1px #ff953f;
-webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
box-shadow: 0 3px 5px rgba(255,154,73,.5)
}
.tip.warning:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
background: linear-gradient(0deg,#ff8f35,#ffc149);
content: "\f12a";
text-shadow: 0 -1px #ff953f
}
.tip.error {
background: #ff4949;
background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
background: -webkit-linear-gradient(left,#ff4949,#ff7849);
background: linear-gradient(90deg,#ff4949,#ff7849);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
box-shadow: 0 3px 5px rgba(255,73,73,.5)
}
.tip.error:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
background: linear-gradient(0deg,#ff3838,#ff7849);
content: "\f00d";
text-shadow: 0 -1px #ff4949
}
[data-theme="dark"] .tip {
filter: brightness(0.7);
}
[data-theme="dark"] .tip{
color: #4c4948;
}
|
使用方式
因为标签外挂的语法会导致复制到其他平台不便利，因此建议使用HTML写法。
1
2
3
4
| <div class='tip' ><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>
|
volantis主题的note标签
因为标签外挂的语法会导致复制到其他平台不便利，因此只提供HTML写法。
效果展示
修改方式
css中添加如下样式：
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
|
[data-theme="dark"] .snote {
color: #4c4948;
}
[data-theme="dark"] .snote {
filter: brightness(0.7);
}
div.tabs div.snote{
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.snote {
position: relative;
margin: 0 0 1rem;
padding: 15px;
border: initial;
border-left: 5px solid #eee;
background-color: #f9f9f9;
border-radius: 3px;
}
.snote h2,
.snote h3,
.snote h4,
.snote h5,
.snote h6 {
margin-top: 3px;
margin-bottom: 0;
padding-top: 0 !important;
border-bottom: initial;
}
.snote p:first-child,
.snote ul:first-child,
.snote ol:first-child,
.snote table:first-child,
.snote pre:first-child,
.snote blockquote:first-child,
.snote img:first-child {
margin-top: 0 !important;
}
.snote p:last-child,
.snote ul:last-child,
.snote ol:last-child,
.snote table:last-child,
.snote pre:last-child,
.snote blockquote:last-child,
.snote img:last-child {
margin-bottom: 0 !important;
}
.snote:not(.no-icon) {
padding-left: 45px;
}
.snote:not(.no-icon)::before {
position: absolute;
top: 13px;
left: 15px;
font-size: larger;
font-weight: 600;
font-family: "Font Awesome 5 Free";
}
.snote.default {
background-color: #f7f7f7;
border-left-color: #777;
}
.snote.default h2,
.snote.default h3,
.snote.default h4,
.snote.default h5,
.snote.default h6 {
color: #777;
}
.snote.default:not(.no-icon)::before {
content: "\f0a9";
color: #777;
}
.snote.primary {
background-color: #f5f0fa;
border-left-color: #6f42c1;
}
.snote.primary h2,
.snote.primary h3,
.snote.primary h4,
.snote.primary h5,
.snote.primary h6 {
color: #6f42c1;
}
.snote.primary:not(.no-icon)::before {
content: "\f055";
color: #6f42c1;
}
.snote.info {
background-color: #eef7fa;
border-left-color: #428bca;
}
.snote.info h2,
.snote.info h3,
.snote.info h4,
.snote.info h5,
.snote.info h6 {
color: #428bca;
}
.snote.info:not(.no-icon)::before {
content: "\f05a";
color: #428bca;
}
.snote.success {
background-color: #eff8f0;
border-left-color: #5cb85c;
}
.snote.success h2,
.snote.success h3,
.snote.success h4,
.snote.success h5,
.snote.success h6 {
color: #5cb85c;
}
.snote.success:not(.no-icon)::before {
content: "\f058";
color: #5cb85c;
}
.snote.warning {
background-color: #fdf8ea;
border-left-color: #f0ad4e;
}
.snote.warning h2,
.snote.warning h3,
.snote.warning h4,
.snote.warning h5,
.snote.warning h6 {
color: #f0ad4e;
}
.snote.warning:not(.no-icon)::before {
content: "\f06a";
color: #f0ad4e;
}
.snote.danger {
background-color: #fcf1f2;
border-left-color: #d9534f;
}
.snote.danger h2,
.snote.danger h3,
.snote.danger h4,
.snote.danger h5,
.snote.danger h6 {
color: #d9534f;
}
.snote.danger:not(.no-icon)::before {
content: "\f056";
color: #d9534f;
}
div.snote {
position: relative;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.6rem 16px 0.5rem 16px;
padding-left: calc(16px + 16px);
border-radius: 4px;
background: #f6f6f6;
border-left: 4px solid #767676;
}
div.snote h2,
div.snote h3,
div.snote h4,
div.snote h5,
div.snote h6 {
margin-top: 3px;
margin-bottom: 0;
padding-top: 0 !important;
border-bottom: initial;
}
div.snote p,
div.snote ul,
div.snote ol,
div.snote blockquote,
div.snote img {
font-size: 14px;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
div.snote::before {
position: absolute;
top: calc(50% - 24px * 0.5);
left: 4px;
width: 24px;
height: 24px;
text-align: center;
font-weight: 600;
line-height: 24px;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
}
div.snote::before {
color: #767676;
content: "\f054";
}
div.snote::before {
content: "\f054";
}
div.snote.quote {
background: #e8f4fd;
border-color: #2196f3;
}
div.snote.quote::before {
color: #2196f3;
content: "\f10d";
}
div.snote.info {
background: #e8f4fd;
border-color: #2196f3;
}
div.snote.info::before {
color: #2196f3;
content: "\f129";
}
div.snote.success,
div.snote.done {
background: #ebf9ed;
border-color: #3dc550;
}
div.snote.success::before,
div.snote.done::before {
color: #3dc550;
content: "\f00c";
}
div.snote.warning {
background: #fff8e9;
border-color: #ffbd2b;
}
div.snote.warning::before {
color: #ffbd2b;
content: "\f12a";
}
div.snote.danger,
div.snote.error {
background: #feefee;
border-color: #fe5f58;
}
div.snote.danger::before,
div.snote.error::before {
color: #fe5f58;
content: "\f00d";
}
div.snote.radiation::before {
content: "\f7b9";
}
div.snote.bug::before {
content: "\f188";
}
div.snote.idea::before {
content: "\f0eb";
}
div.snote.link::before {
content: "\f0c1";
}
div.snote.paperclip::before {
content: "\f0c6";
}
div.snote.todo::before {
content: "\f0ae";
}
div.snote.message::before {
content: "\f4ad";
}
div.snote.guide::before {
content: "\f277";
}
div.snote.download::before {
content: "\f019";
}
div.snote.up::before {
content: "\f102";
}
div.snote.undo::before {
content: "\f2ea";
}
div.snote.play::before {
content: "\f144";
}
div.snote.clear {
background: none;
border-color: none;
}
div.snote.light {
background: #f6f6f6;
border-color: #aaa;
}
div.snote.light::before {
color: #aaa;
}
div.snote.gray {
background: #f6f6f6;
border-color: #767676;
}
div.snote.gray::before {
color: #767676;
}
div.snote.red {
background: #feefee;
border-color: #fe5f58;
}
div.snote.red::before {
color: #fe5f58;
}
div.snote.yellow {
background: #fff8e9;
border-color: #ffbd2b;
}
div.snote.yellow::before {
color: #ffbd2b;
}
div.snote.green {
background: #ebf9ed;
border-color: #3dc550;
}
div.snote.green::before {
color: #3dc550;
}
div.snote.cyan {
background: #e8fafe;
border-color: #1bcdfc;
}
div.snote.cyan::before {
color: #1bcdfc;
}
div.snote.blue {
background: #e8f4fd;
border-color: #2196f3;
}
div.snote.blue::before {
color: #2196f3;
}
|
volantis主题的link标签与时间线标签
此处只是为了做对butterfly主题的适配，具体语法参照官方
- 将脚本放入主题文件夹下的
scripts里的tags目录 - 将我提供的css复制到自己的自定义css文件中
tags下载
自定义css：
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
#post a.link-card {
text-decoration: none;
margin: 0.2rem auto;
background: var(--tab-botton-bg);
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
text-align: left;
font-size: 0.575rem;
min-width: 200px;
max-width: 361px;
color: var(--tab-botton-color);
border-radius: 8px;
}
@media screen and (max-width: 425px) {
#post a.link-card {
max-width: 100%;
}
}
@media screen and (max-width: 375px) {
#post a.link-card {
width: 100%;
}
}
#post a.link-card:hover {
box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
}
#post a.link-card div.left,
#post a.link-card div.right {
pointer-events: none;
}
#post a.link-card div.left {
width: 48px;
height: 48px;
margin: 12px;
overflow: hidden;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
}
#post a.link-card div.left i {
font-size: 32px;
line-height: 48px;
margin-left: 4px;
}
#post a.link-card div.left img {
display: block;
position: absolute;
border-radius: 8px/4;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#post a.link-card div.right {
overflow: hidden;
margin-right: 12px;
}
#post a.link-card p {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#post a.link-card p.text {
font-weight: bold;
}
#post a.link-card p.url {
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--search-input-color);
font-size: 0.7125rem;
}
span.p.h2,
p.p.h2 {
font-size: 1.375rem;
color: var(--font-color);
padding-top: 0.8rem;
border-bottom: 1px solid var(--hr-border);
}
div.timenode {
position: relative;
}
div.timenode:before,
div.timenode:after {
content: "";
z-index: 1;
position: absolute;
background: rgba(68, 215, 182, 0.5);
width: 2px;
left: 7px;
}
div.timenode:before {
top: 0px;
height: 6px;
}
div.timenode:after {
top: 26px;
height: calc(100% - 26px);
}
div.timenode:last-child:after {
height: calc(100% - 26px - 16px);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
div.timenode .meta {
position: relative;
color: var(--tab-botton-color);
font-size: 0.375rem;
line-height: 32px;
height: 32px;
left: 27px;
}
div.timenode .meta:before,
div.timenode .meta:after {
content: "";
position: absolute;
top: 8px;
z-index: 2;
left: -27px;
}
div.timenode .meta:before {
background: rgba(68, 215, 182, 0.5);
width: 16px;
height: 16px;
border-radius: 8px;
}
div.timenode .meta:after {
background: #44d7b6;
margin-left: 2px;
margin-top: 2px;
width: 12px;
height: 12px;
border-radius: 6px;
transform: scale(0.5);
transition: all 0.28s ease;
-moz-transition: all 0.28s ease;
-webkit-transition: all 0.28s ease;
-o-transition: all 0.28s ease;
}
div.timenode .meta p {
font-weight: bold;
margin: 0 0 0 24px;
}
div.timenode .body {
margin: 4px 0 16px 24px;
padding: 16px;
border-radius: 8px;
background: var(--blockquote-bg);
}
div.timenode .body p:first-child {
margin-top: 0;
}
div.timenode .body p:last-child {
margin-bottom: 0;
}
div.timenode:hover .meta {
color: var(--text-highlight-color);
}
div.timenode:hover .meta:before {
background: rgba(255, 87, 34, 0.5);
}
div.timenode:hover .meta:after {
background: #ff5722;
transform: scale(1);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| {% timeline 碎碎念 %}
{% timenode 2020-08-06 [连接测试](https://xiaokang.me) %}
今天是2020-08-06
{% endtimenode %}
{% timenode 2020-08-05 [连接测试](https://xiaokang.me) %}
今天是2020-08-05
{% endtimenode %}
{% endtimeline %}
|
1
2
3
4
5
6
| {% link 小康博客, http://www.antmoe.com/, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% link 小康博客, http://www.antmoe.com/, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% link 小康博客, http://www.antmoe.com/, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% link 小康博客, http://www.antmoe.com/, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% link 小康博客, http://www.antmoe.com/, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% link 小康博客, http://www.antmoe.com/, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
|
主题自带隐藏按钮
主题自带的隐藏按钮点击后消失，则不可以再次隐藏。修改方法很简单，一段css代码即可。
1
2
3
| .hide-block>a.hide-button.open, .hide-inline>a.hide-button.open {
display: inline-block;
}
|
特殊按钮
只需要引入一个css即可解决。由于css过长，因此只给出一个在线链接，你可以将其下载放到自己的空间里，也可以直接引用。
地址：https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/css/buttons.min.css
样式及使用请参考https://www.antmoe.com/posts/58a62380/index.html
使用阿里Iconfont图标
参考Hexo博客之优雅使用阿里iconfont图标
评论类修改
此项修改主要是针对valine评论以及双评论。
由于作者已放弃使用valine评论，因此此魔改可能会出现问题。
valine评论小标签
这里valine的修改主要是一些小标签（访客，博主等。）
可以参照：HCLonely Blog的修改教程
双评论支持
3.0主题已经集成双评论。建议更新主题以开启双评论！
双评论支持也是源于HCLonely Blog的修改教程,但是他的教程需要改动三个pug模板，因此这种做法对于升级主题来说成本还是有点高的。因此我的解决方案最大限度的减少了更改pug模板的成本。但还是需要改动pug模板的。
修改pug模板
位置：\themes\Butterfly\layout\includes\comments\index.pug
修改内容：将所有的 else if 改为 if。
添加JS代码
将以下代码复制到你自己创建的JS文件中。
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
| function switchComment() {
const t =
"切换为Gitalk" === $("#switch-comment").attr("title")
? "切换为Valine"
: "切换为Gitalk",
o = $("#switch-comment>i");
"none" === $("#gitalk-container").css("display")
? $("#vcomment").slideUp("normal", () => {
$("#gitalk-container").slideDown("normal", () => {
$("#switch-comment").attr("title", t),
o.hasClass("fa-toggle-off")
? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
: o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
})
: $("#gitalk-container").slideUp("normal", () => {
$("#vcomment").slideDown("normal", () => {
$("#switch-comment").attr("title", t),
o.hasClass("fa-toggle-off")
? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
: o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
}
var commentElement = document.getElementsByClassName("comment_headling")[0];
if (commentElement != undefined) {
commentElement.innerHTML +=
'<a id="switch-comment" href="javascript:void(0);" title="切换为Gitalk" target="_self"><i class="fa fas fa-toggle-off" aria-hidden="true"></i></a>';
document.getElementById("gitalk-container").style.display = "none";
}
$("#switch-comment").click(function () {
return switchComment(), !1;
});
|
这个js脚本也提供现成的链接，https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/switch.min.js
至此即可完成双评论的修改，只修改else if为if是不是比修改三处pug模板简单多了。
Valine评论添加表情
参考Valine如何添加多个表情
Valien评论QQ、微信提醒
两份方案任选其一即可。
Hexo博客valine评论微信、qq提醒与评论微信通知及qq通知
遇到问题
如果遇到什么问题例如：修改完成后样式不对、缺少文件（写文章时可能忘记加上）等问题可以在下方留言或者将问题发送到我的邮箱。我会在第一时间内帮助解决问题。
