又折騰了一下午的排版

## 又折騰了一下午的排版

本來以為上午把主題搞定就行了，結果下午一看手機上的效果，完全不行。字貼著邊、間距不對、評論區一片白。

問題的根源是 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 的主題。