由于版本更新,本篇的内容部分已经不再适用,请自行斟酌

前言

在2021年末,我想搭建一个博客网站,无意间接触了Hexo这样实用的静态博客框架,找到了Butterfly这样好看的主题。因而开始花大把时间去研究。时至今日,在与各位大佬携手共进的过程中,打造出了一个优雅的个人博客网站。

本篇教程基于Butterfly主题3.8.3版本


隐藏首页图

主题配置文件内

1
2
# The banner image of home page
index_img: false

全局背景

你可以选择在主题配置文件内更改背景图片的url

1
2
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url( )

也可以选择通过引入css更改

本站渐变背景css↓

1
2
3
#web_bg {
background: linear-gradient(180deg,#fff1eb,#ace0f9)
}

引入css/js

博客根目录/themes/butterfly/source/css下新建一个xxxxxx.css 或者在博客根目录/themes/butterfly/source/js下新建一个 xxxxxx.js 文件。 Ctrl+CCtrl+V 填入内容。

修改主题配置文件 _config.butterfly.yml

1
2
3
4
5
inject:
head:
- <link rel="stylesheet" href="xxxxxx.css">
bottom:
- <script src="xxxxxx.js"></script>

其中head引入css,bottom引入js

顶部磁吸分类

安装

1
npm i hexo-magnet --save

详细
小冰教程贴

侧边栏时钟

安装

1
npm i hexo-electric-clock --save

详细
小冰教程贴

页脚

1
2
# Footer Background
footer_bg: # true

如果写为true,则会根据当前页面的top_img变化;如果写图片链接,则会呈现图片;如果写的不符合语法,则会呈现主题色。

个人信息栏按钮圆角

1
2
3
4
5
/*GitHub开源圆角*/
#card-info-btn {
border-radius: 7px;
overflow: hidden;
}

Ctrl+CCtrl+V 填入之前新建的css文件内。

侧边小按钮

1
2
3
4
5
6
7
8
9
10
/* 右侧小按钮圆角 */
#rightside>div>button,#to_comment {
margin-right: 4px;
border-radius: 7px;
}

/*侧边滑动颜色*/
:root {
--btn-bg: #3a87b9;
}

Ctrl+CCtrl+V 填入之前新建的css文件内。

底部切换页面按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
/*底部切换按钮*/
.layout>.recent-posts .pagination>* {
display: inline-block;
margin: 0 6px;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
}

/*底部圆角*/
#pagination .page-number.current {
border-radius: 7px;
}

Ctrl+CCtrl+V 填入之前新建的css文件内。

首页文章卡片高度

1
2
3
#recent-posts > .recent-post-item {
height: 20em;
}

其中更改“20”,数字越高,卡片越高。

Ctrl+CCtrl+V 填入之前新建的css文件内。

简洁侧边栏

主题配置文件内

1
2
3
4
5
# toc (目錄)
toc:
enable: true
number: true
style_simple: true

博客根目录/themes/butterfly/source/img中更换favicon.png;404图片同理。在更换logo图片时建议使用PS调整为32×32并添加圆角。

网站速度优化

压缩图片

压缩图片,减少负载

异步加载

当css/js过多时,会拖慢网站加载速度,这时可以使用异步加载进行整合优化。
糖果屋教程

特别鸣谢