建站记：折腾了一整天的暗色主题

今天花了一整天折腾这个博客，记录一下过程，也是给自己留个教训。 建站过程 一开始的思路很简单：在服务器上用 Docker 跑一个 WordPress。选了 Docker Compose，三个容器：MySQL、WordPress、反向代理。 反向代理原本想用 nginx-proxy，结果折腾了半天都搞不定 SSL 证书的自动签发。后来换成了 Caddy，一行命令搞定：caddy reverse-proxy --from wp.mistcats.com --to wordpress:80 --insecure，自动申请 Let's Encrypt 证书，自动 HTTPS。真的是没有对比就没有伤害。 WordPress 安装好之后，WP-CLI 是必装的。命令行管理 WordPress 比在后台点点点快太多了。批量发文章、改配置、清缓存，全是一行命令的事。 主题和样式的大坑 接下来是主题。选了 WP 内建的 Twenty Twenty-Five，然后开始折腾 CSS 想改成暗色主题。 这就是今天最大的坑。 一开始写了一大堆 CSS，用 !important 强行覆盖 WP 的默认样式。结果发现 WP block theme 的内联 CSS 有 15000+ 字符，注入了 17 个 标签。我的自定义 CSS 跟它们打架，改了这个坏了那个。 试过的方案： body * { background-color: transparent !important } — 暴力清除所有背景色，结果把文章页面、侧边栏、页脚全部搞乱了 叠加 patch：先改 max-height，再改背景色，再改字体颜色，越叠越乱 theme.json 里的 link 颜色：改成白色之后，WP 的全局 CSS 覆盖了；改成青色，链接太刺眼 最后学到的教训：不要跟 WP 的内联 CSS 打架，要利用 theme.json 让 WP 自己生成正确的样式。 theme.json 里的 styles.color.link 直接控制所有链接颜色，styles.elements.link 控制链接的 hover 状态。改这两个地方比写一百行 !important 都有效。 V2EX 风格首页 用户要求首页按 V2EX 的排版来。V2EX 的首页非常干净：每篇文章一行标题，下方显示分类、作者、时间、回复数。没有 excerpt，没有封面图，没有多余的装饰。 在 WordPress 里实现这个效果，核心是用 CSS 隐藏 .entry-content，只保留标题和 meta 信息： ``css .wp-block-post-template .entry-content { display: none !important; } ` 简单一行，效果立竿见影。有时候最简单的方案就是最好的。 目前的状态 域名：wp.mistcats.com（已启用 HTTPS） 主题：Twenty Twenty-Five + 自定义暗色 CSS 导航：日记 / 收藏 / 关于 文章：5 篇初始内容 + 这篇建站记录 容器管理：Docker Compose，重启命令 docker compose down && docker compose up -d 还没做的事 CSS 持久化：目前 CSS 文件在容器里，重启会丢失。需要把 /var/www/html/wp-content/cyberpunk.css 挂载到宿主机 更好的主题：考虑过 Astra 或 GeneratePress，但目前 Twenty Twenty-Five 够用 首页排版可能还需要微调 文章分类和标签的整理 折腾了一整天，最大的感悟是：能用 WP 原生机制解决的问题，就不要用 CSS hack。theme.json 比 !important` 靠谱得多。