樱花飘落背景
1
2
| cd theme/Butterfly/source/js
wget https://yremp.live/wp-content/uploads/resource/js/sakura.js
|
把下载好的Js文件放在theme/Butterfly/source/js文件夹下
/Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入
1
2
| if theme.sakura.enable
script(src="/js/sakura.js")
|
在主题的主配置文件加入Butterfly/_config.yml
1
2
3
| # 页面樱花飘落动效
sakura:
enable: true
|
浏览器标题恶搞
在theme/Butterfly/source/js文件夹下添加crash_cheat.js文件
填入以下内容记得要修改你喜欢的标题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/joke.ico");
document.title = '看不见我🙈~看不见我🙈~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = ' ( ๑•̀ㅂ•́) ✧被发现了～';
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
|
在Butterfly/layout/includes/layout.pug中添加以下代码来引入
1
| script(type='text/javascript', src='/js/crash_cheat.js')
|
注意
因更新最新主题版本出现以下报错
1
| JQuery - $ is not defined
|
解决方式
引入以下js
示例
在inject: -> bottom:
1
| - <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>
|
解决我了遇到的问题！
添加标签云
使用命令进行安装插件
1
| cnpm install hexo-tag-cloud --save
|
打开Butterfly/layout/includes/widget/card_tags.pug文件，用下面内容将其替换掉，最好把之前的文件备份一下,防止后悔
1
2
3
4
5
6
7
8
9
10
11
12
| if site.tags.length
.card-widget.card-tags
.card-content
.item-headline
i.fa.fa-tags(aria-hidden="true")
span= _p('aside.card_tags')
script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
#myCanvasContainer.widget.tagcloud(align='center')
canvas#resCanvas(width='200', height='200', style='width=100%')
!= tagcloud()
!= tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})
|
添加个性化板娘
由stevenjoezhang 魔改项目
最简单引用方式在Butterfly/_config.yml中inject添加
1
2
3
4
5
| inject:
head:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
bottom:
- <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
|
添加访客地图
前往 clustrmaps 网站注册一个帐号
找到 Free Tools 下面的 Website Widget, 点击 Get Map Widget
输入你的博客网址，点击 Next
根据你自己的喜好选择样式 Map widget 或 Globe Widget
找到如下代码，记住 src (****** 的部分):
1
| <script type="text/javascript" id="clstr_globe" src="**********************">
|
在 themes/butterfly/layout/includes/widget/ 文件夹新建 card_map.pug 文件，文件内容如下:
1
2
3
4
5
6
| .card-widget.card-map
.card-content
.item-headline
i.fa.fa-globe-asia(aria-hidden="true")
span= _p('aside.card_map')
script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")
|
编辑 themes/butterfly/layout/includes/widget/index.pug 文件，在你想要显示的位置插入以下代码:
1
2
| if theme.aside.card_map
!=partial('includes/widget/card_map', {}, {cache:theme.fragment_cache})
|
注意格式
编辑 butterfly/_config.yml 文件，在 card_webinfo 下面添加一行 card_map: true
编辑 themes/Butterfly/languages/zh-CN.yml 文件 (请根据你的网站语言选择)，找到 aside 下对应格式添加 card_map: 访客地图 (后面的文本可自定义)
如果不想显示，直接把 butterfly/_config.yml 文件的 card_map: true 改为 card_map: false 即可
页脚跳动的♥
编辑博客根目录themes/Butterfly/layout/includes/footer.pug文件，将
1
| .copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
|
改为
1
| .copyright!= `©${theme.footer.owner.since} - ${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
|
将
1
| .copyright!= `©${nowYear} By ${config.author}`
|
改为
1
| .copyright!= `©${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
|
编辑butterfly.yml文件
在inject->head下面添加如下内容：
1
| - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">
|
Butterfly加载动画修改
添加配置文件
在目录themes/butterfly/layout/includes/loading下添加loaded.ejs文件，代码如下
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
| <% if (theme.preloader.enable) { %>
<div id='loader'>
<% if(theme.preloader.layout == 'gear' ) {%>
<div class="outer_box">
<div class='loader_overlay'></div>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'></div>
</div>
<p style="text-align:center"> loading...</p>
</div>
</div>
<% } else if(theme.preloader.layout == 'spinner-box') { %>
<div class="loading-left-bg"></div>
<div class="loading-right-bg"></div>
<div class="spinner-box">
<div class="configure-border-1">
<div class="configure-core"></div>
</div>
<div class="configure-border-2">
<div class="configure-core"></div>
</div>
<div class="loading-word">加载中...</div>
</div>
<% } %>
</div>
<script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>
<% } %>
|
引入样式文件
spinner-box风格样式文件 及默认butterfly主题加载：1
| - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >
|
- gear风格样式文件
1
| - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >
|
将上面两行代码加到主题目录_config _yml下的inject中
引入到页面
找到 themes/butterfly/layout/includes/下的文件layout.pug,将代码
1
2
| if theme.preloader
!=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
|
替换为
1
2
| if theme.preloader
!=partial('includes/loading/loaded.ejs', {}, {cache:theme.fragment_cache})
|
开启加载
主题目录_config _yml中的
替换为
1
2
3
| preloader:
enable: true
layout: gear # gear, spinner-box 两种样式
|
