前言

在今年年初时,我曾把过去魔改的内容记录成了文章:魔改美化教程壹。半年过去,除了小修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设计