Volantis 博客赛博朋克主题样式与头像加载问题的排查记录
本文记录了我在使用 Hexo + Volantis 主题搭建赛博朋克风格博客过程中，进行样式自定义和头像加载问题排查的过程。
🌌 博客整体风格设定（赛博朋克）
我为博客配置了一套基于深蓝紫夜色 + 霓虹光效的赛博朋克视觉主题，主要特性包括：
🎨 页面颜色主题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| :root {
--bg-color: #0f0f1a;
--accent-color: #ff00ff;
--primary-color: #00ffff;
--text-color: #e0e0e0;
--card-color: #1a1a2e;
}
body,
.page,
.header,
.footer,
.main {
background-color: var(--bg-color) !important;
color: var(--text-color) !important;
font-family: "Orbitron", "Roboto Mono", monospace;
}
|
🧊 毛玻璃与卡片样式
1
2
3
4
5
6
7
8
9
10
11
12
| .blur {
background: rgba(15, 15, 30, 0.6) !important;
backdrop-filter: saturate(180%) blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.card,
.flat-box,
.white-box {
box-shadow: 0 0 12px rgba(0, 255, 255, 0.1);
border-radius: 12px;
}
|
🔠 封面标题与副标题（霓虹描边）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .cover-wrapper .cover-body .title {
color: #ffffff;
text-shadow:
0 0 5px #0ff,
0 0 10px #0ff,
0 0 15px #09f,
0 0 20px #90f;
}
.cover-wrapper .cover-body .subtitle {
color: #ffffff;
text-shadow:
0 0 4px #fff,
0 0 8px #f0f,
0 0 12px #f0f;
}
|
🧭 顶栏与侧边栏
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
| #l_header {
background: linear-gradient(to right, #1f0036, #000f3f) !important;
box-shadow: 0 0 15px var(--accent-color);
}
#l_side {
background-color: #111120 !important;
color: #e0e0e0 !important;
}
#l_side .widget,
#l_side .content,
#l_side .webinfo-item {
background-color: transparent !important;
color: inherit;
border: none;
}
#l_side h2,
#l_side .text p,
#l_side .webinfo-item div {
color: #e0e0e0 !important;
}
#l_side a {
color: #00ffff;
text-decoration: none;
}
#l_side a:hover {
color: #ff00ff;
text-shadow: 0 0 5px #ff00ff;
}
|
📖 正文样式
1
2
3
4
5
6
7
8
9
10
| article {
color: #d0d0d0 !important;
line-height: 1.8;
font-size: 16px;
font-family: "Roboto Mono", "Fira Code", monospace;
}
#l_main > section > div {
color: #f0f0f0 !important;
text-shadow: 0 0 1px #00ffff;
}
|
🔍开启暗黑模式
由于背景变为了黑色，文章标题的字体变得很难辨认，所以，需要在_config.yml中开启暗黑模式：
🖼 头像加载错误问题的排查过程
我遇到一个 bug：文章页面下方出现了默认作者头像和提示“请设置文章作者”，而我已经在 _config.yml 中配置了作者信息：
1
2
3
4
| meta_library:
author:
name: 赛博鲸鱼
|
排查过程如下：
❌ 问题表现
- 页面 HTML 渲染出默认头像路径：
https://unpkg.com/volantis-static@.../apple-touch-icon.png
<p>请设置文章作者</p> 被插入文章页底部
🔍 根因分析
meta_library.author.avatar 字段 被注释了- Volantis 渲染作者头像时未能获取路径，退回默认配置
✅ 解决方案
取消注释或正确设置：
1
2
3
4
| meta_library:
author:
name: 赛博鲸鱼
avatar: /images/website/avatar.png
|
或使用多人模式，在 source/_data/author.yml 中定义作者：
1
2
3
4
| 赛博鲸鱼:
name: 赛博鲸鱼
avatar: /images/website/avatar.png
url: /about/
|
并在文章 front-matter 中加：
最终，博客顺利恢复了头像显示，整体风格也呈现出我所期望的霓虹与深夜赛博感。
