在前兩篇文章中，我們學會了建立資料庫與動態排版。但當你的網站文章越來越多時，訪客可能會很難找到他們想要的內容。而這篇文章的重點，就是要教你如何運用 Framer 動態篩選器 (Dynamic Filters)，為網站加上強大的搜尋與分類功能！
這不僅能大幅提升使用者體驗，還能讓你的網站看起來更專業。我們馬上開始吧～ (本系列教學內容擷取轉寫自 Framer 官方教學：Framer Update: CMS Dynamic Filters)
認識 Framer 全新的動態篩選器
過去在 Framer 中，要做出流暢的網頁篩選功能非常複雜，甚至需要寫程式碼或者是額外購買 Plugin。不過 Framer 終於在 2026 年 2 月 推出的 Dynamic Filters (動態篩選器) ，解決了長期以來的痛點。
目前 Framer 支援 4 種最常見的篩選元件，你可以依照需求自由搭配：
篩選器類型 | 應用情境 |
|---|---|
Search Field (搜尋框) | 讓訪客直接輸入關鍵字，即時搜尋文章標題或內容。 |
Dynamic Tabs (動態標籤) | 適合用來做分類切換（例如：設計 / 開發 / 日常）」。 |
Drop-down (下拉選單) | 當你的分類選項非常多（例如：年份、作者名稱）時，用下拉選單最省空間。 |
Checkbox (核取方塊) | 適合用來勾選多個條件，或是做簡單的開關（例如：只顯示「精選文章」）。 |
實作步驟：為你的文章列表加上分類
現在，我們來試試看設定 Dynamic Tabs (動態標籤) 吧！
如何建立動態篩選器
Step 1. 首先，點選畫布上你已經建立好的 Collection List (資料列表)。
Step 2. 到右側的屬性面板，找到 Content 區塊中的 Filters (篩選器)
Step 3. 點擊 Filters 後，在選單中找到你要連動的分類欄位（例如：Categories 分類），以及你要建立的篩選器類型。
Step 4. 完成！Framer 會直接在畫布上生成一排標籤，自動抓取你在 CMS 裡設定好的分類選項，並且馬上就能運作，完全不需要設定複雜的元件變體
如何客製化外觀與顏色
篩選器加進來後，可以自由修改它的外觀。只要對著標籤點擊兩下，就能進入編輯模式。
在這裡，你可以針對與 Default (預設狀態) 與 Active (選取狀態) 更改背景顏色、文字顏色或字體大小，讓它符合你的品牌視覺。也可以增加 Hover (懸停狀態) 的樣式。
修改完成後，按左上角回到頁面，你會發現所有的標籤都已經同步更新了！
背後邏輯解析：網址參數與清除篩選
Framer 的動態篩選器，其實背後的功臣是 Page Variables (頁面變數)。
什麼是 Page Variables？
當訪客在頁面上點擊了一個分類標籤，這個動作會改變 Page Variables (頁面變數) 的值；接著，底下的資料列表會自動將 CMS 欄位與這個「變數」進行比對，過濾並更新顯示出符合條件的結果。
而且當你點擊篩選器時，你會發現網頁上方的網址列 (URL) 也跟著改變了，多出了一段網址參數 (Query parameters)。這代表你可以直接複製這個「已經篩選過」的網址分享給別人，對方點開來就會看到一模一樣的篩選結果。
如何設定「清除所有篩選條件 (Clear Filters)」按鈕
當訪客同時用了搜尋框、又點了分類標籤，最後想要重新看所有文章時，我們通常會提供一顆「清除篩選」的按鈕。這個設定也非常簡單：
先在畫布上放入一個按鈕。
點選按鈕，在右側屬性面板最上面找到 Interactions (互動)。
點擊「+」號，選擇「Reset Variables (重置變數)」。
這樣就搞定了！現在只要訪客點擊這顆按鈕，所有篩選條件就會瞬間歸零，列表也會恢復成預設狀態。
設定 Empty State (空白狀態)
當訪客輸入了一個不存在的關鍵字，列表會瞬間變空白，這對使用者體驗不太好。我們來加上一個「Empty State (空白狀態)」吧！
點選你的 CMS Collection List，點擊底部的 「+」 ，選擇「Add Empty State」。Framer 會自動幫你產生一個區塊，可以把中間的 No Items 改成「找不到相關文章」。
原理是什麼呢**？**其實是 Framer 幫你在這個空白區塊加上了「條件式顯示 (Conditional Visibility)」。如果你去看它的設定，會發現它被設定為：當 Visible Items = 0 (可見項目為零) 時，才顯示這個區塊。
ps. 如果想回去看看空白狀態長怎樣，只要把右側面板的 State 切換成 Empty 就可以預覽囉！
結語：完成你的專屬 Framer CMS 網站！
恭喜！跟著我們一路從第一篇走到這裡，你已經掌握了 Framer CMS 的所有核心功能。
從建立資料庫 (Collections)、設定欄位 (Fields)、設計自動更新的版面 (Detail Pages)，到最後加上動態篩選器 (Dynamic Filters)。現在的你，已經具備了獨立架設高質感、易維護網站的強大能力了！
實際在設計 CMS 頁面時，如果還有遇到其他問題，歡迎來交流基地一起討論～