Webflow CMS 富文本清洗災難：API 自動化發布、Markdown 表格與行動端 RWD 卡片化架構復盤

一場只改了兩個字引發的慘劇

已經有越來越多企業品牌運用 AI 搭建現代內容管線，也就是透過 Python 腳本或 AI Agent 串接 Webflow Data API，每天將深度產業分析、多維規格對照或白皮書自動排版成文章，直接打入 Webflow CMS。第一天，文章發布到線上，排版乾淨俐落，表格對齊工整，全公司都在慶祝自動化跑通。

慘劇通常發生在第二天。行銷主管在官網讀到文章，發現第一段出現支語，隨手打開 Webflow CMS 後台，把「視頻」改成「影片」，儲存重新發布後，整個團隊群組炸開了：文章裡所有的清單列點文字全部消失；精心設計的四欄對比表格被剝個精光，留下一大片死白的空白。

多數外包工程師遇到這種狀況，通常會丟出一句無奈的回覆：「這是 Webflow 原生富文本的限制，表格要另外透過 HTML 崁入，人工修改重新發佈會造成編輯器清洗，請你以後修改也透過 AI。」但這對只想改一兩個字的編輯者來說：我不能直接進 CMS 後台直接選取該文字編輯，而是需要打開 Claude 告訴他是哪個文章哪個段落哪個文字要做清除修改，豈不是自動化到頭來還得增加另外的工作量？

拆解底層：Webflow 富文本的破壞性清洗機制

要解決這個問題，必須先看透 Webflow CMS 資料庫與後台編輯器之間的底層衝突。

當我們透過 Webflow REST API 寫入 Rich Text 欄位時，Webflow 伺服器接收的是純粹的 HTML 字串。API 端並不會去嚴格校驗標籤是否合規，所以無論你在裡面塞了原生 <table>、行內 style 還是特殊巢狀結構，資料庫都會照單全收，前台也能正常渲染。

但只要任何人在 Webflow 後台介面打開這篇文章，這套資料就會被送進 Webflow 瀏覽器端的視覺化富文本編輯器（WYSIWYG）。此時，兩道致命的清洗機制會瞬間觸發：

1. 清單節點的 Whitespace 判定損壞

很多工程師在用程式碼生成 HTML 時，習慣為了可讀性在標籤間加上換行與縮排空格：

<ul>
 <li>項目一</li>
 <li>項目二</li>
</ul>


但在 Webflow 編輯器底層的抽象語法樹（AST）規則中，<ul> 容器內部只能容納清單項目節點。當解析器讀到
 
這些空白文字節點時，會直接判定整個清單結構損壞。當使用者在後台按下儲存時，編輯器無法將這段結構重新序列化，便強制將所有 <li> 抹除，降級輸出為空行標籤：

<ul><br> &nbsp;<br><br> &nbsp;<br></ul>

這就是為什麼列點文字會集體蒸發的根本原因。

2. 表格標籤的強制拆除（Unwrap）

Webflow 官方對 Rich Text 欄位設定了極其嚴苛的標籤白名單：僅允許段落、標題、清單、引言、圖片與代碼塊。所有 <table>、<thead>、<tr>、<td> 與 <div> 完全不在名單內。

哪怕你在 API 寫入時試圖偽裝成 <div class="w-embed"><table>...</table></div>，後台編輯器也根本不認這個假外殼。它會粗暴地剝除所有結構標籤，把儲存格內的文字硬生生塞進同一個普通 <p> 標籤裡，造成嚴重的排版災難。

雙向讀寫安全架構：Markdown 化降維防護

理解了編輯器的清洗邏輯，工程防護的核心原則就非常明確：不要用後台不支援的標籤去硬碰它的清洗機制，而是用它動不了的格式進行降維儲存。

1. 緊湊清單規則（Tight List Format）

所有透過 API 或腳本寫入 Webflow CMS 的清單，內部必須強制清除所有換行與空格：

<ul><li>項目一</li><li>項目二</li></ul>

沒有多餘的文字節點干擾，Webflow 編輯器在載入時能 100% 穩定將其識別為原生的項目符號清單，即使後台編輯修改文案，也不會再發生清單被掏空的事故。

2. Markdown 表格策略（Markdown-First in CMS）

在文章需要呈現規格對照或時程時，CMS 富文本內一律採用標準 Markdown 表格語法儲存：

| 維度指標 | 傳統 Raw HTML 表格 | Markdown + 轉譯架構 |
| :--- | :--- | :--- |
| 後台二次編輯相容度 | 0%（一存即毀，標籤全除） | 100%（純文字段落，免疫清洗） |
| 手機端閱讀體驗 | 差（水平強制滑動，破壞節奏） | 極佳（自動轉為垂直獨立浮雕卡片） |
| 維護與排版成本 | 高（需在後台開代碼窗貼 HTML） | 低（打字如同 Notion 般直覺） |
| 載入性能開銷 | 無 | 0 毫秒（僅 1KB 原生腳本無延遲解析） |

因為它在 CMS 裡本質上就是幾行普通的文字段落，Webflow 後台的編輯器完全不會對管道符號 | 進行任何破壞。行銷人員在後台想加一欄、改時程、修字，打開就能改，存檔直接生效。

體驗登頂：行動端 RWD 卡片化引擎

很多網站就算勉強把表格塞進去了，也只是在手機端加個 overflow-x: auto 讓訪客橫向滾動。但在寬度只有 375px 或 390px 的手機螢幕上，一但表格超過三欄或內文較長，訪客就必須像看地圖一樣左右滑動來回對照表頭，認知負擔極重。

更優雅的工程解法，是讓桌面端維持 Dieter Rams 工藝極簡表格，而在螢幕寬度小於 767px 時，透過 CSS 現代架構將每一列數據強制轉化為獨立垂直卡片：

• 表頭自動標籤化（data-label 注入）：前端腳本解析 Markdown 時，會自動提取表頭文字，注入到每個儲存格的 data-label 屬性中。手機端隱藏 thead，並透過 content: attr(data-label) 將其渲染為精緻的膠囊小徽章。
• 外層容器強制透底（Transparent Wrapper）：在手機斷點下，外層容器與表格本體必須強制設為 background: transparent !important 且移除邊框。若忽略這一步，卡片之間的 margin-bottom 間距會露出外層的死白底色，破壞頁面質感。
• 單欄獨立浮雕卡片：每一列數據轉為帶有柔和陰影與圓角的白底卡片，第一欄自動加粗放大作為標題，其餘欄位垂直堆疊，訪客單手上下滑動即可順暢閱讀。

把防呆防護網鋪在最底層

一個成熟的企業級網站架構，衡量的標準從來不只是靜態頁面刻得多精緻，而是在自動化程式、內容管線與真實業務團隊協作時，能否承受住各種日常操作的考驗。

非技術團隊不應該花時間去理解什麼是 Slate AST 或 HTML 標籤白名單。工程師與架構師的職責，就是在底層建立具備容錯能力的轉譯機制：讓行銷人員享受最直覺的打字體驗，讓發布管線享受最高效的自動化，同時讓前台每一位訪客，無論在 4K 螢幕還是小尺寸手機上，都能看到最賞心悅目的設計細節。