在上一篇教學中，我們已經學會如何建立 Framer CMS 資料庫。而這篇文章則是要帶你認識 Detail Pages (詳細頁面) 與 Collection Lists (資料列表) 這兩個功能。只要設計好一次網頁模板，並透過「變數 (Variables)」串接資料，Framer 就會自動幫你生成所有內容頁面。搞懂這套邏輯，網站維護就能變得更輕鬆！
（本系列教學內容節錄自 Framer 官方教學：Getting Started with Framer CMS。）
新增 CMS 頁面： Index 與 Detail Page
準備好讓資料變成網頁了嗎？跟著以下步驟操作：
點擊 Framer 左側面板的「Pages (頁面)」分頁。
點擊旁邊的「+」號新增頁面，並選擇「New CMS Page」。
選擇你要串接的 Collection (例如我們上一篇建立的 Articles)。
這時候，畫面會跳出兩個選項讓你選擇：「Index Page」與「Detail Page」。這兩者有什麼不同呢？
Index Page (索引頁面)： 主要用來展示「資料列表」。例如部落格的總覽頁、電商的產品型錄。選擇這個選項，Framer 會幫你自動建立一個包含所有項目的列表頁面。
Detail Page (詳細頁面)： 專門用來展示「單一筆資料」的獨立網頁。例如單篇部落格文章的內頁、單一產品的詳細介紹。
在這裡，我們先選擇「Detail Page」，因為我們要先為單篇文章設計內頁。
在 Framer 中，Detail Pages 的運作原理是結合「一個可重複使用的排版」與「CMS 資料庫的內容」。也就是只需要設計一次，Framer 就會自動為資料庫裡的每一個項目 (Item) 產生專屬的頁面，並自動填入對應的內容。
核心關鍵：用 Variables (變數) 串接資料
當你把頁面設計好，要怎麼讓網頁上的文字框，知道它應該自動顯示 CMS 中的哪一個資料呢？這其中就是透過 Variables (變數) 來連結資料的。
串接資料的 3 個簡單步驟：
點選畫布上你想要連動的元素（例如：一個文字圖層或一張圖片）。
在右側屬性面板找到對應的屬性（例如文字內容或圖片的 Fill），點擊旁邊的「+」號。
選擇「Set Variable (設定變數)」，然後挑選你要串接的 CMS 欄位（例如：Title 或 Banner）。
只要這樣設定好，這個文字框就會變成「佔位符」，自動根據不同的頁面顯示正確的內容。這時可以在左上角選單切換，預覽其他 Item 頁面。
進階設定：Conditional Visibility (條件式顯示)
實務上可能會遇到一個問題：例如在製作作品集時，有些作品有綁 Demo 網站，有些則沒有，但是版面設計放上按鈕的話，每一頁都會出現…如何讓沒有連結的文章，不顯示按鈕呢？這個狀況可以使用條件式顯示 (Conditional Visibility) 來解決。
我們可以在樣式面板 (Styles panel) 中，針對按鈕的「Visible (可見度)」屬性設定變數。 選擇該連結欄位，並將變數條件設定為「Is Set (已設定)」。 這樣一來，Framer 就只會在該欄位有填寫資料時才顯示按鈕，如果沒填寫，按鈕就會自動隱藏，讓排版保持乾淨。這個邏輯也可以套用在其他類似的情境：例如在團隊成員列表中，通常會放上該成員的各種社群 icon。但不是每個人都有所有的社群帳號。此時可以設定若 CMS 裡面沒有放入某個社群平台的網址，就不顯示該 icon。
隨處可用的 Collection Lists (資料列表)
Detail Pages 是用來呈現「單一」內容，那如果我們想在首頁放一個「最新文章總覽」，一口氣顯示多筆資料呢？這時候就可以使用 Collection Lists (資料列表) ！
這是很多新手容易卡住的地方：若是沒有將 CMS 放入畫布的圖層結構中，就會沒辦法連結變數（如上圖）。跟著以下的步驟放入，就可以連結變數了，跟著試試看吧！
如何在已設計好的頁面放入 Collection Lists
到左側的 Insert (插入) 面板，往下捲動找到 Collections，把你想要的 Collection 拖曳進畫布中。
拖曳進來後會看到他自動幫你生成一個清單樣式。因為我們想要使用之前已經設計好的，所以把這個預設的文字及圖片刪掉（但保留上面兩層有 CMS icon的圖層，我們要把東西放在這個圖層結構底下）。
把原本設計好的卡片做成 Components，放入 CMS 的巢狀結構底下（只要放一個卡片就好）。這時就會看到 CMS 的 Variable 出現了！
一一連結起來，卡片就會自動套用好 CMS 的欄位，變成一個列表！這樣如果有修改 CMS 內容，這邊的列表內容也會自動更新。
列表的 5 大實用屬性設定
完成列表後，如何再去設定清單顯示的內容呢？點選整個 Collection List 後，右側面板會出現內容屬性 (Content properties)，能讓你控制資料的呈現方式：
屬性名稱 | 用法 |
|---|---|
Sorting (排序) | 控制項目的顯示順序。你可以依照日期、標題，或是自訂的數字欄位來排序。 |
State (狀態) | 點選「Empty」就可以設定空狀態的樣式。例如訪客使用篩選功能，但沒有符合條件的文章，這時畫面上應該出現「找不到文章」。 |
Filters (篩選) | 縮小顯示範圍。例如：搭配 Toggle 欄位，設定只顯示被標記為「精選 (Featured)」的文章。 |
Sorting (排序) | 資料的排序方式，例如依照日期排序，或者是編號排序（設定數字 Number 欄位）。 |
Pagination (分頁) | 如果你的資料量很大，開啟分頁功能可以把它切成較小的區塊，避免網頁載入過慢。 |
Limit to (數量限制) | 限制畫面上最多顯示幾個項目。非常適合用在首頁的「最新 3 篇文章」區塊。 |
Start Offset (起始偏移) | 略過前面幾筆資料。適合用在首頁已經有一張大主圖文章，底下的列表想從「第 2 篇」開始顯示時使用。 |
小提醒：超連結設定
最後一個小提醒：預設情況下，Framer 會自動把整個列表的卡片，連結到它專屬的頁面 (Detail Page)。但如果你想要變成只有點擊卡片裡的「閱讀更多」才跳轉，那必須先移除點選 CMS Collection 圖層，移除連結，再單獨為按鈕加上連結（把「Link to」欄位設定為「/articles/:slug」。）
下一步：準備好迎接進階互動了嗎？
恭喜你完成了第二階段的學習啦～現在我們不僅擁有了整齊的 CMS 資料庫，還學會了如何呈現內頁及列表，並且都能串接 CMS 資料庫自動更新。我覺得這部分內容，對新手來說可能會有點稍稍複雜，如果你卡關了，可以來交流基地求助喔！
接下來，如果訪客想要在你的網站上「主動搜尋」文章，或是透過「點擊標籤」來過濾特定分類的內容，該怎麼做呢？下一篇文章，我們將介紹 Framer 2026 初最新推出的動態篩選器 (Dynamic Filters)！