MacCMS 模板更新後字體或按鈕沒變：分清CSS請求與瀏覽器快取

模板更新後，首頁標題已換，按鈕顏色和字體卻完全沒變。這時先追瀏覽器實際載入的 CSS：HTML 用了哪個樣式網址、那個網址回來什麼內容、目標元素最後採用了哪條規則。先回答這三件事，再決定是否處理快取。

從出問題的那一頁找 CSS 網址

打開需要調整的頁面，在電腦 Chrome 按 F12，切到 Network／網路，再重新整理。選 CSS 篩選，點開樣式檔，看完整 Request URL。把主機、目錄、檔名與問號後的參數一起記下，不要只抄 style.css。

例如第 53 套 Demo 的詳情頁會載入 /template/wntheme53/asset/css/style.css?v=1.0.6，同時也載入 /static/css/home.css?v=1.0.6。頁面有不只一份樣式；你改了下載包中的同名檔案，並不能證明那就是瀏覽器正在使用的檔案。

MacCMS Club 的模板文件指出，CSS、JS 與圖片可放在主題自己的資源目錄，透過 $maccms.path_tpl 引用。先核對網站目前啟用的模板，再把實際請求與那套模板的目錄對照。分類或詳情的獨立模板可能引用其他公共片段，別只在首頁查一次就套到所有頁面。

打開回應，找你改過的那條規則

在 CSS 請求的 Response／回應搜尋你修改的 selector，或一個容易辨認的新值。例如你把某個按鈕背景改成 #164bd7，就查那個 selector 與色碼是否同時存在。壓縮 CSS 可以使用格式化按鈕，方便讀取；檔案小不代表內容一定是新的。

若回應沒有新規則，先確認檔案是否保存到正確位置、上傳是否完整，以及請求有沒有重新導向到另一個資源地址。如果回應其實是錯誤 HTML 或登入頁，處理資源路徑與存取問題；不要把這種情況當 CSS 語法失效。

若回應已有新規則，問題就不應只停留在「清快取」。接著查規則是否選到目標元素，以及是否被其他樣式蓋掉。正常回應碼代表請求完成，不能替你回答這兩件事。

只暫時停用這個瀏覽器的快取比較

在 Network 勾選 Disable cache，再保持 DevTools 開啟並重新整理。這是診斷用的瀏覽器操作，不會清掉你的 MacCMS 模板快取，也不會替 CDN 全站更新。比較停用前後的同一 CSS 網址、回應內容與畫面；確認後取消勾選，回到一般訪客的載入方式再看一次。

快取中的資源可能不需要再次傳完整內容，Network 的 Size／大小欄可顯示 memory cache 或 disk cache；重新驗證也可能出現 304。看到 304，不應直接判定拿了「錯的舊檔」：它表示伺服器允許使用已保存的表示，仍要對照實際內容是否包含修改。

如果停用瀏覽器快取後仍是舊規則，繼續核對回應來源。CDN 或伺服器也可能提供快取內容，而瀏覽器的勾選不能保證它們一起失效。把完整資源網址與回應交給維護者，確認哪一層在提供舊檔，再只處理受影響的資源。

新規則已載入，畫面仍沒變怎麼查

先選一個最小變動作比較，例如同一個按鈕的背景色，不要同時改字體、間距、動畫和多個斷點。保留修改前的色碼與selector，確認改後值能在 CSS 回應找到，再核元素的計算值。若兩者相同而肉眼仍覺得沒變，可查按鈕是否被半透明子元素或背景圖覆蓋，並比較的是不是同一個狀態。

遇到 CSS 有兩份同名檔案，直接看 Styles 面板右側的檔名與行號，打開那條實際套用的規則。頁面可能同時使用模板樣式與公共樣式，後者覆蓋了前者；光看請求清單，還不能知道最後哪條生效。先找規則來源，再決定修哪一份，不要兩份一起加同樣宣告。

如果修改的是字體，也別只查 CSS 是否下載。先看 Computed 的 font-family，再查看實際字體資源是否被請求及成功回應；聲明裡排在前面的字體不可用時，瀏覽器可能使用後面的備援字體。字體名稱沒改，但可見字形改變或未改變，都需要與真正載入的資源一起核對。

用元素選取工具點目標按鈕，在 Elements 的 Styles 面板查背景或字體規則。刪除線通常表示該宣告沒有贏得這個元素的樣式結果；確認覆蓋它的是另一份 CSS、較具體的 selector，還是行內樣式。再到 Computed 看最後計算值，不要只看原始檔裡有沒有那段文字。

也要留意條件：規則可能寫在特定寬度的 media query，或只套用某個狀態 class。桌機按鈕沒有變，不代表手機斷點裡的新規則未載入；按鈕未進入該狀態，也可能不符合 selector。先讀條件並選中實際元素，避免為了強行看到效果就隨處加 !important。

DevTools 中的暫時修改可以協助確認哪條規則造成差異，但重新整理後通常不會保留。查出原因後，回到你有權管理的模板資源檔修正，保存原檔與改動範圍。瀏覽器裡改好了，不等於正式訪客已取得修正版。

版本參數要跟著實際部署走

像 style.css?v=1 和 style.css?v=2 是不同的完整網址。給已部署的新檔案一個新版本地址，能協助區分資源；但是加參數不會幫你上傳檔案，也不保證 CDN 的快取鍵一定包含這個參數，仍須核對回應內容。

用一個小例子理解：HTML 引入 /style.css?v=1，CSS 回應允許快取一小時。頁面重新整理時，HTML 與 CSS 是兩個請求，HTML 更新了，CSS仍可能重用已保存內容。若你只在 HTML 改標題，按鈕樣式本來就不會跟著變；若修改了CSS，就要確認樣式請求的回應也包含新規則。

正式更新時，讓版本號在檔案部署完成後才變動，並沿用模板既有的版本處理方式。不要每次載入都附上隨機數：雖然能不斷改變地址，也會讓正常訪客失去重用資源的機會。若引用網址還是舊版本，要找產生該 link 標籤的公共模板或配置，而不是再改一次 CSS。

把修正結果交回一般訪客的路徑

完成後取消 Disable cache，打開原本有問題的頁面，確認樣式請求、回應中的新規則與 Computed 結果一致。再到同樣使用這份 CSS 的另一種頁面看按鈕與文字，確保沒有意外影響共用元件。只改某個頁面的問題時，修正也應維持同樣範圍。

如果連 HTML 文字都沒有更新，則另讀MacCMS 模板快取與靜態頁的分辨方式。HTML 輸出與瀏覽器取得CSS是兩段流程，把它們分開查，維護者才能收到明確的問題位置。

參考資料