为什么想换风格？
网站第一版采用了 GitHub 风格的极简白底设计——干净、克制、可读性好。但用了一段时间后觉得缺点什么：缺少个性。
极简白底太常见了，几乎每个技术博客都是这个调调。我想试试能不能让 AI 帮我换一套完全不同的视觉风格，同时保持：
- 所有文章内容一字不改
- 构建脚本
build.py的核心逻辑不变 - 目录结构完全不动
简单说就是：只换皮，不换骨。
改了什么？
这次改版一共只动了 7 个文件：
| 文件 | 改动内容 |
|---|---|
style.css |
重写大部分样式，从极简白底改为新拟态（Neumorphism）风格 |
templates/base.html |
新增三态主题切换按钮（跟随系统/浅色/深色） |
templates/index_body.html |
Hero 区域增加圆形头像框和胶囊徽章 |
templates/article_body.html |
调整文章详情页的面板样式 |
templates/list_body.html |
调整列表页布局 |
build.py |
SVG 图标函数替代 emoji，微调图标定义 |
contact/index.html |
联系页面的静态内容微调 |
零改动的文件：content/ 目录下所有 13 篇 Markdown 源文件、deploy-website.sh 部署脚本、.gitignore 规则。
前后对比
这是改版最大的看点。两张截图放在这里，一目了然：
改版前：GitHub 风格极简白底
特征：白色背景、蓝色强调色、emoji 图标、1px 边框卡片、单栏 720px 窄版布局。
改版后：新拟态立体风格
特征：灰蓝色调背景、立体凸起/凹陷阴影、SVG 线性图标、胶囊导航栏、圆形头像框、三态主题切换。
关键变化
1. 从 emoji 到 SVG 图标
旧版用 emoji（📝💬🤖📚）做板块图标，不同系统和浏览器渲染效果不一致。新版改用内联 SVG 线性图标，统一描边宽度和风格，还支持跟随主题变色。
实现方式很简单，在 build.py 里加了一个 svg() 函数：
def svg(paths):
return ('<svg class="ic" viewBox="0 0 24 24" fill="none" '
'stroke="currentColor" stroke-width="2">%s</svg>' % paths)
每个图标就是一小段 SVG 路径字符串，维护起来比找 emoji 方便得多。
2. 三态主题切换
旧版只支持浅色/深色二选一。新版增加了「跟随系统」模式，三种状态循环切换：
跟随系统 → 浅色 → 深色 → 跟随系统 → ...
用 CSS 变量 + data-theme 属性实现，切换按钮本身也是新拟态风格的圆形凸起按钮。
3. 胶囊导航栏
导航栏从传统的「左侧 logo + 右侧链接」变成了居中的胶囊形状（border-radius: 999px），悬浮在页面顶部，带立体阴影。链接 hover 时呈现内凹效果，像是被按下去了一样。
4. CSS 变量体系
新拟态风格的核心是两组阴影变量：
--neu-dark: #c8cdd9; /* 暗阴影 */
--neu-light: #ffffff; /* 亮阴影 */
--shadow-sm: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
所有卡片、按钮、徽章都复用这套变量，改主题时只需要切换变量值，不用动任何组件样式。这就是 CSS 变量的威力。
经验总结
-
模板与内容分离是关键：正因为 build.py 把内容扫描和页面组装分得很清楚，换风格时完全不需要碰 Markdown 源文件。一个好的架构设计，让后续的改造成本降到最低。
-
CSS 变量让换肤变得可行：如果没有变量体系，换一套配色方案意味着要改几十处硬编码的颜色值。有了变量，只需要在
:root和[data-theme]里改几个值。 -
AI 辅助改风格的效率很高：整个改版过程主要是和 AI 对话——描述想要的风格，AI 生成 CSS 和模板代码，我看效果再调整。比手动写 775 行 CSS 快得多。
-
图片功能顺便测试了：这篇文章是第一次在网站上嵌入图片。图片存在独立的 images/ 目录，通过 Markdown 图片语法引用，构建时自动转换为 HTML
<img>标签。