--- title: "Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學" slug: framer-cms-complete-guide url: https://rar.design/posts/framer-cms-complete-guide published_at: 2026-08-12 modified_at: 2026-08-27 author: "設計師 Riven" category: "AI 設計" tags: ["無程式碼", "網頁設計", "CMS", "Framer"] access: public_access --- # Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學 > 讓客戶自己發文章，你不用再當免費工讀生 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-12 ✱ FRAMER · WEB DESIGN · 2026Framer CMS 的官方主視覺。設計歸設計，內容歸內容，這是整套系統的起點。QUICK ANSWERFramer CMS 是 Framer 內建的內容管理系統，核心只有兩層：Collection 是一張資料表，Item 是其中一筆。你設計一次頁面模板，接上 Collection，Framer 就替每一筆自動生一個頁面。部落格、作品集、團隊介紹、職缺列表全靠它。難的不是操作，是欄位怎麼設計，還有方案的 Collection 數量陷阱。✱ CONTENTS01Collection 與 Item，就這兩個字02沒有 CMS 的網站，是一具標本03十八種欄位，你只要先搞懂三種04四個步驟，做出第一個動態頁面05真正拉開差距的四個功能06把 SEO 變成模板07方案陷阱：升級之後你反而變少08重點整理✱ CHAPTER 01 · WHAT IS ITCollection 與 Item，就這兩個字把 Collection 想成試算表裡的一個分頁。欄位定義這張表的形狀——標題、日期、封面圖、分類；Item 就是其中一列，一篇文章、一個作品、一位團隊成員。接下來才是關鍵的一步。你把 Collection 接到畫布上的設計元件，每一筆 Item 就會長出自己那一版。新增一筆資料，網站自動多一個頁面，你不用再開 Framer，不用複製圖層，不用重新排版。如果你還在評估要不要把 Framer 當主力建站工具，可以先看 Framer 是什麼 那篇打底，這裡直接進 CMS。✱ THE MODELCOLLECTION一張資料表部落格文章、作品、團隊成員，各是一張。FIELDS表的形狀標題、日期、圖片、分類、內文，決定每筆能存什麼。ITEMS一筆資料一篇文章就是一列，客戶自己就能新增。PAGES自動生成一個模板，替所有 Item 生出各自的網址。✱ CHAPTER 02 · WHY IT MATTERS沒有 CMS 的網站，是一具標本我看過太多漂亮但死掉的網站。動畫做得很細，滾動節奏抓得很準，交出去那天大家都很開心。三個月後客戶想發第四篇文章，打電話給你，你打開專案、複製整頁、換掉文字、重新發佈——十分鐘的事。問題是這種十分鐘，一年會發生二十次。而且你不好意思收錢，因為它真的只花了十分鐘。更糟的是第二種結局：客戶懶得每次都找你，網站就停在那裡。最後那個案子從你的作品集裡消失，因為裡面的內容早就過期到不能見人。接案真正的成本不在做出來的那兩週，在交出去之後的那三年。網頁設計的三十五年演變裡，內容管理系統的出現是一個真正的分水嶺。在那之前，文字是寫死在 HTML 裡的；在那之後，內容跟版面第一次分了家。Framer 只是把這件事做得比較好看而已，觀念一點都不新。✱ CHAPTER 03 · FIELD TYPES十八種欄位，你只要先搞懂三種Framer 目前提供十八種欄位型別：Title、Slug、Content、Date、Option、Image、Gallery、Toggle、Icon、Color、File、Reference、Multi Ref、Link、Number、Array、Video、Divider。看起來很多，實際上八成的專案只會用到六七種。真正會決定你這個 CMS 好不好用的，是這三種：✱ FIELD✱ 為什麼是它Option分類一定要用下拉選項，不要用純文字欄位。文字會有錯字、會有全形半形、會有人多打一個空格，然後你的篩選就壞了。Reference讓一張表指向另一張表。文章對作者用 Reference，文章對多個標籤用 Multi Ref。有了它，作者換頭像只要改一個地方。Slug它就是網址。中文標題自動轉出來的 slug 幾乎都不能看，每一筆都要手動改成英文短句。這件事沒有捷徑。欄位設計是整個 CMS 唯一難改的地方。頁面設計改十次都無所謂，欄位改一次就要回頭補所有既有資料。開始前多想五分鐘，之後省五小時。✱ CHAPTER 04 · GETTING STARTED四個步驟，做出第一個動態頁面1建立 Collection左側面板點 CMS 圖示，或直接按 C。新增一張表，Framer 會自動幫你帶上 Title 跟 Slug 兩個欄位。2設計欄位先在紙上列出這個內容型別要存哪些資訊，再一次加完。分類用 Option，關聯用 Reference。3做一個動態頁面新增頁面時選擇綁定這張 Collection，Framer 會用 slug 自動生成每一筆的網址。你只設計一次，它替你生三百次。4放上 Collection List回到列表頁，從 Ｉnsert 面板拖一個 Collection List 進來。設計第一張卡片，其他卡片自動複製格式。CMS 3.0 之後，整個內容面板重寫過一次，操作路徑比舊版短很多。2026 年還多了一條捷徑。Framer 3.0 把 Agent 放進 CMS：你用一句話描述要存什麼，它自己建表、選欄位型別、設好 slug。手上有現成的 CSV，也可以直接丟進去讓它拆成 Collection。我的建議是第一次自己手動建一遍，第二次以後再交給 Agent。你得先知道它幫你做了什麼決定，才有辦法判斷它做錯了什麼。這點在 Framer Agents 的完整解析裡有更細的討論。✱ CHAPTER 05 · IN PRACTICE真正拉開差距的四個功能把資料接上去只是及格。以下四個功能，決定你的 CMS 頁面是「能動」還是「好用」。CONDITIONAL VISIBILITY依照欄位值決定元素顯不顯示。文章有標記 Featured 就掛上金色徽章，沒填副標題就整塊隱藏。少了它，你的卡片會在客戶漏填一個欄位時破版。FILTERING把頁面變數綁到 Collection List 的篩選條件，訪客點分類就即時換內容。三五個分類的部落格夠用；要同時篩價格區間跟地區這種多條件，就得往外掛找。PAGINATION內容超過三十筆一定要開分頁。不然一次載入兩百張圖，你前面調的所有動畫都會卡成幻燈片。ON-PAGE EDITING客戶可以直接在前台頁面上點字修改，不用進畫布。這是你交件之後最需要的一個功能，也是最多人忘記教客戶的一個。官方在 CMS 改版時錄了一支示範，把內容、元件、Agent 三件事串起來講，值得花十幾分鐘看完：Framer 官方 — Content, Components, and CMS with Framer Agents✱ CHAPTER 06 · SEO SETUP把 SEO 變成模板這是 Framer CMS 最被低估的地方。動態頁面的 meta title、描述、OG 圖、結構化資料，全都可以綁 CMS 變數。意思是你設定一次「標題欄位加上網站名稱」這條規則，三百篇文章的 meta 就全部正確。多數人上線前一篇一篇手填，填到第三十篇就開始亂填，然後搜尋結果裡出現一整排一模一樣的描述。頁面 SEO 設定面板。把變數塞進標題與描述欄位，之後每一筆都自動帶對。順帶一提，OG 圖也吃 CMS 變數。文章封面圖直接當分享縮圖，不用另外做一套。這一步做完，你的網站在社群被轉出去的樣子就不會再開天窗。✱ CHAPTER 07 · THE LIMITS方案陷阱：升級之後你反而變少這一段請認真讀，因為它會直接影響你的報價。Framer 免費方案給你十個 Collection——因為它把免費方案定位成設計工具，讓你在裡面把東西建完整。但當你付錢升到 Basic，Collection 數量會掉到兩個。10FREE · COLLECTIONS2BASIC · COLLECTIONS10PRO · COLLECTIONS兩個 Collection 是什麼概念？一個部落格加一個作品集，剛好卡死。再想加一張「分類」表來做 Reference，就得跳到 Pro。這就是為什麼很多人從免費直接跳 Pro，中間那一階根本待不住。報價的時候把這件事講清楚。網站是你做的，方案是客戶付的，這筆錢要在合約裡寫明白，不要等到上線那天才發現預算差了一階。方案內容 Framer 每隔幾個月就調一次，簽約前回官方定價頁確認當下數字。另外兩個限制也值得先知道：Framer 不提供程式碼匯出，內容跟平台是綁在一起的；還有 Rich Text 的自訂樣式彈性有限，想在內文裡塞複雜排版元件會綁手綁腳。這兩點跟 Webflow 的取捨我在 Framer vs Webflow 那篇拆得比較細。✱ CHAPTER 08 · TAKEAWAYS重點整理✱ TAKEAWAYS→Collection 是表，Item 是列。設計一次模板，Framer 替每一筆自動生頁面。→欄位是唯一難改的東西。分類用 Option、關聯用 Reference、slug 一定要手動改英文。→SEO 綁 CMS 變數，一條規則管三百篇。這是投報率最高的十分鐘。→Basic 只有兩個 Collection。報價前先算清楚客戶要幾張表，寫進合約。學生做完一門建站課，最常撞上的牆從來不是動畫做不出來，是客戶問了一句「那我可以自己改嗎」。CMS 就是那句話的答案。它不華麗，不會出現在你的作品集動態展示裡，沒有人會因為你的 Collection 設計得好而按讚。但它決定這個案子是一次性的收入，還是一段能長期維護的關係。做網站的人遲早會發現，後者才是這一行真正的複利。✱ RELATED READS · 延伸閱讀Framer vs Figma Sites 怎麼選？兩個都能從設計直接發佈，差別在 CMS 與上線之後的維護成本。閱讀 →Figma 與 Framer 的工具分工什麼時候在 Figma 想，什麼時候直接進 Framer 做。閱讀 →過去十年的網站設計趨勢從 iOS 7 扁平化一路到 Liquid Glass，視覺語言怎麼換了三輪。閱讀 →Spline Omma 完全解析網站要放 3D 的時候，這是最順的一條路。閱讀 →配色公式怎麼用六個讓畫面不會出錯的思考結構，做網站前先看。閱讀 →認識 UI/UX 設計從定義、工作流到入門路徑的完整指南。閱讀 →✱ EXTRA · LINKSFramer 官方 CMS 產品頁：framer.com/cmsFramer Academy 的 CMS 入門課程：Getting Started with the Framer CMS還沒有帳號的話，從這裡開始：framer.comCOURSEFramer 網站設計課：從零開始三個實戰專案帶你從畫面做到上線，把這篇的 CMS 觀念真正做進一個會呼吸的網站。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →✱ FAQ常見問題✱ Framer 免費方案可以用 CMS 嗎？可以。官方定價頁寫明免費方案的專案能用十個 Collection，也給到一千個頁面，適合拿來學習、做模板或當純設計工具。限制在於你只能用 Framer 的子網域、頁面會帶官方標記，要接自己的網域就得升級付費方案。✱ Collection 跟 Collection List 有什麼不同？Collection 是資料本體，住在 CMS 面板裡；Collection List 是畫布上的元件，負責把那些資料排出來。一個是內容，一個是展示，同一個 Collection 可以被好幾個 Collection List 用不同版型呈現。✱ 客戶可以自己編輯內容嗎？需要另外付錢嗎？可以，而且有兩種方式：進 CMS 面板改，或直接在前台頁面上點字修改。額外的編輯者席次是要另外計費的，內容編輯者的價格比完整編輯者便宜，報價時記得把這筆算進去。✱ 可以把既有的部落格搬進 Framer CMS 嗎？可以。最常見的做法是把舊站內容整理成 CSV 再匯入成 Collection。另外也有官方外掛能接 Notion、Airtable、Google Sheets 當內容來源，適合內容還在別的地方持續更新的情況。搬家時記得處理舊網址的轉址，不然 SEO 會斷。✱ CMS 內容多了會不會拖慢網站？會，但通常不是資料量的問題，是圖片跟一次載入的筆數。超過三十筆就開分頁，圖片上傳前先壓過，這兩件事做了大部分情況都不會有感。✱ Framer CMS 適合做電商嗎？單純展示商品沒問題，用 Collection 做商品目錄很順。但購物車、庫存、結帳這些要靠外掛或串第三方金流，複雜的電商還是建議用專門的平台，把 Framer 留給品牌頁跟行銷頁。✱ CMS 的 Agent 會不會把欄位設計搞砸？它多半會給出合理的結構，但不知道你未來要拿這些資料做什麼。建議把 Agent 當草稿產生器，建完自己檢查一遍分類欄位有沒有用 Option、該做關聯的地方有沒有用 Reference，這兩點是它最常做保守決定的地方。