Framer 其中一個強大功能，就是有非常簡單容易管理的 CMS 系統！實際上可以用在哪呢？簡單來說，只要你的網站有「需要頻繁新增，且排版格式固定」的內容，CMS 就是你的最佳幫手！無論是撰寫部落格文章、展示設計作品集、建立職缺佈告欄，還是最新活動列表，Framer 的 CMS 系統都能讓你像填表單一樣輕鬆更新內容，不需要重新拉版面。
本系列教學內容節錄自 Framer 官方教學：Getting Started with Framer CMS，如果你也覺得手動一頁一頁更新網站內容很沒效率，希望今天這份學習筆記能幫到你，我們一起開始下去吧！
CMS 是什麼呢？中文叫做「內容管理系統（Content Management System）」。你可以把它想像成一個專屬於你網站的資料夾。我們只要把文字、圖片、連結等資料整齊地放進這個資料夾裡統一管理就好。
當網站需要顯示內容時，Framer 就會自動從檔案櫃抽出正確的資料，放到網頁上對應的位置。 而未來你只要在 CMS 裡更新一次資料，網站內有引用、連結到的地方都會自動同步！
Framer CMS 的 4 個核心組成
Collections (資料集): 分類資料夾
Collection 就像是一個用來分類的專屬大資料夾。我們會把性質相同的內容，統一收納在同一個資料夾裡，方便未來管理。 例如，你可以在網站中建立三個不同的 Collections：部落格文章、最新消息、團隊成員。這樣未來能更清楚地分類管理這些資料夾內的檔案，也可以讓這些資料夾用不同的方式整理，兩者互不干擾。而在這個資料夾裡面裝著的一份份「純資料檔案」，在 Framer 裡就稱為 Items (項目)。
Fields (欄位): 規定內容的格式
Fields 就像是一份制式表格，為了確保同個資料夾裡的每一筆 Items (檔案) 結構一致，我們必須設定好固定的填寫欄位。例如，你可以規定每一篇「部落格文章」都必須包含：標題、封面圖、日期。這能確保資料庫保持整齊一致。
Pages (動態頁面): 把資料轉換成網頁
當我們把資料整理好後，接下來就是如何呈現了。Pages 指的是每一筆 Items (檔案) 的網頁，例如單篇部落格文章內頁。 你只需要設計好一次版面樣式，決定每個 Fields 會如何呈現，未來 Framer 就會自動抓取 Collection 裡的資料，為每一個 Item 產生專屬頁面。
Lists (資料列表)：隨處可用的資料展示區
Lists 則是讓你可以在網站的「任何地方」，展示多筆 CMS 資料的功能。只要你在後台新增了一筆資料，所有放上 Lists 的地方都會自動同步更新。 例如：首頁的「最新文章」、分頁「所有文章一覽」、文章底部的「閱讀更多相關文章」，其實都是引用同一個 Collection，但是用不同的 List 呈現方式。只要 Collection 有新增，這些 List 區塊都會同步更新。
實戰演練：建立你的第一個 Framer CMS
現在我們就來動手做做看，跟著以下的步驟，建立一個簡單的「部落格文章 (Articles)」資料庫吧！
Step 1. 新增 Collection 與命名
點擊 Framer 頂部選單列的 CMS ，可以看到畫面中央可以「Add Blog Sample (新增部落格範例文章) 」或者是「Import (匯入資料)」。但我們要從頭手動新增內容，所以先忽略這兩個功能。
點擊 Collections 旁邊的「+」號，建立一個新的 Collection
為你的資料集取個清楚的名字，例如我們把它命名為 Articles。
Step 2. 設定 Fields 欄位
點擊上方的「Edit Fields (編輯欄位)」。
Framer 預設會給三個欄位，分別是「Title (標題)」、「Slug (專屬網址後綴)」、「Content (內容)」
點擊右上角的「+」號，我們可以新增一個 「Image (圖片欄位)」 來當作文章封面。接著再加上 「Date (日期欄位)」。
Step 3. 新增內容與發布
點擊「New Item (新增項目)」，這時會出現一個根據你剛才設定好欄位的空白表單。
把欄位依序填上內容：打上吸睛的標題、上傳封面圖、選擇日期。
完成後點擊上方的「Save (儲存)」或「Publish (發布)」。這樣的第一筆 CMS 資料就建立完成了。
註：如果選擇 Publish (發布)，之後只要按下更新網站，文章就會直接上線；而選擇 Save (儲存) 的話，系統會先幫你存成 Draft (草稿)，這時候就算更新了整個網站，文章也不會對外公開。
下一步：準備好資料後，我們來做網頁排版吧！
恭喜你完成了 Framer CMS 的基礎設定！下一篇我們來學習如何將這些隱藏在後台的 CMS 資料，結合 Framer 的變數功能，自動生成漂亮的網頁展示。
附錄：Fields 欄位類型及應用
英文苦手的夥伴們不用擔心～這裡整理好各種欄位類型，以及裡面那些進階設定到底是什麼意思。
每個欄位都有的「通用設定」
不管你選哪一種欄位，通常都會看到這三個最基本的設定：
Name (名稱)：這個欄位在後台顯示的名字（例如：封面圖、文章標題）。
Description (描述)：給自己或團隊成員看的備註，提醒大家這個欄位要填什麼。
Required (必填)：可以把你覺得「絕對不能漏掉」的資料（例如標題）設定為 Yes，這樣以後新增資料時，沒填寫就不會讓你儲存。
📝 文字與內容類
Plain Text (純文字)：只能輸入單純的文字，不能排版。
Max Length (最大字數限制)：限制最多能輸入幾個字，避免前台網頁字太多導致排版破掉。
Default (預設值)：你可以先打好一段固定的預設文字，或是設定成 Based on（基於其他變數）。
Placeholder (預設提示字)：當輸入框是空的時候，顯示的「灰色提示字」，例如：「請輸入 20 字標題」。
Text Area (多行輸入區)：如果這個文字比較長（例如：文章摘要），選 Yes 能讓輸入框變大、允許多行輸入，比較好打字。
Localization (多國語系支援)：開啟 On 後，就能搭配 Framer 的多語系功能，針對不同語言填寫不同內容。Formatted Text (格式化文本)：支援豐富排版的文字編輯區。可以換行、設定大小標題、文字加粗、插入超連結。適合用在「文章正文」。
🖼️ 媒體與視覺類
Image (單張圖片)：用來上傳單一張圖。
Default (預設圖片)：你可以先 Upload (上傳) 一張佔位圖，如果未來忘記放圖片，就會自動顯示這張。Gallery (圖片庫)：可以一次上傳多張圖片。
Min / Max (數量限制)：可以嚴格規定這組相簿「最少 (Min) 要傳幾張」、「最多 (Max) 只能傳幾張」。Color (顏色)：讓你在後台挑選特定的色碼。
Default (預設值)：可以先設定好一個品牌色，省下每次重選的時間。
⚙️ 邏輯與數據類設定
Number (數字)：專門用來輸入數值。
Default (預設值)：一開始輸入框裡的預設數字（例如：0）。
Min / Max (範圍限制)：設定能輸入的最小值與最大值。
Step (增減幅度)：設定每次按加減號時，數字要跳多少（例如：1）。
Unit (單位)：可以加上顯示單位（預設為 None），可以變成百分比或度數。
Control (控制介面)：可以把介面變成 Slider (左右滑桿) 或是 Stepper (加減按鈕)，讓填寫體驗更好。Toggle (開關)：一個簡單的開關。
常見的應用方式是可以建立一個「精選文章 (Featured)」的開關。未來就能利用這個開關篩選，把特定文章過濾出來，單獨顯示在首頁的精選區塊。
Default (預設值)：你可以設定新增資料時，這個開關預設是 Yes 或 No。Option (單選選項)：用來製作文章分類或標籤。
Default (預設值)：新增資料時，自動先幫你選好哪個選項。
Options (選項清單)：你可以在這裡點擊 Add 新增多個選項，並且上下拖曳調整順序。
Localization (多國語系)：支援選項名稱的多國語言切換。
📅 其他實用欄位設定
Date (日期)：選擇特定的日期。
Time (時間)：你可以選擇 Show (顯示時間) 或 Hide (隱藏時間，只保留日期)。Link (連結)：用來貼上外部網址。
File (檔案)：讓訪客下載用的檔案。
Reference / Multi-Reference (關聯)：
這是進階功能，用來把「這個資料庫」跟「另一個資料庫」串聯起來，例如可以把文章與作者資料庫綁定。Divider (分隔線)：這個不會顯示在前台網頁，純粹用來幫後台的表單做視覺分類。
Section Title (區塊標題)：輸入大標題（例如：「SEO 設定區」），讓後台表單看起來更清爽有條理。
Description (描述)：針對這個區塊的整體補充說明。