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

前言

在今年年初时，我曾把过去魔改的内容记录成了文章：魔改美化教程壹。半年过去，除了小修bug外没再有新的博客优化工作出现。今天抽了一整天时间，将我的博客进一步美化，打磨访客轻体验。

本篇教程基于Butterfly主题3.8.3版本（养老版本☺）

本篇优化方案均采用外挂css方式

全局字体修改

修改字体通常有两种方式：本地引入和外链引入。因为本地引入通常会非常拖慢速度，故本篇教程不在提供本地引入的方法，如需可阅读 字体修改-Ordis博客 。
外链引入在css文件内添加如下代码

1
2
3
4
5
@font-face {
	font-family: Yourfontname;
        font-display: swap;
	src: url('https://xxxxxxxxxxxxx.woff') format('woff');
}

其中font-family为你所引入字体的名称，可自定义。url为要引入字体的链接，不建议使用jsdelivr进行加速，否则你会得到一个和放在本地差不多的响应速度。format为你所引入字体的类型，如不清楚可以下载下来看文件管理器内所标注的类型或者使用百度。
接下来在配置文件_config.butterfly.yml内找到

1
2
3
4
5
font:
  global-font-size: 16px # 字体大小
  code-font-size:
  font-family: Yourfontname, "Microsoft YaHei", "PingFang SC" # 全局字体
  code-font-family: Yourfontname, "Microsoft YaHei", "PingFang SC" # 代码字体

按如上填入。

文章页卡片宽幅占比

文章卡片在整体页面占比即左右边距

1
2
3
4
/*文章页卡片宽幅占比*/
.layout {
            max-width: 1280px;
      }

文章卡片圆角

如目录3图所示圆角

1
2
3
4
/*文章页卡片圆角*/
.layout > div:first-child:not(.recent-posts) {
  border-radius: 35px;
}

文章页信息栏美化

字体增大，字间距增大，位置高度调整

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
/*文章页信息栏美化*/
#post-info .post-title {
  font-weight: 600; /*字体粗细*/
  font-size: 2.5em; /*字体大小*/
  line-height: 2.2; /*元素高度*/
  letter-spacing: 9px; /*字体间距*/
}

/*信息栏高度调整*/
#page-header.post-bg {
  height: 26rem;
}

/*Web端信息栏适配*/
@media screen and (min-width: 421px){
  #page-header #post-info {
    bottom: 8rem;
}
}

/*Wap端信息栏适配*/
@media screen and (max-width: 420px){
  #page-header #post-info {
    bottom: 2rem;
}
}

顶栏美化

字体加粗，调整间距，简洁ui

主题配置文件_config.butterfly.yml内找到menu，将后面的icon图标删除。
并在css文件内添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
/*顶栏美化*/
#nav .site-page {
  font-size: 0.79em; /*字体大小*/
  letter-spacing: 3px; /*字体间距*/
  font-weight: 600; /*字体粗细*/
}

#nav {
  height: 70px; /*顶栏高度调整*/
}
#page-header.nav-fixed #nav {
  top: -70px; /*顶栏调整空缺补齐*/
}

文章页目录卡片圆角

圆角

1
2
3
4
`/*文章页目录卡片圆角*/`
#aside-content .card-widget {
border-radius: 20px;
}

文章页目录美化

如目录7图所示

1
2
3
4
/*文章页目录美化*/
#aside-content .card-widget {
  padding: 2rem 1.2rem; /*前者为上下边距，后者为左右边距*/
}

调宽页脚

增加页脚文字上下边距

1
2
3
4
/*调宽页脚*/
#footer-wrap {
  padding: 3rem 2rem; /*前者为上下边距，后者为左右边距*/
}

为什么这么调整

  • 本篇美化方案优化了Web端的阅读体验，采用平铺的方式提高显示利用面积。
  • 本篇美化方案提高了文字的粗度，提升了可读性
  • 本篇美化方案加强了对市面上主流设备的适应度，改进了UI设计