這兩天3.8婦女節，各大電商又開始不斷推出促銷活動，借勢營銷。電商平臺仿佛不願意放過任壹個可以作為營銷話題的日子，不斷推陳出新。經過10多年的電商經驗積累，現在做起活動來遊刃有余，豐富多樣。
下圖是我從淘寶、京東上取的兩個活動頁面，可以看出頁面自定義程度很高，美觀大方。另壹種叫法叫做店鋪裝修或頁面配置，那麽問題來了， 這樣壹個自定義頁面怎麽配置？怎樣通過系統化的方式實現頁面動態配置。
由於頁面動態配置的內容較多，所以打算分兩篇長文介紹，第壹篇先講頁面動態配置的整體產品邏輯，第二篇詳細描述各組件的功能，壹直到組裝之後的解析。
頁面動態配置是CMS系統（內容管理系統）的壹部分，在電商行業，CMS系統有時會局限用作頁面動態配置的功能。有時也叫作“ 裝修 ”，店鋪裝修、頁面裝修、自定義新頁面。平臺見到的首頁管理和新建活動頁面都屬於此類範疇。
在PC電商時代，頁面的自定義比作蓋樓，添加壹個樓層，每層可以自定義內容，譬如商品、優惠券、商品排名等。“淘寶旺鋪“就是店鋪裝修發展出來的壹門生意，淘寶店家可以選擇基礎模塊的內容，編輯首頁或新建頁面，動態配置頁面。
可以把頁面的動態配置比作樂高玩具，每壹個組件就像樂高積木，可以用它搭建不同的樂高玩具，就類似組裝成不同的動態頁面。我將頁面的動態配置分為3步：組件→ 位置+內容 → 動態頁面，如下圖。
2.1 基礎組件
組件是動態頁面的基礎，提供給用戶編輯具體展示的信息。有許多類型的組件：圖片輪播、ICON、優惠券等，每種組件都可以有多個不同的樣式，選擇內部展示的內容或者自定義。用的最常見的就是鏈接，組件顯示樣式雖然多樣，但是點擊之後通往的頁面選擇庫卻是***通的。例如：新的活動頁面、商品詳情頁、商品聚合頁、購物車、客服等等。
基礎組件的定義和解析是自定義頁面的核心，不同的組件有不同的功能，表示不同類型的內容。每個組件都需要單獨設計，定義其規則和樣式。 例如ICON、圖片輪播就是簡單的圖片展示，商品排名對應的算法較為復雜，需要實時去取動態排名。
2.2 位置+內容
有了組件之後，用戶在設置或者系統在解析的時候，首先要確定組件在自定義頁面中的位置。位置可以稱為“樓層”，每個頁面的各樓層可以定義名稱、設置背景、配置內容，目前最主流的交互是拖動組件到相應的位置，設置內容之後實時預覽，自定義頁面動態可視化。
2.3 動態頁面
對於整個動態頁面，需要定義生效時間、結束時間、活動頁面名稱等基礎信息。設置之後可生成相應的鏈接進行預覽。
動態頁面是由不同的組件內容構成，首先按照各組件位置去解析，然後再去解析組件的內容（樣式、圖片/商品、背景、鏈接等）。按照上圖的反向流程走，就能解析出對應的自定義頁面內容。
首頁設置也是相同，類似自定義頁面，可動態設置首頁內容，動態添加自定義組件。目前絕大部分電商首頁都是動態配置，有著豐富的自定義內容。
配置組件有許多種，常見的圖片輪播、 商品推薦、商品分類、 寶貝排行、圖標（ICON）這幾種形式，其實是富文本、 客服、優惠券、滿減活動、滿贈活動、自定義區域、商品搜索、文字、公告、倒計時、Tab組件（頂部、底部）。
豐富的自定義組件可以實現各式各樣的活動頁面，前面舉例的京東、淘寶活動頁都是通過CMS配置實現。
至於不同的組件設計和功能，下篇再詳細講解。
組件之間有些通用的自定義要素:
頁面動態配置的整體產品邏輯基本已經介紹完畢，可以了解到，頁面動態配置看似復雜，理順之後發現其實就分為三個步驟，絕大部分的復雜度增加只是基礎配置組件的豐富。
雖然CMS系統產品邏輯簡單，但是頁面要做到較高的自定義配置程度，需要技術框架的高效率和較強的可擴展性。在瀏覽壹個自定義頁面時，系統要逐步去解析該頁面下的自定義組件內容和要素，運算量很大。
目前絕大部門電商公司的自定義頁面僅僅停留在壹個初級階段，限於首頁和少數特殊頁面的自定義配置，而且自定義程度較低。本文提供了CMS系統的產品設計思路，落到實際項目中，還需要權衡實際需求和自定義配置程度之間的關系。