二月 11, 2019 | 前端與Vue
【Drupal教學】好多條件要篩選怎麼辦？Views Filter 輕鬆做出來！
如何定義網頁功能規格
3個篩選設計案例
為了讓你對於「網站篩選器」有更清晰的概念，我們特別選擇了三個代表性的網站案例：線上訂房網站、電子商務、博物館展覽回顧。這些案例可以幫助你了解篩選器在不同產業的應用情境。
(旅遊)AGODA
訂房網站 AGODA，在查詢空房的時候可以注意到左側有各種常用的住房條件可供篩選，如是否有停車場、是否有浴缸...等，用戶可通過豐富的條件篩選功能過濾出自己心儀的房型。
(電商)博客來
博客來在選擇商品分類後（以女性服飾類為例），還可以進一步的依照價格、顏色、尺寸...等的條件篩選商品，除了基本的款式還能篩選尺寸，用戶可以直接知道哪些商品還有適合自己的尺寸，能大大的節省時間。
(媒體)華岡博物館
創立已超過 50年的華岡博物館，至今為止舉辦過許多展覽。為了讓閱覽者能回顧過往的展覽，華岡博物館有著展覽回顧的頁面，並且加上地點、年份的條件篩選，使閱覽者可以隨著不同年份回憶博物館過去的所有展覽。
以上簡單的舉了三個範例，像這樣的網站還有很多很多。
如果你的網站也需要像這樣的條件篩選功能，不妨試試用 Drupal 的 Views Filter來製作吧！做法一點都不難，下面就快速的帶著你做一遍！
設定 Views Filter 事前準備
在進行Views Filter 設定之前，我們需要先有對應的內容類型、需要進行篩選的條件（如文章分類、性別、產品顏色、產品尺寸...等）。
以下面的範例來說，我們建立了名為「最新消息」的內容類型，並且新增「分類」欄位。
接下來，我們就來看看要怎麼應用 Views Filter 吧！
應用一： 建立文章列表
在建立文章列表時，我們可以在「過濾條件」新增「內容類型」的選項，並選擇對應的內容類型。（此處以最新消息為例）
儲存後，Views 就會透過該設定抓出網站中所有最新消息的文章，如此一來，文章列表就做好囉～
應用二： 建立篩選器
新增想要建立篩選器的條件（此處以最新消息的分類為例），將「顯示過濾器」打勾，並且將「運算元」選到【屬於其中之一】，基本的設定就完成了。
基本的設定是單選的模式，如想讓篩選器變為可多選的模式，可將「允許多重選擇」打勾 (紅框處)，即可達成需求。
儲存後，即可在頁面上方得到一個篩選器。
BONUS！：篩選器進階設定
篩選器還有進階設定可以進行更彈性的調整，只要搭配 Btter Exposed Filters 這個模組與 Views Ajax 就可以囉！
舉例來說，今天如果想做不需按按鈕送出，選擇選項後實時進行篩選的功能要怎麼處理呢？就讓我們一步步來吧～
首先，在安裝 Btter Exposed Filters 後，打開在 Views 設定頁面的右側的「進階」區域，選到「篩選表單」的【篩選表單樣式 的 基本】，
就可以選擇「Btter Exposed Filters」，然後儲存。
接著就能看到更進階的設定，請將「Enable auto-submit」、「Hide submit button」打勾後儲存。
下一步，一樣是在進階區域，選擇「使用 AJAX」，
將「使用 AJAX 」打勾後儲存，這樣就完成設定囉。
結語
Drupal 的 Views 搭配不同的設定可以完成非常多的頁面、區塊，Views Filter 就是其中一個。因為不會限制條件的數量，因此你的篩選器想要有幾個條件，就可以新增幾個條件，彈性非常的大！
根據不同的情境，不管是想撈出特定資料、製作篩選器...等，Views Filter 都可以輕鬆做到！如果你也有相關的需求，不妨使用 Views Filter 試試看吧！
