Butterfly 2.3.5 优化

本片文章是根据 Buteeryfly 主题 2.3.5 版本修改。Butterfly 主题于 2020-6-16 更新至 3.0.0-RC-1 版本 (此版本为小更新)

2.3.5 版本涉及到修改源码,如果你要升级主题的话,你请看上方其他版本的优化教程。

本文所做的优化是我自己hexo init后,去Github上克隆Butterfly主题的稳定版,一步步在原主题基础上修改的
保证了小白根据本片文章一步步操作,能够和我博客一样的效果

修改头部导航栏

修改前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Main menu navigation
# ---------------
# format: xxx: 連結 || icon
# sub-menu
# xxx || icon:
# xxx || 連結 || icon
menu:
Home: / || fa fa-home
Archives: /archives/ || fa fa-archive
Tags: /tags/ || fa fa-tags
Categories: /categories/ || fa fa-folder-open
Link: /link/ || fa fa-link
About: /about/ || fa fa-heart
List||fa fa-list:
- Music || /music/ || fa fa-music
- Movie || /movies/ || fa fa-film

image.png

修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Main menu navigation
# ---------------
# format: xxx: 連結 || icon
# sub-menu
# xxx || icon:
# xxx || 連結 || icon
menu:
首页: / || fa fa-home
归档: /archives/ || fa fa-archive
标签: /tags/ || fa fa-tags
分类: /categories/ || fa fa-folder-open
友情链接: /link/ || fa fa-link
关于: /about/ || fa fa-heart
菜单||fa fa-list:
- 音乐 || /music/ || fa fa-music
- 电影 || /movies/ || fa fa-film

image.png

添加搜索

在Butterfyl主题配置文件_config.yml文件中找到如下内容修改enable:true

1
2
3
4
5
local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

作者Github:https://github.com/wzpan/hexo-generator-search
安装插件npm install hexo-generator-search --save

将搜索配置,添加到配置文件中,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索
# ---------------
search:
path: search.xml
field: post
content: true

local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

效果图:

image.png

博客昵称颜色修改

C:\Hexo-Blog\themes\Butterfly\source\css\var.styl找到$light-grey = #EEEEEE

#EEEEEE修改为你喜欢的颜色

Lete乐特的颜色:#80bdab

效果图

image.png

如果你不想修改顶部导航栏颜色,就在C:\Hexo-Blog\themes\Butterfly\source\css\_layout\head.styl底部添加

1
2
3
4
//头部颜色
#page-header a {
color: #e3fdfd;
}

效果图

image.png

移动端优化

C:\Hexo-Blog\themes\Butterfly\source\css\_third-party\normalize.min.css添加如下css代码:

1
2
3
4
5
6
7
8
/*移动端优化:去除归档、标签、最新文章、公告、、只保留网站统计*/
@media screen and (max-width: 800px) {
#aside_content
div:not(:last-child) {
display: none;
font-size: 13px;
}
}

去除前:

image.png

去除后:

image.png

背景图

横幅背景

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg

效果

image.png

博客背景

1
2
3
4
5
6
# 设置网站背景
# 可设置图片 或者 顔色
# 图片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 顔色 background: '#49B202'
# 留空 显示白色
background: url(https://cdn.jsdelivr.net/gh/lete114/CDN@2.0/Use/Jkx5y6.jpg)

效果

image.png

页脚背景

打开C:\Hexo-Blog\themes\Butterfly\source\css\_layout\footer.styl文件把background: $light-blue注释掉即可

1
2
3
4
5
6
#footer
position: relative
//background: $light-blue
background-attachment: local
background-position: bottom
background-size: cover

效果

image.png

页脚自定义

C:\Hexo-Blog\themes\Butterfly\layout\includes\footer.pug

修改前:

1
2
3
4
5
6
7
#footer-wrap
- var now = new Date()
- var nowYear = now.getFullYear()
if theme.since && theme.since != nowYear
.copyright!= `©${theme.since} - ${nowYear} By ${config.author}`
else
.copyright!= `©${nowYear} By ${config.author}`

image.png

修改后:

1
2
3
4
5
6
7
#footer-wrap
- var now = new Date()
- var nowYear = now.getFullYear()
if theme.since && theme.since != nowYear
.copyright!= `&copy;${theme.since} - ${nowYear} <i style="color:#FF6A6A" class="fa fa-heartbeat"></i>${config.author}`
else
.copyright!= `&copy;${nowYear} <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;" class="fa fa-heartbeat"></i> ${config.author}`

image.png

页脚自定义内容
Butterfly主题配置文件_config.yml里找到footer_custom_text

1
footer_custom_text: 我相信我可以,但我一直在路上,所以我有无限的可能!!

效果图:

image.png

创建导航栏页面

关于我

1
hexo new page about

C:\Hexo-Blog\source\about\index.md

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 关于我
date: 2020-06-03 17:53:02
type: about
---

# 个人简介
昵称:
性别:
爱好:


分类

1
hexo new page categories

C:\Hexo-Blog\source\categories\index.md

1
2
3
4
5
---
title: 分类
date: 2020-06-03 17:53:02
type: categories
---

友情链接

1
hexo new page link

C:\Hexo-Blog\source\link\index.md

1
2
3
4
5
---
title: 友情链接
date: 2020-06-03 17:53:02
type: link
---

C:\Hexo-Blog\source\目录下新建_data文件夹,文件夹内新建link.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
26
27
28
class:
class_name: 友情链接
link_list:
1:
name: Lete乐特
link: https://www.lete114.top/
avatar: https://www.lete114.top/img/favicon.ico
descr: 每天进步一点点
2:
name: Test
link: https://www.xxxxxx.com/
avatar: https://xxxxx/favicon.ico
descr: Test


class2:
class_name: 链接无效
link_list:
1:
name: Test
link: https://yilia.lete114.top/
avatar: https://www.lete114.top/img/favicon.ico
descr: Test
2:
name: Test
link: https://yilia.lete114.top/
avatar: https://www.lete114.top/img/favicon.ico
descr: Test

效果图

image.png

留言板

1
hexo new page messageboard

C:\Hexo-Blog\source\messageboard\index.md

1
2
3
4
5
6
---
title: messageboard
date: 2020-06-10 10:25:42
type: messageboard
---
# 有什么想和Lete乐特说的吗??

标签

1
hexo new page tags

C:\Hexo-Blog\source\tags\index.md

1
2
3
4
5
---
title: 标签
date: 2020-06-03 17:53:02
type: tags
---

主题颜色

默认主题颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
####    美化/效果    ####
#--------------------------------

# Theme color for customize
# Notice: color value must in double quotes like "#000" or may cause error!
# ---------------
theme_color:
enable: true
main: "#49B1F5"
paginator: "#00c4b6"
button_hover: "#FF7242"
text_selection: "#00c4b6"
link_color: "#99a9bf"
meta_color: "#858585"
hr_color: "#A4D8FA"
code_foreground: "#F47466"
code_background: "rgba(27, 31, 35, .05)"
toc_color: "#00c4b6"
blockquote_padding_color: "#49b1f5"
blockquote_background_color: "#49b1f5"

其他

添加颜色块

C:\Hexo-Blog\themes\Butterfly\source\css\_third-party\normalize.min.css添加,当然你可以加更多颜色,这里我颜色3个色块

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

/*颜色块-黄*/
span#yellow-block {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: normal;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.1rem;
background-color: #FFD700;
}

/*颜色块-绿色*/
span#green-block {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: normal;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.1rem;
background-color: #5cb85c;
}

/*颜色块-灰色*/
span#gray-block {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: normal;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.1rem;
background-color: #4f4f4f;
}

效果图

在Marcdown文件内容使用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Test
abbrlink: Test
date: 3020-04-15 21:38:33
cover: https://cdn.jsdelivr.net/gh/lete114/CDN/BoBoPic/05.jpg
tags:
- Test
- 测试
---

<span id="yellow-block">黄色色块</span>
<span id="green-block">绿色色块</span>
<span id="gray-block">灰色色块</span>

image.png

鼠标样式

C:\Hexo-Blog\themes\Butterfly\source\css\_third-party\normalize.min.css添加如下css代码:

1
2
3
4
5
6
7
8
9
10
/* 鼠标图标 */
body {
background: rgba(255, 255, 255, .5);
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/Jkll8I.png), auto;
margin: 0;
}
a:hover{
text-decoration: none;
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

文章透明

打开C:\Hexo-Blog\themes\Butterfly\source\css\_layout\page.styl找到如下代码

1
2
3
4
5
6
7
8
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
padding: 50px 40px
border-radius: 8px
background: rgba(255,255,255,0.7);
//background: $card-bg 注释掉这条,添加上面 background: rgba(255,255,255,0.7); 这条即可
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s

修改滚动条

打开C:\Hexo-Blog\themes\Butterfly\source\css\_global\var.styl找到如下代码:

1
2
3
4
5
6
7
8
9
10
*::-webkit-scrollbar
width: 8px
height: 8px

*::-webkit-scrollbar-thumb
background: $light-blue

*::-webkit-scrollbar-track
background-color: transparent

覆盖掉上面的代码👆

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: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background-color: rgba(73, 177, 245, 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: #e58a8a;
}

修改前

image.png

修改后

image.png

添加樱花特效

把下方的内容添加到Butterfly主题下_config.yml文件的inject:下的bottom:

1
- <script src="https://cdn.jsdelivr.net/gh/lete114/CDN/Sum/sakura.js"></script>#樱花

效果图:

image.png

添加卖萌标题

把下方的内容添加到Butterfly主题下_config.yml文件的inject:下的bottom:

1
- <script src="https://cdn.jsdelivr.net/gh/lete114/CDN/Sum/title.js"></script>#樱花

效果图:

image.png

image.png

添加梨花带雨播放器

梨花带雨播放器:官网

播放器有两款样式,这里我选择的是第二种

image.png

复制代码添加到Butterfly主题下_config.yml文件的inject:下的bottom:

效果图:

image.png

添加Aplayer音乐播放器

Aplayer音乐播放器:官网

打开C:\Hexo-Blog\themes\Butterfly\layout\includes\head.pug

尾部添加include ./third-party/aplayer.pug

C:\Hexo-Blog\themes\Butterfly\layout\includes\third-party文件夹内新建aplayer.pug内容图下:

1
2
3
4
5
6
7
if theme.aplayer && theme.aplayer.enable
.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
each item in theme.aplayer.css
link(rel='stylesheet', href=item)
each item in theme.aplayer.js
script(src=item)

Butterfly主题下_config.yml配置文件里添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
##侧边栏歌单
aplayer:
enable: true
js:
- https://cdn.jsdelivr.net/gh/lete114/CDN/music/APlayer/APlayer.min.js
- https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
css:
- https://cdn.jsdelivr.net/gh/lete114/CDN/music/APlayer/APlayer.min.css
id: 4968103795 #歌单id
server: netease #服务商
type: playlist # 播放菜单
fixed: 'true' #是否开启吸底模式,详细:https://aplayer.js.org/#/home?id=fixed-mode
order: random # 音频循环顺序, 可选值: 'list', 'random'
preload: auto #预加载,可选值: 'none', 'metadata', 'auto'
listFolded: 'false' #列表默认折叠
autoplay: true # 自动播放
volume: 0.1 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效

效果图:

image.png

2020-6-17

添加头部背景视频

提前说明:(其实也不会有人去看这个,不过我下面也提供了解决办法)

image.png

Video属性

属性说明
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 “autoplay”,则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

新建C:\Hexo-Blog\themes\Butterfly\source\js\video.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
/**
* Created by Lete on 2020/6/16.
*/
//判断移动端设备
browserRedirect();

function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
var html = "<video loop autoplay style='height: 100%;width: 100%;object-fit: cover;'><source src='你的视频地址'></source></video>";
/*添加video*/
document.getElementById("nav").innerHTML += html;

/*打字效果*/
var subtitle = document.getElementById('subtitle')
var i = 0;

function typing() {
var timer = 0;
var str = '不要等到明天,今天就行动起来!!';
if (i <= str.length) {
subtitle.innerHTML = str.slice(0, i++)
timer = setTimeout(typing, 300)

} else {
subtitle.innerHTML = str
clearTimeout(timer)
}
}

typing()
}
}

C:\Hexo-Blog\themes\Butterfly\_config.yml里找到inject:下的bottom:添加

1
- <script src="js/video.js"></script>

当然,你也可以使用gif动态图(这种方法最简单,Lete乐特使用的是视频)

C:\Hexo-Blog\themes\Butterfly\_config.yml里找到default_top_img:添gif图片

参考Lete乐特:

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /img/a.gif

效果:

2020-6-19

添加UP酱

C:\Hexo-Blog\themes\Butterfly\_config.yml里找到inject:下的bottom:引用

1
<script src="https://cdn.jsdelivr.net/gh/lete114/CDN/js/upjiang.js"></script>

效果图

添加公告栏装饰

C:\Hexo-Blog\themes\Butterfly\_config.yml里找到card_announcement:下的content:后面添加

1
<img src="https://cdn.jsdelivr.net/gh/lete114/CDN/Use/my_bg.gif">

效果图

文章作者: Lete乐特
文章链接: https://blog.lete114.top/article/Butterfly-config-2.3.5.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特's Blog
  • alipay
  • wechat

评论