样式自定义实战

概述

本文档记录了本博客样式自定义的实战过程，包括上一篇/下一篇导航、页脚、顶部区域等组件的样式调整方法。

Butterfly 主题样式自定义方式

方式一：主题配置文件（推荐）

在 _config.butterfly.yml 中修改主题颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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"  # 引用背景色
  scrollbar_color: "#49b1f5" # 滚动条颜色

方式二：自定义 CSS 文件

  1. 在 _config.butterfly.yml 中配置注入：
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
  1. 创建 source/css/custom.css 文件编写自定义样式

实战案例：上一篇/下一篇导航

问题描述

Butterfly 主题默认的上一篇/下一篇导航使用纯色背景，视觉效果单调。

解决方案

通过自定义 CSS 实现背景图 + 磨砂玻璃效果。

最终代码

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/* =================================================
   文章页底部：上一篇/下一篇 背景图+磨砂质感
   ================================================= */

/* 基础样式 */
.pagination-related {
    position: relative !important;
    overflow: hidden !important;
}

/* 白天模式 */
html:not([data-theme="dark"]) .pagination-related {
    background: 
        url('https://picsum.photos/800/200?random=1') center/cover no-repeat !important;
}

/* 白天模式遮罩+轻微磨砂 */
html:not([data-theme="dark"]) .pagination-related::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 1 !important;
}

/* 晚上模式 */
html[data-theme="dark"] .pagination-related {
    background: 
        url('https://picsum.photos/800/200?random=2') center/cover no-repeat !important;
}

/* 晚上模式遮罩+轻微磨砂 */
html[data-theme="dark"] .pagination-related::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 1 !important;
}

/* 内容层级 */
.pagination-related > * {
    position: relative !important;
    z-index: 2 !important;
}

/* 文字颜色 */
.pagination-related .info .info-item-1 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.pagination-related .info .info-item-2 {
    color: #fff !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* 隐藏封面图 */
.pagination-related .cover {
    display: none !important;
}

效果说明

模式背景遮罩磨砂
白天picsum.photos 随机图rgba(255,255,255,0.2)blur(3px)
晚上picsum.photos 随机图rgba(0,0,0,0.3)blur(3px)

CSS 属性解释

backdrop-filter

1
2
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);  /* Safari 兼容 */
  • blur(3px)：轻微模糊，数值越大越模糊
  • 建议范围：2px - 5px（轻微效果）

遮罩透明度

1
2
background: rgba(255, 255, 255, 0.2);  /* 白天 */
background: rgba(0, 0, 0, 0.3);        /* 晚上 */
  • 0.1：几乎透明
  • 0.2：轻微遮罩（推荐）
  • 0.3：中等遮罩
  • 0.5：较重遮罩

z-index 层级

1
2
.pagination-related::before { z-index: 1; }  /* 遮罩层 */
.pagination-related > * { z-index: 2; }      /* 内容层 */

确保内容在遮罩层之上显示。

其他样式自定义案例

页脚样式

1
2
3
4
5
6
7
8
9
10
/* 去除页脚蓝色背景 */
#footer {
  background: transparent !important;
  padding: 10px 0 !important;
  min-height: auto !important;
}

#footer-bar {
  padding: 10px 0 !important;
}

顶部区域透明效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 顶部背景透明 */
#page-header {
    background-color: transparent !important;
}

/* 白天模式：轻微白色遮罩 */
html:not([data-theme="dark"]) #page-header::before {
    background-color: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(2px);
}

/* 晚上模式：轻微黑色遮罩 */
html[data-theme="dark"] #page-header::before {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px);
}

调试技巧

1. 浏览器开发者工具

按 F12 打开开发者工具：

  • Elements 面板：查看 HTML 结构和 CSS 样式
  • Styles 面板：查看生效的 CSS 规则
  • Computed 面板：查看最终计算的样式值

2. 实时修改样式

在 Styles 面板中可以直接修改 CSS 值，实时预览效果。

3. 查找选择器

右键点击元素 → 检查（Inspect），找到正确的 CSS 选择器。

4. 清除缓存

修改 CSS 后需要清除浏览器缓存：

  • Windows/Linux：Ctrl + Shift + R
  • Mac：Cmd + Shift + R

5. 检查 CSS 是否加载

在 Network 面板中搜索 custom.css，确认文件已加载。

选择器优先级

当样式不生效时，可能是优先级问题。解决方法：

1
2
3
4
5
6
7
8
9
/* 方法1：使用 !important */
.pagination-related {
    background: red !important;
}

/* 方法2：增加选择器权重 */
html:not([data-theme="dark"]) .pagination-related {
    background: red;
}

常用资源

注意事项

  1. ** !important 谨慎使用**：只在必要时使用，避免覆盖其他样式
  2. 浏览器兼容性：backdrop-filter 需要 -webkit- 前缀支持 Safari
  3. 性能影响：过多的 backdrop-filter 可能影响页面性能
  4. 日夜模式：使用 html:not([data-theme="dark"]) 和 html[data-theme="dark"] 区分模式
  5. 缓存问题：修改 CSS 后务必清除浏览器缓存