webflow/webflow-skills

CMS 最佳實務

提供 Webflow CMS 架構、關聯、最佳化與疑難排解的專家指導。

重要注意事項

一律使用 Webflow MCP 工具進行所有操作：

• 使用 Webflow MCP 的 webflow_guide_tool 取得最佳實務（開始前）
• 使用 Webflow MCP 的 data_sites_tool 搭配動作 list_sites 來識別可用網站
• 使用 Webflow MCP 的 data_sites_tool 搭配動作 get_site 來取得網站詳細資料與方案限制
• 使用 Webflow MCP 的 data_cms_tool 搭配動作 get_collection_list 來分析現有集合
• 使用 Webflow MCP 的 data_cms_tool 搭配動作 get_collection_details 來檢查集合結構
• 使用 Webflow MCP 的 data_cms_tool 搭配動作 list_collection_items 來評估內容數量
• 使用 Webflow MCP 的 data_pages_tool 搭配動作 list_pages 來了解頁面結構
• 使用 Webflow MCP 的 ask_webflow_ai 來詢問特定的 API 問題
• 請勿使用任何其他工具或方法進行 Webflow 操作
• 所有工具呼叫都必須包含必要的 context 參數（15-25 個字，第三人稱視角）

指示

第一階段：探索與分析

1. 識別請求：判斷使用者是否在：
   • 規劃新的 CMS 結構
   • 最佳化現有集合
   • 疑難排解效能問題
   • 設定關聯
   • 尋求架構指導
2. 取得網站資訊：使用 Webflow MCP 的 data_sites_tool 搭配動作 list_sites 和 get_site 來了解方案限制
3. 分析現有結構：使用 Webflow MCP 的 data_cms_tool 搭配動作 get_collection_list 和 get_collection_details 來檢查目前設定
4. 評估內容數量：使用 Webflow MCP 的 data_cms_tool 搭配動作 list_collection_items 來了解規模
5. 檢閱頁面：使用 Webflow MCP 的 data_pages_tool 搭配動作 list_pages 來查看內容如何顯示

第二階段：需求收集

6. 了解使用案例：提出澄清問題：
   • 需要管理哪些內容？
   • 誰會更新內容？
   • 內容將如何顯示？
   • 需要哪些關聯？
   • 預期的內容數量？
7. 識別限制條件：考量方案限制、技術限制、團隊技能
8. 定義成功標準：效能目標、編輯工作流程、可擴展性需求

第三階段：架構規劃

9. 設計集合結構：規劃集合、欄位與關聯
10. 選擇欄位型別：為每個內容元素選擇適當的欄位型別
11. 規劃關聯：設計一對多與多對多連接
12. 考慮分類法：決定類別、標籤與組織結構
13. 規劃可擴展性：為成長而設計（分頁、效能、限制）
14. 記錄決策：解釋權衡與理由

第四階段：建議與驗證

15. 產生建議：提供具體且可操作的指導
16. 優先排序變更：根據影響力組織（快速取勝 vs. 長期改善）
17. 解釋權衡：幫助使用者了解限制與因應措施
18. 比對最佳實務驗證：檢查是否符合 Webflow 限制與模式
19. 提供替代方案：在適用時提供多種方法
20. 建立實施藍圖：分解為多個階段

第五階段：實施指導

21. 提供逐步指示：清楚引導實施過程
22. 主動提供協助：建議使用其他技能（cms-collection-setup、bulk-cms-update）
23. 記錄結構：建議為團隊參考建立文件
24. 建議測試方法：指導如何驗證變更
25. 規劃遷移：如果重構，提供遷移策略

集合架構

何時使用 CMS 與靜態內容

使用 CMS 的時機：

• 內容頻繁更新（每週或更頻繁）
• 多個相似項目（部落格文章、產品、團隊成員、專案）
• 非技術使用者需要編輯內容
• 內容需要在前端進行篩選/排序
• 相同內容出現在多個頁面上（作者簡介、產品特色）
• 所有項目的內容遵循一致結構
• 需要動態產生頁面

使用靜態內容的時機：

• 內容極少變更（每年更新或更少）
• 獨特的一次性區塊（關於頁面的英雄區塊、首頁特殊功能）
• 每個項目都有複雜的自訂版面配置，且不遵循模式
• 無需動態篩選或搜尋
• 內容高度客製化，且不共用結構
• 效能至關重要且內容不變
• 每個區塊都需要完全設計彈性

混合式方法：

• 靜態頁面加上 CMS 驅動的區塊（例如：靜態首頁搭配 CMS 推薦內容）
• 近期內容使用 CMS，舊內容使用靜態封存
• 靜態登陸頁面，子頁面使用 CMS

欄位型別選擇

內容型別	建議欄位	備註	字元限制
短文字	純文字	標題、名稱、slug	最多 256 字元
長文字（無格式）	純文字（長）	描述、摘要	無限制
格式化內容	富文本	部落格內容、簡介、文章	無限制
單張圖片	圖片	照片、縮圖、頁首	每張圖片最多 4MB
多張圖片	多圖片	圖庫、產品照片	最多 25 張圖片
檔案下載	檔案	PDF、文件、下載檔	每個檔案最多 4MB
是/否值	開關	精選標記、能見度切換	布林值
單一選擇	選項	狀態、型別、類別	無限制選項
日期/時間	日期/時間	發布日期、活動、截止日	ISO 8601 格式
連結到一個項目	參考	作者 → 文章、類別 → 文章	一個項目
連結到多個項目	多重參考	文章 → 標籤、文章 → 相關文章	多個項目
外部 URL	連結	社交連結、外部資源	最多 2048 字元
數值	數字	價格、評分、排序、計數	整數或小數
電話號碼	電話	聯絡電話	E.164 格式
電子郵件地址	電子郵件	聯絡電子郵件	有效的電子郵件格式
顏色值	顏色	主題顏色、強調色、品牌色	十六進位格式
影片嵌入	影片	YouTube、Vimeo 嵌入	嵌入 URL

欄位型別決策樹

需要儲存：
├── 文字？
│   ├── 短（≤256 字元）？→ 純文字
│   ├── 長 + 格式化？→ 富文本
│   └── 長 + 無格式化？→ 純文字（長）
├── 媒體？
│   ├── 單張圖片？→ 圖片
│   ├── 多張圖片？→ 多圖片
│   ├── 影片？→ 影片
│   └── 檔案下載？→ 檔案
├── 選擇/選項？
│   ├── 是/否？→ 開關
│   ├── 一個選項？→ 選項
│   └── 連結到項目？→ 參考/多重參考
├── 結構化資料？
│   ├── 數字？→ 數字
│   ├── 日期/時間？→ 日期/時間
│   ├── 電話？→ 電話
│   ├── 電子郵件？→ 電子郵件
│   └── URL？→ 連結
└── 視覺？
    └── 顏色？→ 顏色

關聯模式

一對多（參考欄位）

範例： 文章 → 作者

作者集合：
├── 名稱（文字，必填）
├── slug（文字，必填）
├── 簡介（富文本）
├── 照片（圖片）
├── 頭銜（文字）- 職稱
├── 電子郵件（電子郵件）
└── 社交連結（連結）

文章集合：
├── 標題（文字，必填）
├── slug（文字，必填）
├── 內容（富文本）
└── 作者（參考 → 作者）  ← 每篇文章有「一個」作者

顯示： 在文章頁面上，存取 author.name、author.photo、author.bio

篩選： 可以按特定作者篩選文章

優點：

• ✅ 集中管理作者資料（更新一次，處處反映）
• ✅ 易於維持一致性
• ✅ 可以建立作者個人檔案頁面，顯示其所有文章
• ✅ 效率高（每篇文章一個參考）

使用案例：

• 部落格文章 → 作者
• 產品 → 品牌
• 活動 → 場地
• 專案 → 客戶
• 推薦內容 → 客戶

多對多（多重參考）

範例： 文章 ↔ 標籤

標籤集合：
├── 名稱（文字，必填）
├── slug（文字，必填）
├── 描述（純文字）
└── 顏色（顏色）- 選擇性視覺分組

文章集合：
├── 標題（文字，必填）
├── slug（文字，必填）
├── 內容（富文本）
└── 標籤（多重參考 → 標籤）  ← 每篇文章有「多個」標籤

顯示： 在文章頁面上，迴圈遍歷 tags 來顯示所有標籤

篩選： 可以按特定標籤篩選文章

優點：

• ✅ 靈活的內容組織
• ✅ 交叉連結相關內容
• ✅ 更好的 SEO（主題叢集）
• ✅ 增強使用者導覽

限制：

• ⚠️ 每個集合最多 5 個多重參考欄位
• ⚠️ 在集合列表中，一次只能按「一個」多重參考值篩選
• ⚠️ 無法按參考欄位的值排序
• ⚠️ 每個參考 = 額外查詢（影響效能）

多個標籤篩選的因應措施：

1. 建立組合標籤（例如：「vegan-gluten-free」）
2. 使用 Finsweet CMS Filter 進行客戶端篩選
3. 為常見組合建立單獨的篩選集合列表
4. 使用 Webflow API 搭配自訂程式碼

使用案例：

• 部落格文章 ↔ 標籤
• 產品 ↔ 功能
• 專案 ↔ 技術
• 食譜 ↔ 食材
• 課程 ↔ 主題

自我參照（巢狀集合）

範例： 具有子類別的類別

類別集合：
├── 名稱（文字，必填）
├── slug（文字，必填）
├── 描述（純文字）
├── 上層（參考 → 類別）  ← 自我參照以建立層級
└── 層級（數字）- 1、2、3 用於顯示邏輯

使用案例：

• 具有子類別的類別
• 具有子選單項目的選單項目
• 組織層級
• 產品分類法

優點：

• ✅ 靈活的層級
• ✅ 理論上無限制深度
• ✅ 易於重新組織

限制：

• ⚠️ 在 Webflow 中顯示巢狀層級較為複雜
• ⚠️ 實際實施建議最多 2-3 層
• ⚠️ 深度巢狀需要自訂邏輯

替代方案： 對於簡單的 1-2 層分類，使用選項欄位

雙向關聯

範例： 相關文章

文章集合：
├── 標題（文字，必填）
├── slug（文字，必填）
├── 內容（富文本）
└── 相關文章（多重參考 → 文章）  ← 自我參照到其他文章

顯示： 在文章頁面底部顯示相關文章

優點：

• ✅ 讓使用者停留更久
• ✅ 更好的 SEO（內部連結）
• ✅ 靈活的內容連接

挑戰：

• ⚠️ 並非真正的雙向（A → B 不會自動建立 B → A）
• ⚠️ 如果需要雙向關聯，必須手動維護
• ⚠️ 對內容編輯者來說可能耗時

解決方案：

1. 使用標籤進行自動的「依標籤相關」邏輯
2. 針對最重要的連接進行手動策展
3. 混合型：手動 + 基於標籤/類別的自動化

範例

範例 1：規劃新的 CMS 結構

使用者提示：

我正在建立一個食譜網站。該如何結構化 CMS？

步驟 1：需求收集

📐 CMS 規劃：食譜網站

讓我問幾個問題來設計最佳結構：

1. **內容數量**：你計劃有多少食譜？
   - 小型（≤50）：簡單結構
   - 中型（50-200）：適度組織
   - 大型（200+）：需要進階分類法

2. **食譜屬性**：每個食譜會包含哪些資訊？
   - 基本：名稱、食材、步驟、圖片
   - 進階：準備時間、烹調時間、難度、營養標示、飲食標籤

3. **組織需求**：使用者如何找到食譜？
   - 依餐點類型（早餐、午餐、晚餐）
   - 依料理風格（義大利、墨西哥、亞洲）
   - 依飲食限制（純素、無麩質、生酮）
   - 依烹調方法（烘焙、燒烤、慢燉鍋）
   - 依食材（雞肉、義大利麵、蔬菜）

4. **作者設定**：單一作者或多位作者？
   - 單一：你管理所有內容
   - 多位：食譜創作者團隊

5. **使用者互動**：有哪些互動功能？
   - 留言/評論
   - 評分
   - 儲存收藏
   - 列印食譜卡

根據你的回答，我將設計最佳的 CMS 架構。

步驟 2：使用者回覆後

📐 建議的 CMS 架構：食譜網站

根據你的需求（中型數量、多位作者、進階篩選）：

---

## 需要 4 個集合

### 1. 食譜（主要內容）
├── 名稱（文字，必填）- "自製培根蛋麵"
├── slug（文字，必填）- "自製培根蛋麵"
├── 描述（純文字，160 字元）- 用於 SEO 的簡短摘要
├── 精選圖片（圖片）- 詳細頁面的主圖
├── 縮圖圖片（圖片）- 網格卡片用的較小圖片
├── 準備時間（數字，必填）- 準備時間（分鐘）
├── 烹調時間（數字，必填）- 烹調時間（分鐘）
├── 總時間（數字）- 自動計算或手動輸入
├── 份數（數字，必填）- 份數
├── 難度（選項：簡單、中等、困難）
├── 食材（富文本，必填）- 含份量的食材列表
├── 步驟（富文本，必填）- 逐步說明
├── 備註（富文本）- 廚師筆記、小提醒、替代食材
├── 營養資訊（純文字）- 熱量、蛋白質等
├── 作者（參考 → 作者，必填）
├── 類別（參考 → 類別，必填）- 主要餐點類型
├── 料理風格（參考 → 料理風格）- 義大利、墨西哥等
├── 飲食標籤（多重參考 → 飲食標籤）- 純素、無麩質等
├── 烹調方法（多重參考 → 方法）- 烘焙、燒烤等
├── 精選（開關）- 在首頁重點顯示
├── 發布日期（日期，必填）
└── 瀏覽次數（數字）- 追蹤人氣

**總欄位數：** 22 個欄位
**所需方案：** CMS 方案最低要求（20 個集合，2000 個項目）

### 2. 作者
├── 名稱（文字，必填）
├── slug（文字，必填）
├── 頭銜（文字）- "主廚"、"食譜開發者"
├── 簡介（富文本）
├── 照片（圖片）
├── 專長（純文字）- "義大利料理"、"烘焙"
├── 社交-Instagram（連結）
├── 社交-網站（連結）
└── 電子郵件（電子郵件）

**目的：** 在所有食譜中重複使用作者資訊

### 3. 類別
├── 名稱（文字，必填）- "早餐"、"午餐"、"晚餐"、"甜點"
├── slug（文字，必填）
├── 描述（純文字）
├── 圖片（圖片）- 類別主圖
├── 顏色（顏色）