Webflow 筆記 -CMS 的使用場合與技術棧

前言

這篇文章的目的在於筆記我在對 Webflow CMS這篇文章的目的在於筆記我在對 Webflow CMS 的用途與技術的理解 —

Webflow Component 的使用方式和 Figma 中的邏輯類似，在靜態網頁的範籌中足夠好用，但當我希望將網站能力擴展到大量、或動態內容時就需要運用 Webflow 的 CMS 功能。

Webflow CMS 的設定更加的費時與不直覺，因此我透過這篇文章來註記何時適合使用 CMS？以及設定時部分技術細節。

費用

要認真將 Webflow 客製成為特定目的網站時，Free Site Plan 只能建立 2 個頁面、肯定不夠用，其提供的 50 CMS item 最多能作為體驗功能使用；因此要選用 Basic Plan 還是 CMS Plan 的判斷依據正是「此網站是否有大量而重複的內容、需要使 CMS item 進行管理/篩選」。

圖片

以我的作品集為例，如果將 Case study 做成 Component，則需將圖片上傳到 Assests，再連結到 Component 的 Property，這些圖片多為一次性使用，堆積在 Assets 裡長期而言不利整頓。

而對 CMS 而言，圖片是上傳在單一 Collection 中，不會與其它用途的 Assest 混雜在一起。換句話說，如果是一次性使用的圖片，使用 CMS 能更有系統的整理。

Dynamic Style

目前 Webflow 不允許對 Component 進行顏色的客製(下圖左)；相對的，CMS 允許對文字色和背景色做修改(下圖中)，如此一來我就能為不同的 Item 設置不一樣的 CTA button 顏色(下圖右)，未來依可進一步為每個 Item 設不同的 Tag 和主標題顏色。

CMS Dynamic style 下的 Hover 效果設定

然而，當使用 Dynamic style 時，顏色是以 inline 方式指定的，這會使我為被指定了 Dynamic style 的元素做 hover 換色特效時失效 — 因為 CSS 優先級低於 inline style。

透過爬文 ( https://discourse.webflow.com/t/dynamic-color-on-hover/22153 )，我學到可以設置 2 個重疊的 CTA Button，一為 Default 色、一為 Hover 色，並使 Default 色者在 Hover 時 Opacity 為 0 來去營造變色效果。

如果不想這麼麻煩的話，也可以選擇變化和 inline style 不衝突的其它 CSSS 屬性來達成 Hover 效果。

Nested CMS

想要為 Item 添加 Tag 時，在 Component 我只能選則用純文字、或將所有Item 的 Tag 建進 Component 後再依 Instance 去做隱藏。

使用 CMS 時可用 Nested CMS 的概念，設定一個 Collection 專門用來放 Tag 種類，再建正式的 Item Collection、以 Multi-Reference 的欄位來連結 Tag。

CMS Filter

使用 CMS 時，可搭配 Finsweet 開發的一系列客製方法，將 Webflow Form 作為控制元件去進行對 CMS item 的動態篩選，可使用的控件包含 checkbox, radio button, search input, range slider, drop-down, tag…等，最佳的範例可見 Finsweet 的 Demo Site ( https://webflow.com/made-in-webflow/website/CMS-Filter-Example-by-Attributes )。

Screenshot from Finsweet’s Attributes EC clonable demo site

Batch import by Zapier

最後，使用 CMS 時，可以透過 Zapier 或其它 API 方式去新增/更新 CMS Collection 中的 item，實現 CMS 動態更新的能力。

Zapier 設定畫面

左 — Spreadsheet Raw Data; 右 — 透過 Zapier 新增的 CMS item

總結

如果設計的網頁為單純 Protfolio 或單頁 Landing Page，Webflow Component 是夠用的；但如果目的是用 Webflow 組建出 blog、企業官網 ( 含自身新聞文章清單 )、小型電商、SaaS… 等，則活用 CMS 並為該方案付費則是有其必要性。