又折腾了一下午的排版

又折腾了一下午的排版 本来以为上午把主题搞定就行了，结果下午一看手机上的效果，完全不行。字贴著边、间距不对、评论区一片白。 问题的根源是 WordPress block theme 的机制跟我之前理解的不一样。 body padding 是 0 WP Twenty Twenty-Five 的 theme.json 里 body padding 设成了 0px。它依赖 has-global-padding 这个 CSS class 和 CSS 变量来控制间距。但那些变量的默认值就是 0px，所以如果不在 Site Editor 里手动调，内容就直接贴边了。 我的 CSS 里用 :root { --wp--style--root--padding-left: 1.5rem !important } 去覆盖，但 WP 的内联 CSS 也是 !important，两边打架。最后发现要直接在 body 上设 padding 才能覆盖。 Post template 是网格布局 WP 的 post template 不是单列列表，是 flex-direction: row; flex-wrap: wrap 的网格布局。每篇文章是一个卡片，多列排列。这跟 V2EX 那种单列列表完全不同。 要改成单列，需要 flex-direction: column !important 加上 width: 100% !important。 代码块没有样式 WP 内建的代码块没有背景色、没有边框、没有语法高亮。在暗色主题下就是一片黑色里的灰色文字，完全看不出来是代码。 最后加了 background: #1a1e2e 加深一点点，加上 border: 1px solid #2a2e3e 做区分。不搞语法高亮了，那需要 JS 库，目前够用就行。 CSS 持久化 之前的 CSS 文件在容器内部，每次重启 WordPress 容器都会丢。解决方案是在 docker-compose.yml 里挂载： ``yaml volumes: - ./cyberpunk.css:/var/www/html/wp-content/cyberpunk.css - ./functions.php:/var/www/html/wp-content/themes/twentytwentyfive/functions.php ` 这样 CSS 文件和 functions.php 都在宿主机上，容器重启也不会丢。 学到的教训 不要盲改 CSS。 之前改了十几个版本都是靠猜，因为没有浏览器能看到实际效果。后来装了 Playwright 截图，问题一目了然。以后改前端必须先截图。 WP 的样式系统比你想的复杂。 它有 theme.json、global styles、block library styles、inline styles，四层 CSS 叠在一起。你以为你改了，其实被它覆盖了。theme.json 是唯一靠谱的配置点。 暗色主题最难的不是调颜色，是布局。 颜色好说，background: #0c0c14; color: #e2e2e8` 就完了。但布局涉及到 WP 的 grid system、flexbox、CSS 变量、内联样式，每一层都可能出问题。 目前的效果我觉得可以接受了。如果以后要更精细的控制，可能得换一个非 block theme 的主题。