为了便于各位博主了解到是否新增了魔改方案,请查看更新记录页

此文原文来自:小康博客

前置说明

魔改亮点

🆙主题可升级:几乎不改动主题源码。即便魔改,也不需要为升级主题而烦恼。

🍳简单快速:简单上手,快速修改。

🍭看我72变:多种背景随意更换。

📕优雅阅读:对卡片进行不同的透明度设置,实现更优雅的阅读。

👦个性友联:为你的好友设置不同的颜色

🎈页脚更炫酷:彩色渐变footer喜欢么?

🍟更多优点等你发现


为什么写这篇文章?

相信在这之前,大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律,都是一种方式,大量修改模板(主题源文件)。这种方式的好处就是简单快速且直接,缺点就是每次升级😏,不用我说了吧。除非你不打算在升级。

但是对于一个热爱升级的我来说,我怎么可以这样。于是乎我便写了这篇文章。按照此教程进行的魔改,大部分都是通过引入新的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)都可以参考这里。

  1. 打开主题配置文件(butterfly.yml)
  2. 定位搜索 inject
  3. 其中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的地方。

引用方式说明

引用方式二选一即可。

以相对路径引入

  1. 将写好的css文件移动到\Butterfly\source\css\目录下。

  2. 然后修改配置文件的引入方式

以外链的方式引入

同样的可以将这个文件上传到cdn,如七牛云、又拍云、GitHub+Jsdeliver等。

只需要将引入地址写为你的文件外链地址即可。

例如我的jsd链接

注:不同版本可能设置略有不同,请仔细对照你所使用版本的文档。引入并非写个连接,而是使用html标签引入。

快速“复制”

不想动手,就想得到魔改后的效果。😏可以直接使用作者自用的css。

直接使用作者自用的css可能会导致自己的布局出现错误排版,或者其他各种问题。无法解决!或者自行解决。(除非自己懂前端。)

css

  1. 自定义css

    https://cdn.jsdelivr.net/gh/tzki/tzki.github.io/css/pool.css

  • 友情链接页面

    替换模板即可,无需在添加css(引用以上三个链接的情况下)

  • 双评论

    修改模板,无需添加css(引用以上三个链接的情况下)

小康的蝴蝶魔改库

这个工具库主要为了方便修改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元素及aimg元素上时所显示的鼠标为url路径里的样式。

因此你可以将里边的文件替换为任意鼠标样式。

鼠标*字跟随样式

真实效果可以去IconFont表或者友情链接页面去体验。

这个修改只是一个js,当然你可以全局引入,这样就会在整个博客都有这种效果。当然也可以向我一样,只在某个文章引入。

  1. 全局引入

    直接在配置文件处引入这个js即可。

    https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js

  2. 只在部分文章引入

    将下边内容复制到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
/* 页脚footer */
/* 渐变色滚动动画 */
@-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);
}

image-20201028185956789

滚动条

将以下代码复制到你所创建的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文件。

  1. 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>';
    }
  2. 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;
/* 可以在这里引入自定义字体,具体方法请自行百度css引入字体 */
}
.read-mode #web_bg{
/* 背景颜色 */
background:#fdf6e3;
}

任意元素添加动效动画

On DOM loadOn hoverOn parent hover
 faa-wrench animated faa-wrench animated-hover faa-wrench
 faa-ring animated faa-ring animated-hover faa-ring
 faa-horizontal animated faa-horizontal animated-hover faa-horizontal
 faa-vertical animated faa-vertical animated-hover faa-vertical
 faa-flash animated faa-flash animated-hover faa-flash
 faa-bounce animated faa-bounce animated-hover faa-bounce
 faa-spin animated faa-spin animated-hover faa-spin
 faa-float animated faa-float animated-hover faa-float
 faa-pulse animated faa-pulse animated-hover faa-pulse
 faa-shake animated faa-shake animated-hover faa-shake
 faa-tada animated faa-tada animated-hover faa-tada
 faa-passing animated faa-passing animated-hover faa-passing
 faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse
 faa-burst animated faa-burst animated-hover faa-burst
 faa-falling animated faa-falling animated-hover faa-falling
 faa-rising animated faa-rising animated-hover faa-rising

理论上这些动效是可以给任意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.ymlhighlight_theme配置项改为mac后任意引入下方一个css即可。(也可加入到自己的css文件中)

Banner魔幻圆圈

参考xkTool工具库文档

页脚养鱼

参考xkTool工具库文档

页面类修改

这部分的修改主要是针对一些特殊的页面,例如友链页。

友情链接页面修改

效果图

参考:https://www.tzki.cn/posts/e01152f6/index.html

背景设置页

这个页面的初衷是为了测试不同背景下的博客效果。但可以勉强当作背景设置页。效果参考地址:butterfly主题背景更换

这个修改同样需要同时添加css与js代码。

  1. 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
    // 获取标签
    // 全局背景div
    var web_bg = document.getElementById("web_bg");
    // 公共父级
    var content_inner = document.getElementById("content-inner");
    // 获取Cookies
    // 透明度
    var opacity = Cookies.get("opacity");
    // 背景
    var bg = Cookies.get("bg");
    // 动画
    var animation = Cookies.get("animation");
    // 背景类型
    var type = Cookies.get("type");
    // 声明遍历 用于记录当前color
    // 设置背景
    if (bg) {
    web_bg.style.background = bg;
    web_bg.setAttribute("data-type", type);
    if (animation) {
    web_bg.style.animation = animation;
    }
    }
    function setColor(opacity) {
    // style="--light_bg_color: rgb(255, 255, 255,.3);--dark_bg_color: rgba(18,18,18,.2);"
    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);
  2. 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(&quot;https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png&quot;),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页面

示例:https://www.antmoe.com/speak/index.html

修改方式:https://docs.tzki.cn/Speak

功能扩展

这里的修改主要是针对一些功能性的拓展,例如个性标签,轮播图等等。

推荐:一次性引入除轮播图外的全部标签外挂。直接引用小康tags.css文件。

  1. https://unpkg.com/xiaokang-style/butterfly/css/tags.css
  2. https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/tags.css

上面两个链接任选其一即可。

第一个链接更新速度快,只有10分钟缓存。也就是我发布后,你最多等10分钟即可使用最新的内容。缺点就是加载速度稍微慢一点

第二个链接更新速度稍微慢(可能一天、可能两天等)。有点是jsd加载比unpkg快一点。

二者内容一样,更具自己选择引入一个即可。无需两个全部引用,引用一个即可。

引入小康tags.css文件(上面的链接)后,此部分除轮播图其余所有标签外挂均可参照小康的 butterfly 主题使用文档进行语法、预览、新增样式等查看。

引入以上链接的好处:

  1. 与作者保持更新,每次使用标签,查看文档即可。

    理论上文档里的标签外挂都可以使用。

    无需自己在手动添加样式使用新标签,因为我已经帮你做了。

  2. 更新

    以下部分提供的代码不会在进行更新。但如果出现新的样式,会更新到tags.css文件中,因此强烈建议使用上面提供的链接。

标签外挂

Checkbox & Radio

富文本按钮

Folding

此部分修改来源于Volantis主题,扩展的标签分别为Checkbox & Radio富文本按钮Foldingfancyboxspan

此项修改需要在源文件中添加新的文件,当然了并不会修改作者源文件。升级时只需要重新把这几个文件放入相应文件即可。文件下载地址:https://tzk.lanzous.com/b06m0pbmh

添加的位置为:主题目录下的scripts中的tags文件夹中。

image-20200620225011610

接下来引入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 */
.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名中的图标名在项目中查找。

  • background

    表示note的背景,可以自行设置。当然渐变背景理论上也是可以的。

  • border-left-color

    左边框的颜色。

  • --icon-color

    图标颜色,默认为#333

点击复制代码即可粘贴到图表名。例如以下代码效果。

1
<div class="note icon custom iconfont icon-QQ" style="background:#f7f7f7;border-left-color:#777;--icon-color: red;"><p>QQ 图标</p></div>

QQ 图标

因为每个人的项目图标不一样,因此可能会出现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

效果展示

默认情况

success

error

warning

修改方式

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);
}

/* snote夜间模式 */
[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写法。

效果展示

默认red

quote

info

done

success

danger

error

radiation

bug

idea-yellow

paperclip

todo

msg cyan

guide

download

up

undo

小标题

这是个引用

修改方式

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
/* snote夜间模式 */
[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;
}

/* TAG 小标签 */
.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主题的适配,具体语法参照官方

  1. 将脚本放入主题文件夹下的scripts里的tags目录
  2. 将我提供的css复制到自己的自定义css文件中

主题自带隐藏按钮

主题自带的隐藏按钮点击后消失,则不可以再次隐藏。修改方法很简单,一段css代码即可。

1
2
3
.hide-block>a.hide-button.open, .hide-inline>a.hide-button.open {
display: inline-block;
}

轮播图

轮播图的修改来源于网络(jq)的一个插件。此项修改引入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
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
(function () {
function Slider(option) {
this.wrap = option.wrap;
this.imgList = option.imgList;
this.imgNum = this.imgList.length;
this.width = option.width || $(this.wrap).width();
this.height = option.height || $(this.wrap).height();
this.isAuto = option.isAuto || true;
this.moveTime = option.moveTime;
this.direction = option.direction || "right";
this.btnWidth = option.btnWidth;
this.btnHeight = option.btnHeight;
this.spanWidth = option.spanWidth;
this.spanHeight = option.spanHeight;
this.spanColor = option.spanColor;
this.activeSpanColor = option.activeSpanColor;
this.btnBackgroundColor = option.btnBackgroundColor;
this.spanRadius = option.spanRadius;
this.spanMargin = option.spanMargin;
this.flag = false;
this.nowIndex = 0;
this.createDom();
this.initStyle();
this.bindEvent();
if (this.isAuto === true) {
this.autoMove();
}
}

Slider.prototype.createDom = function () {
var oUl = $('<ul class="imgList"></ul>');
var Spot = $('<div class="spot"></div>');
this.imgList.forEach(function (item) {
var oLi =
'<li><a href=" ' +
item.a +
'target="_blank" "><img src=" ' +
item.img +
' "></a></li>';
oUl.append(oLi);
var span = "<span></span>";
Spot.append(span);
});
var leftBtn = $(
'<div class="left-btn"><i class="fas fa-angle-left"></i></div>'
);
var rightBtn = $(
'<div class="right-btn"><i class="fas fa-angle-right"></i></div>'
);
this.wrap.append(oUl).append(leftBtn).append(rightBtn).append(Spot);
};
Slider.prototype.initStyle = function () {
$("*", this.wrap).css({ margin: 0, padding: 0, listStyle: "none" });
$(this.wrap).css({ overflow: "hidden", position: "relative" });
$(".imgList", this.wrap).css({
width: this.width,
height: this.height,
position: "relative",
});
$(".imgList li", this.wrap)
.css({
width: this.width,
height: this.height,
position: "absolute",
left: 0,
top: 0,
display: "none",
})
.eq(this.nowIndex)
.css({ display: "block" });
$(".imgList li a, .imgList li a img", this.wrap).css({
display: "inline-block",
width: this.width,
height: this.height,
});
$(".left-btn, .right-btn", this.wrap).css({
width: this.btnWidth,
height: this.btnHeight,
backgroundColor: this.btnBackgroundColor,
color: "#fff",
textAlign: "center",
lineHeight: this.btnHeight + "px",
position: "absolute",
top: "50%",
marginTop: -this.btnHeight / 2,
cursor: "pointer",
});
$(".right-btn", this.wrap).css({ right: 0 });
$(".spot", this.wrap).css({
height: this.spanHeight + this.spanMargin * 2,
position: "absolute",
left: "50%",
marginLeft: (-this.imgNum * (this.spanWidth + this.spanMargin * 2)) / 2,
bottom: 10,
});
$(".spot span", this.wrap)
.css({
display: "inline-block",
width: this.spanWidth,
height: this.spanHeight,
margin: this.spanMargin,
backgroundColor: this.spanColor,
borderRadius: this.spanRadius,
cursor: "pointer",
})
.eq(this.nowIndex)
.css({ backgroundColor: this.activeSpanColor });
};
Slider.prototype.bindEvent = function () {
var self = this;
$(".left-btn", this.wrap).click(function () {
self.move("prev");
});
$(".right-btn", this.wrap).click(function () {
self.move("next");
});
$(".spot span").click(function (e) {
self.move($(this).index());
});
$(this.wrap).mouseenter(function () {
clearInterval(self.time);
});
};
Slider.prototype.move = function (dir) {
if (this.flag) {
return false;
}
this.flag = true;
switch (dir) {
case "prev":
if (this.nowIndex === 0) {
this.nowIndex = this.imgNum - 1;
} else {
this.nowIndex--;
}
break;
case "next":
if (this.nowIndex === this.imgNum - 1) {
this.nowIndex = 0;
} else {
this.nowIndex++;
}
break;
default:
this.nowIndex = dir;
break;
}
var self = this;
$(".imgList li", this.wrap)
.fadeOut()
.eq(this.nowIndex)
.fadeIn(function () {
self.flag = false;
});
$(".spot span", this.wrap)
.css({ backgroundColor: this.spanColor })
.eq(this.nowIndex % this.imgNum)
.css({ backgroundColor: this.activeSpanColor });
};
Slider.prototype.autoMove = function () {
var self = this;
this.time = setInterval(function () {
if (this.direction == "left") {
$(".left-btn", this.wrap).trigger("click");
} else {
$(".right-btn", this.wrap).trigger("click");
}
}, self.moveTime);
};
$.fn.extend({
slider: function (option) {
option.wrap = this;
new Slider(option);
},
});
})();

使用也很简单,只要在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
<div class="demo"></div>
<script>
function tt(){
$('.demo').slider({
imgList: [
{
img: 'https://cdn.jsdelivr.net/gh/blogimg/picbed@latest/2020/04/13/2a877ea5da1292c817cbc2a254c01c31.png',
a: '跳转url地址',
},
{
img: 'https://cdn.jsdelivr.net/gh/blogimg/picbed@latest/2020/04/13/5005109d1aa2ffd28984c2b02b8cbfbe.png',
a: '跳转url地址',
},
{
img: 'https://cdn.jsdelivr.net/gh/blogimg/picbed@latest/2020/04/13/163a2ade4361d1ed705ed523091af67e.png',
a: '跳转url地址',
}
], //图片的列表,a属性里面存放的是网络地址,img存放的是图片地址
width: "100%", //图片的宽
height: 500, //图片的高
isAuto: false, //是否自动轮播
moveTime: 3000, //运动时间
direction: 'right', //轮播的方向
btnWidth: 30, //按钮的宽
btnHeight: 30, //按钮的高
spanWidth: 10, //span按钮的宽
spanHeight: 10, //span按钮的高
spanColor: '#fff', //span按钮的颜色
activeSpanColor: 'red', //选中的span颜色
btnBackgroundColor: 'rgba(0, 0, 0, 0.3)', //两侧按钮的颜色
spanRadius: '50%', //span按钮的圆角程度
spanMargin: 3, //span之间的距离
})
}
window.addEventListener('DOMContentLoaded',tt)
</script>

代码解读:<div class="demo"></div>用于下边JS代码定位元素用。如果改变class名,下边的JS选择器也需要做出对应的改变。

下边的Javascript代码用于生成轮播图。各项配置看注释即可。

特殊按钮

只需要引入一个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的修改主要是一些小标签(访客,博主等。)

可以参照:HCLonely Blog的修改教程

双评论支持

3.0主题已经集成双评论。建议更新主题以开启双评论!

双评论支持也是源于HCLonely Blog的修改教程,但是他的教程需要改动三个pug模板,因此这种做法对于升级主题来说成本还是有点高的。因此我的解决方案最大限度的减少了更改pug模板的成本。但还是需要改动pug模板的。

  1. 修改pug模板

    位置:\themes\Butterfly\layout\includes\comments\index.pug

    修改内容:将所有的 else if 改为 if。

  2. 添加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 ifif是不是比修改三处pug模板简单多了。吃瓜-小康博客

Valine评论添加表情

参考Valine如何添加多个表情

Valien评论QQ、微信提醒

两份方案任选其一即可。

Hexo博客valine评论微信、qq提醒评论微信通知及qq通知

在线css提供

以下链接不完整,更多链接请到我的仓库自行寻觅!

遇到问题

如果遇到什么问题例如:修改完成后样式不对、缺少文件(写文章时可能忘记加上)等问题可以在下方留言或者将问题发送到我的邮箱。我会在第一时间内帮助解决问题。

温馨提示

如果不知道怎么引入css/js请仔细看文章开头部分。

如果还是看不懂,那么我建议你不要魔改。