起因
想看看不同设计风格长什么样，就让 AI 一次性生成了 20 种风格 的单文件 HTML demo——极简主义、玻璃拟态、赛博朋克、复古像素、蒸汽波、粗野主义……每种风格一个独立页面，全部自包含、零外部依赖，双击就能打开。
放哪？为什么是工具箱
网站的内容模块里，只有 工具箱 是专门收"自己写的 HTML 小工具"的（build.py 中 tools 模块的类型是 html）。这 20 个 demo 恰好全是独立 HTML 文件，放工具箱最合适。
但工具箱的列表页会从 content/tools/ 自动扫描条目——如果直接把 20 个文件丢进去，列表会被一堆英文文件名（01-minimalism）挤爆。所以换了个思路：
新建顶层静态目录 styles/，在工具箱列表页加一个入口卡片，指向风格库主页。
这样访问路径变成：主页 → 工具箱 → 网站风格demo → demo主页 → 各个 demo，层级清晰，后续新增风格只需要往 styles/ 丢文件。
怎么部署的
1. 复制文件
把工作区的 website-styles/ 下 21 个文件（总览页 + 20 个风格页）整体复制到网站仓库的 cloud-server/website/styles/。这个目录不在 .gitignore 排除范围内，部署脚本的 rsync 会原样同步上线。
2. 修改 build.py
gen_list_page 函数里，工具箱列表页本来就有一个"足迹地图"入口的硬编码先例（../footprint/），照葫芦画瓢加一条指向 ../styles/ 的入口卡片：
# 工具箱列表页：追加网站风格demo入口（静态目录 /styles/，相对路径 ../styles/）
if mid == 'tools':
content_html = (' <a href="../styles/" class="content-list-item">'
'<div class="content-list-item-title">网站风格demo</div>'
'<div class="content-list-item-meta">20 种风格</div>'
'<div class="content-list-item-summary">20 种网页设计风格的单文件演示，每种风格一个独立页面。</div>'
'</a>\n' + content_html)
3. 构建 + 部署
本地 python build.py 验证列表页生成正常后，git 提交推送，服务器上重新构建并执行部署脚本：
cd ~/hya-codebase/cloud-server/website && python3 build.py && bash ~/hya-codebase/cloud-server/deploy-website.sh
rsync 把 styles/ 全部 21 个文件和新的 tools/index.html 同步到 /var/www/huyian/，部署完成。
20 种风格清单
| 编号 | 风格 | 链接 |
|---|---|---|
| 01 | 极简主义 Minimalism | styles/01-minimalism.html |
| 02 | 玻璃拟态 Glassmorphism | styles/02-glassmorphism.html |
| 03 | 新拟态 Neumorphism | styles/03-neumorphism.html |
| 04 | 赛博朋克 Cyberpunk | styles/04-cyberpunk.html |
| 05 | 复古像素 Retro Pixel | styles/05-retro-pixel.html |
| 06 | 孟菲斯 Memphis | styles/06-memphis.html |
| 07 | 瑞士国际主义 Swiss | styles/07-swiss-grid.html |
| 08 | 日式侘寂 Wabi-sabi | styles/08-wabi-sabi.html |
| 09 | 蒸汽波 Vaporwave | styles/09-vaporwave.html |
| 10 | 粗野主义 Brutalism | styles/10-brutalism.html |
| 11 | 杂志编辑风 Editorial | styles/11-editorial.html |
| 12 | 流体渐变 Gradient | styles/12-gradient-fluid.html |
| 13 | 等距 3D Isometric | styles/13-isometric.html |
| 14 | 手绘插画 Hand-drawn | styles/14-hand-drawn.html |
| 15 | 企业商务 Corporate | styles/15-corporate.html |
| 16 | 滚动叙事 Scrollytelling | styles/16-scroll-story.html |
| 17 | 拼贴艺术 Collage | styles/17-collage.html |
| 18 | 极繁主义 Maximalism | styles/18-maximalism.html |
| 19 | 终端命令行 Terminal | styles/19-terminal.html |
| 20 | 有机自然 Organic | styles/20-organic-nature.html |
完整地址：https://huyian.cn/styles/（demo 主页），每个链接前面拼上 https://huyian.cn/。
经验小结
- 静态 demo 进独立目录：不经过 build.py 的内容扫描，文件即上线，比塞进
content/干净 - 入口卡片用现成先例：footprint 已经证明这条路走得通，新增入口照抄即可
- 部署前必须 push：服务器执行的是服务器仓库的副本，改完记得 git push 再部署