編輯導(dǎo)語：CMS系統(tǒng)即內(nèi)容管理系統(tǒng)，結(jié)合CMS系統(tǒng)，運營人員可以更快速地完成網(wǎng)站搭建，減少開發(fā)資源的消耗。那么CMS系統(tǒng)應(yīng)該如何搭建？本篇文章里，作者總結(jié)了CMS系統(tǒng)搭建所需的要素和相應(yīng)的搭建策略，一起來看一下。

CMS系統(tǒng)（內(nèi)容管理系統(tǒng)）是可以嵌入到不同系統(tǒng)體系中的一種產(chǎn)品形態(tài)，主要幫助運營人員或者建站者完成業(yè)務(wù)所需的網(wǎng)站搭建，利用CMS系統(tǒng)可以很好地降低定制頻繁的網(wǎng)站所需的開發(fā)資源。

但是因為網(wǎng)站形態(tài)各異和不同類型網(wǎng)站的要求不同，目前沒有特別統(tǒng)一的CMS系統(tǒng)業(yè)務(wù)邏輯，通過參考為數(shù)不多的產(chǎn)品設(shè)計稿和Empire CMS（帝國）的開源文檔，我梳理出了CMS系統(tǒng)雛形所需的幾個要素。

產(chǎn)品背景：內(nèi)容管理——建站設(shè)計（門戶網(wǎng)站為主），用于處理網(wǎng)站多渠道定制或者客制化要求較多的場景。

先看下Empire CMS提供的建站步驟。

EmpireCMS建站步驟：

1. 增加欄目；
2. 模板制作；
3. 錄入信息；
4. 生成前臺頁面。

（截圖來自帝國CMS的開源平臺手冊）

狹義的CMS（實現(xiàn)用戶自運營）：

1. 增加欄目【編輯欄目信息屬性、頁面基本屬性-欄目類型】；
2. 選擇內(nèi)容模型【選擇預(yù)設(shè)的內(nèi)容模型，確定內(nèi)容展示形式】；
3. 編輯內(nèi)容【編輯內(nèi)容詳情】；
4. 生成前臺頁面【保存并同步信息到前臺】。

根據(jù)上述流程演化出來的兩個主要頁面功能模塊：欄目管理、內(nèi)容管理（又叫信息管理），以及根據(jù)系統(tǒng)類型所需的配置頁面，比如門戶類的網(wǎng)站、支持首頁管理和相關(guān)導(dǎo)航欄設(shè)置等。

更靈活更高級的內(nèi)容管理還存在另一個維度的表現(xiàn)形式：專題。

專題維度支持聚合不同欄目內(nèi)的同一種類型的頁面內(nèi)容，成為專題，專題的使用可以在不改變欄目自身屬性的情況下整合另一種規(guī)則的展示，使用上更靈活，運營起來更加自由。但對于常規(guī)的一些門戶網(wǎng)站或者個人站點這類輕運營的網(wǎng)站來說，使用欄目配置頁面規(guī)則已經(jīng)足夠。

一、欄目的使用

欄目是基礎(chǔ)的作為內(nèi)容集成的規(guī)則，通過欄目的定義，可以約束不同的頁面之間的固有聯(lián)系。通過子欄目的管理，配置不同內(nèi)容之間的層級關(guān)系。

欄目支持建立多級，新建欄目時即可選擇所需的內(nèi)容模型，父子級欄目的內(nèi)容模型可以是不一樣的，因為欄目的關(guān)系僅為后臺管理信息的集合關(guān)系，與前端展示邏輯沒有太多關(guān)聯(lián)，每一層欄目均可以獨立成為一個獨立展示的頁面。

當(dāng)然欄目的集合可以為部分自動化展示需求提供展示邏輯，在使用欄目管理相關(guān)內(nèi)容時，對于需要列表展示同欄目內(nèi)容的頁面可以直接獲取此欄目的下級子欄目，并進(jìn)行展示，我們只需要后臺維護(hù)號欄目的層級關(guān)系即可控制前端展示的列表內(nèi)容。

欄目需要包含什么基礎(chǔ)屬性呢？

我認(rèn)為欄目要滿足可用性，至少需要包含：欄目標(biāo)題、所屬欄目、欄目類型與頁面內(nèi)容模型三種基本信息，而如果需要令欄目更加好用的話，則可以加上如欄目狀態(tài)（顯示/隱藏）、外部鏈接、欄目介紹、權(quán)重等屬性內(nèi)容，甚至還可以增加相關(guān)的標(biāo)簽系統(tǒng)來豐富欄目的屬性內(nèi)容，使用靈活度更高。

二、內(nèi)容模型的使用

常規(guī)幾種內(nèi)容模型大類：產(chǎn)品模型、文章模型、單頁模型。（各人命名可能會存在差異，理解內(nèi)容即可）

1. 產(chǎn)品模型

自由度最高的頁面展示模型，可以結(jié)合前端預(yù)設(shè)計的各種組件進(jìn)行頁面布局設(shè)計，并通過組件中含有鏈接的部分附上其他詳情頁面的入口，一般是建站所用到的主要內(nèi)容模型。組件風(fēng)格和功能決定了此模型的風(fēng)格和能力。

2. 文章模型

此模型還可以細(xì)分為兩類：一般類和即時類。

一般類的文章模型可以用于搭建網(wǎng)站的幫助中心，信息介紹等非即時展示類頁面內(nèi)容的文章展示；而即時類則多用于需要展示新聞或快訊這些文章，關(guān)注時效性而無層級要求的文章展示。

文章模型可以在實際設(shè)計中分為上述兩種內(nèi)容模型，也可以抽象成為一種。文章模型只需要在內(nèi)容管理模塊中編輯好文章，即可推送到對應(yīng)的欄目頁面中展示。

3. 單頁模型

較為簡單的內(nèi)容展示模型，一般不含鏈接，僅作為內(nèi)容展示的頁面，搭建起來比較容易和快速，一般直接使用富文本編輯則可以完成。單頁模型一般用于快速搭建類如關(guān)于我們、網(wǎng)站簡介等這類圖文為主的頁面。

有了欄目類型與內(nèi)容模型，就可以完成基本的網(wǎng)站頁面的搭建工作了，為了更好地展示業(yè)務(wù)邏輯，可以參考下圖：

三、編輯內(nèi)容及形式

從易用性的角度看，好用的CMS系統(tǒng)最好可以實現(xiàn)所見所得的頁面配置形式，使得用戶不用前往前臺就可以查看現(xiàn)有頁面的配置效果。

例如shopify的個人站商店搭建時，使用的大綱加頁面預(yù)覽的形式，體驗起來是比較舒服且易用的。學(xué)習(xí)成本越低，對于運營人員來說就越簡單，因此在網(wǎng)站的搭建流程中，十分建議采用前端組件化的形式，進(jìn)行可視化編輯。

如下截圖源自shopify商店個人站的頁面配置，個人感覺是目前了解到的較好的可視化配置模式：

配置頁面的豐富度取決于我們開發(fā)的前端組件的豐富度，并且可以不斷拓展，適應(yīng)不同頁面風(fēng)格和業(yè)務(wù)要求。

四、其他必要的非功能性需求

一個合格的CMS系統(tǒng)出了支持配置出符合要求的網(wǎng)站，還需要補充或者考慮一些必須的非功能需求，配合使用，可以提高網(wǎng)站的“好評度”。

1. 頁面響應(yīng)

頁面響應(yīng)是影響頁面留存的首當(dāng)其沖，尤其是C端的網(wǎng)站。以下是一個關(guān)于頁面打開時間與放棄率的統(tǒng)計數(shù)據(jù)，在沒有特殊強調(diào)的頁面，個人建議是3S內(nèi)打開為宜（注意弱網(wǎng)絡(luò)環(huán)境的測試）。

2. 漸進(jìn)增強

漸進(jìn)增強是目前主流的設(shè)計思路，包含跨平臺與終端的訪問、不同版本瀏覽器的訪問等。在系統(tǒng)設(shè)計開始時最好就考慮漸進(jìn)增強的設(shè)計思路，如確認(rèn)好需要兼容的終端類型、瀏覽器版本。不妨和前端同學(xué)多溝通，讓產(chǎn)品體驗最優(yōu)化。

3. SEO優(yōu)化

有SEO需求的產(chǎn)品還需要在產(chǎn)品前期就提出，因為會影響前端設(shè)計的整體思路，目前大部分前端都是單頁面應(yīng)用的形式，不提前考慮SEO的話，很容易導(dǎo)致后續(xù)有對應(yīng)要求的時候無法滿足搜索要求，導(dǎo)致需要進(jìn)行技術(shù)重構(gòu)。

滿足上述幾點，基本可以推出第一版的CMS系統(tǒng)（或者模塊）了，至于后面更多的比如關(guān)鍵詞、標(biāo)簽、專題、自定義內(nèi)容模板等等，emmm，再說吧~

本文由 @大飛Eric 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議