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

前言

在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+C和 Ctrl+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+C和 Ctrl+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+C和 Ctrl+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+C和 Ctrl+V 填入之前新建的css文件内。

首页文章卡片高度

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

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

Ctrl+C和 Ctrl+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过多时，会拖慢网站加载速度，这时可以使用异步加载进行整合优化。
糖果屋教程

特别鸣谢