今天是周日，原本只是想微调一下博客（caibin.net）的首页样式，结果一不小心陷入了长达数小时的 CSS “重构深渊”。
对于我们这种技术博主来说，博客的前端样式就像穿衣风格。太素了觉得简陋，太花哨了又觉得喧宾夺主。今天的改造经历了一个有趣的“反向进化”过程：从追求现代感的 Apple 风格，最终回归到了最原始、最硬核的 终端（Terminal）风格。
1. 试错：当“高级感”变得乏味
起初，我想走流行的 Apple Style（果味风格）。 上了大量的毛玻璃（Backdrop Blur）、超大圆角、加上了阴影悬浮效果。乍一看确实很有“科技感”，像是在浏览 macOS 的设置界面。
但很快我就发现了问题：
- 信息密度低：为了迁就卡片设计，浪费了大量屏幕空间。
- 气质不符：我的博客内容多是 Linux 服务器、跨境电商干货、脚本代码。这种“软糯”的 UI 风格，和硬核的内容产生了违和感。
- 视觉空洞：在大屏幕下，简单的卡片布局显得过于稀疏，缺乏一种“扎实”的阅读体验。
2. 回归：Digital Brutalism（数字野兽派）
经过几轮调整，我意识到我真正需要的不是“好看”，而是**“像代码一样纯粹”**。
于是，我删除了所有花里胡哨的圆角和阴影，拥抱了 Terminal Style。
- 配色：背景采用 GitHub Dark Dimmed 风格的深灰黑（
#0d1117），文字采用终端默认的灰白。 - 字体：强制全局使用等宽字体（Monospace），无论是标题还是正文，都像是在 IDE 里写代码。
- 布局：收紧宽度到 780px，去除多余留白，强调信息的高密度。
- 交互：鼠标悬停时，左侧亮起蓝色光标，不仅是装饰，更是“选中”的隐喻。
3. 干货：最终版 CSS 代码
如果你也喜欢这种类似 VS Code 界面的极简风格，可以将以下代码添加到 WordPress 的 外观 -> 自定义 -> 额外 CSS 中。
这套代码已经解决了头部间距过大、移动端适配以及深色模式下的阅读体验问题：
CSS
/* =========================================
1. 核心基调：GitHub Dark Dimmed 质感
========================================= */
:root {
--bg-color: #0d1117; /* 深灰黑底 */
--text-main: #c9d1d9; /* 终端白字 */
--text-dim: #8b949e; /* 注释灰 */
--accent: #58a6ff; /* 链接蓝 */
--border: #30363d; /* 边界线 */
--hover-bg: #161b22; /* 悬停高亮 */
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
line-height: 1.6;
letter-spacing: -0.015em;
-webkit-font-smoothing: antialiased;
}
/* =========================================
2. 布局容器：收紧宽度至 780px
========================================= */
#page, #main, .site-content, #content {
max-width: 780px;
margin: 0 auto;
padding: 10px 20px 40px !important;
background: transparent;
margin-top: 0 !important;
}
/* =========================================
3. 头部：精密仪表盘风格
========================================= */
header, #masthead, .site-header {
padding-top: 25px !important;
padding-bottom: 20px !important;
margin-bottom: 20px !important;
border-bottom: 1px solid var(--border);
min-height: 0 !important;
}
/* 清除默认间距 */
.site-branding, .site-title, .custom-logo-link, .main-navigation {
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
/* =========================================
4. 文章列表：命令行交互感
========================================= */
article, .post-container {
padding: 20px 15px;
margin-bottom: 0;
border-bottom: 1px solid var(--border);
border-left: 3px solid transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
article:first-child { border-top: 1px solid var(--border); }
/* 悬停光效 */
article:hover {
background-color: var(--hover-bg);
border-left-color: var(--accent);
cursor: pointer;
}
/* 标题前的 >_ */
article h2 a::before {
content: ">_ ";
color: var(--accent);
opacity: 0.7;
margin-right: 2px;
}
/* 胶囊化标签 */
.entry-meta a {
background: rgba(56, 139, 253, 0.1);
color: var(--accent);
padding: 2px 8px;
border-radius: 4px;
text-decoration: none;
font-size: 0.75rem;
}
/* =========================================
5. 底部状态栏
========================================= */
footer {
border-top: 1px double var(--border);
margin-top: 40px;
padding: 20px 0;
color: #484f58;
font-size: 0.8rem;
display: flex;
justify-content: space-between;
}
footer::after {
content: "● ONLINE";
color: #2ea043;
font-size: 10px;
letter-spacing: 1px;
}
4. 遇到的坑与细节配置
关于头部间距的“暴力”修复 很多 WordPress 主题为了美观，给 Header 设置了巨大的 min-height 或 padding。在这次改造中，我使用了大量的 !important 强行覆盖了原有样式，确保分割线（border-bottom）能紧贴着导航栏，不再有那种“漏风”的感觉。
PDF 插件的适配 由于文章宽度被限制在了 780px，为了让嵌入的 PDF 文档（比如行业报告）看起来更协调，我在 PDF Embedder 插件中使用了以下设置：
- Width:
max(自动填满容器) - Height:
600(固定高度，千万别设 max，否则会消失) - Toolbar:
Bottom+On Hover(仅悬停显示，保持极简)
写在最后
现在的博客看起来不再像是一个“网站”，而更像是一个 Log 文件 或者 终端窗口。
这种风格可能不讨好所有人，但对于习惯在黑色背景下敲击键盘的人来说，这才是最舒适的阅读界面。折腾完毕，收工。