从默认主题到蓝色玻璃风

小镇炼丹师 Lv2
  2026-08-09 10:24:42 2026-08-09 10:24:42 创建   2026-08-09 10:28:55 2026-08-09 10:28:55 更新      

这次继续折腾自己的 Hexo 博客，目标是在尽量不修改 Redefine 主题源码的前提下，做出一套偏蓝色的玻璃拟态界面。

最终保留了主页的浅蓝玻璃卡片，文章正文使用纯白色保证阅读体验，友链、分类等页面使用更轻的半透明效果，同时统一了全站背景、代码块和页脚样式。

一、为什么不直接修改主题源码

Redefine 主题安装在：

1
node_modules/hexo-theme-redefine

直接修改这里虽然可以立即看到效果，但以后执行 npm install、更新主题或重新安装依赖时，修改很容易丢失。

更合适的方法是把自定义样式放在 Hexo 的 source 目录：

1
/mnt/data/hexo-blog/source/css/glass-rain.css

Hexo 构建后，它会自动变成：

1
/css/glass-rain.css

这样主题和自定义样式互相独立，后续维护方便很多。

不要直接修改 public/css。public 是构建产物，执行 hexo clean 后会被删除。

二、让 Redefine 加载自定义 CSS

打开博客根目录下的 _config.redefine.yml，找到 inject 配置：

1
2
3
4
5
inject:
  enable: true
  head:
    - '<link rel="stylesheet" href="/css/glass-rain.css">'
  footer: []

保存后，可以先在本地检查：

1
2
3
4
cd /mnt/data/hexo-blog
npx hexo clean
npx hexo generate
npx hexo server -i 0.0.0.0

浏览器能够直接打开下面这个地址，就说明文件已经被正确加载：

1
http://服务器地址:4000/css/glass-rain.css

三、先定义统一的玻璃参数

把颜色、阴影和圆角写成 CSS 变量，后面调整配色时只需要改一处：

1
2
3
4
5
6
7
:root {
  --rain-glass-bg: rgba(184, 220, 242, 0.48);
  --rain-glass-bg-strong: rgba(203, 232, 249, 0.62);
  --rain-glass-border: rgba(220, 244, 255, 0.70);
  --rain-glass-shadow: 0 12px 36px rgba(14, 56, 92, 0.22);
  --rain-glass-radius: 20px;
}

玻璃拟态主要依靠四个属性：

  • 半透明背景色；
  • backdrop-filter 背景模糊；
  • 较浅的边框；
  • 柔和的外阴影和内高光。

四、设置全站背景

背景图片放在：

1
source/images/site/blue-background.jpg

对应的 CSS 地址就是：

1
/images/site/blue-background.jpg

使用下面的样式让背景覆盖整个网站，而不只是主页：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html {
  min-height: 100%;
  background: #7894ad url('/images/site/blue-background.jpg')
              center center / cover fixed no-repeat !important;
}

body {
  min-height: 100vh;
  background: rgba(94, 124, 150, 0.10) !important;
}

#app,
#swup,
.page-container,
.main-content,
.main-content-container,
.home-content-container,
.post-content-container {
  background: transparent !important;
}

这里的 !important 很重要。Redefine 自带的样式可能在自定义 CSS 之后再次给 html 设置白色背景，如果优先级不够，主页正常而文章页只会显示纯色。

五、美化主页卡片

Redefine 2.9.0 主页文章的实际选择器是 .home-article-item，头像资料卡和链接卡分别是 .sidebar-content 与 .sidebar-links：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html body li.home-article-item,
html body div.sidebar-content,
html body div.sidebar-links {
  background-color: var(--rain-glass-bg) !important;
  background-image: linear-gradient(
    135deg,
    rgba(225, 244, 255, 0.42),
    rgba(150, 205, 236, 0.26)
  ) !important;
  border: 1px solid var(--rain-glass-border) !important;
  border-radius: var(--rain-glass-radius) !important;
  box-shadow: var(--rain-glass-shadow),
              inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
}

有一个容易误判的元素叫 .home-sidebar-container。它是整列布局容器，不是一张卡片。如果直接给它添加玻璃背景，左侧会出现一个贯穿页面的大框。

因此要把它明确恢复为透明：

1
2
3
4
5
6
7
8
html body .home-sidebar-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

六、友链、分类和标签页面

友链页外层有一个 .page-template-container。它默认是白色，会把全站背景完全遮住。

1
2
3
4
5
6
7
8
9
10
11
12
13
html body div.page-template-container {
  background-color: rgba(224, 241, 251, 0.52) !important;
  background-image: linear-gradient(
    135deg,
    rgba(244, 251, 255, 0.42),
    rgba(190, 224, 244, 0.20)
  ) !important;
  border: 1px solid rgba(231, 247, 255, 0.72) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 32px rgba(14, 56, 92, 0.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}

如果其他独立页面也存在白色遮罩，可以用浏览器开发者工具查看具体类名，再把真正的内容容器加入规则。不要对所有 div 使用通用透明样式，否则很容易破坏主题布局。

七、文章正文保持纯白

玻璃效果适合主页卡片，但正文较长时，透明背景会影响文字和代码的可读性。因此我最后让文章正文与目录恢复为纯白色：

1
2
3
4
5
6
7
8
9
html body div.article-content-container,
html body div.toc-content-container {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: var(--border-color, rgba(229, 231, 235, 0.92)) !important;
  box-shadow: 0 8px 24px rgba(30, 55, 80, 0.10) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

这样既保留了外部的蓝色背景，又不会让正文区域显得杂乱。

八、修复代码行号栏变蓝

Hexo 生成的代码块内部使用了 table。如果为了美化普通表格，直接写下面这种规则：

1
2
3
table {
  background: rgba(203, 232, 249, 0.62);
}

代码块的行号栏也会一起变蓝，看起来非常突兀。

因此不要使用过于宽泛的 table 选择器，并为代码块单独恢复中性色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html body figure.highlight,
html body figure.highlight table,
html body figure.highlight td.code,
html body figure.highlight td.code pre {
  background-color: #fdfdfd !important;
  background-image: none !important;
}

html body figure.highlight td.gutter,
html body figure.highlight td.gutter pre {
  background-color: #f5f6f7 !important;
  background-image: none !important;
  border-color: #e5e7eb !important;
}

其中 .gutter 就是代码左侧的行号区域。

九、给页脚添加独立卡片

背景图启用后，页脚文字直接显示在图片上可能看不清，因此给文章页和友链页共用的页脚增加一张白色半透明卡片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html body .main-content-footer footer.footer,
html body footer.footer {
  width: calc(100% - 40px) !important;
  max-width: 1200px !important;
  margin: 24px auto !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(14, 56, 92, 0.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

十、适配手机端

手机浏览器对固定背景和大范围模糊的支持不完全一致，性能也比电脑更敏感。可以在小屏幕下降低模糊程度，并关闭固定背景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media (max-width: 768px) {
  html {
    background-attachment: scroll !important;
    background-position: 56% center !important;
  }

  html body li.home-article-item,
  html body div.sidebar-content,
  html body div.sidebar-links {
    background-color: rgba(194, 226, 245, 0.60) !important;
    -webkit-backdrop-filter: blur(13px) saturate(125%) !important;
    backdrop-filter: blur(13px) saturate(125%) !important;
  }
}

正文的纯白规则不要放进这段蓝色卡片规则中，否则手机端文章会重新变成蓝色。

十一、解决 Cloudflare Pages 缓存

修改 CSS 后，本地文件明明已经变化，线上页面却可能仍然加载旧版本。这通常不是选择器的问题，而是浏览器或 Cloudflare 缓存。

本次只保留一个样式文件：

1
glass-rain.css

确认 _config.redefine.yml 始终引用这个文件：

1
2
3
4
5
inject:
  enable: true
  head:
    - '<link rel="stylesheet" href="/css/glass-rain.css">'
  footer: []

部署完成后，直接访问下面的地址检查内容：

1
https://你的域名/css/glass-rain.css

确认文件内容是最新的，再按 Ctrl + F5 强制刷新页面。如果仍然显示旧样式，可以在浏览器开发者工具中勾选“停用缓存”后重新加载，或者在 Cloudflare 控制台清理该域名的缓存。

十二、推送到 Cloudflare Pages

确认样式无误后提交到 GitHub：

1
2
3
4
5
cd /mnt/data/hexo-blog

git add -A
git commit -m "添加 Redefine 自定义玻璃样式"
git push

Cloudflare Pages 检测到新的 Git 提交后会自动构建并发布。

本次最终使用的完整样式文件也可以直接查看：

查看 glass-rain.css

总结

这次美化最费时间的并不是调颜色，而是确认每个页面真正使用了什么容器，以及哪些主题规则覆盖了自定义样式。

几个比较重要的经验是：

  1. 自定义文件放在 source/css，不要修改 public 和 node_modules；
  2. 主页、文章、友链和页脚分别设置，不要用过于宽泛的选择器；
  3. 文章正文优先保证阅读体验，玻璃效果不必覆盖所有区域；
  4. Hexo 代码块内部使用表格，通用 table 样式很容易误伤行号栏；
  5. 线上效果没有变化时，先确认实际加载的 CSS 地址和内容，再检查选择器；
  6. Cloudflare Pages 部署后要确认线上 CSS 内容，必要时强制刷新或清理缓存。

自定义主题不一定要大改模板。只要把页面拆成背景、导航栏、主页卡片、正文、代码块和页脚几个组件，再逐个处理，就可以在保持主题可升级的同时，做出比较完整的个人风格。

  • 标题: 从默认主题到蓝色玻璃风
  • 作者: 小镇炼丹师
  • 创建于 : 2026-08-09 10:24:42
  • 更新于 : 2026-08-09 10:28:55
  • 链接: https://www.lideguo.com/2026/08/09/博客搭建/从默认主题到蓝色玻璃风/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
从默认主题到蓝色玻璃风
  1. 一、为什么不直接修改主题源码
  2. 二、让 Redefine 加载自定义 CSS
  3. 三、先定义统一的玻璃参数
  4. 四、设置全站背景
  5. 五、美化主页卡片
  6. 六、友链、分类和标签页面
  7. 七、文章正文保持纯白
  8. 八、修复代码行号栏变蓝
  9. 九、给页脚添加独立卡片
  10. 十、适配手机端
  11. 十一、解决 Cloudflare Pages 缓存
  12. 十二、推送到 Cloudflare Pages
  13. 总结