李志德,徐世波,郭金涵
(航天工程大學教研保障中心,北京 101416)
在內(nèi)容管理系統(tǒng)(content management system,CMS)中,模板文件是指包含模板語言、HTML 代碼和CSS 層疊樣式語言的文本文件或數(shù)據(jù)庫數(shù)據(jù)[1-2],主要用來分離內(nèi)容管理系統(tǒng)的顯示界面和數(shù)據(jù),實現(xiàn)顯示界面的復用。通過模板文件,可以大大提高系統(tǒng)顯示層開發(fā)效率,減少系統(tǒng)開發(fā)工作量。當前內(nèi)容管理系統(tǒng)模板文件的編輯主要是對HTML 文件的編輯,使CMS 中模板編輯有一定的難度[3-8]。
為了減少模板文件對HTML 代碼、模板語言和CSS 樣式層疊語言的依賴及其對模板文件編輯人員的相關(guān)語言要求,提高模板文件的可用性,本文基于傳統(tǒng)CMS 的模板文件結(jié)構(gòu)、主要操作、輔助操作和實現(xiàn)原理,設(shè)計了一種基于控件的層式模板文件。
基礎(chǔ)架構(gòu)是指模板文件初生成時所包含的公共屬性和基本模塊,主要包括規(guī)范聲明、根節(jié)點、頭節(jié)點和節(jié)點。
規(guī)范聲明是聲明當前模板文件采用的規(guī)范(HTML或 XHTML),例如:,是聲明當前模板采用的是XHTML 1.0 過渡版本。
根節(jié)點包含了除規(guī)范聲明外的所有內(nèi)容。
頭節(jié)點主要包含文檔的內(nèi)容類型、語言、作者、版權(quán)、關(guān)鍵字、描述等元素,還包含模板文件標題,引用的CSS 文件、JS 文件和部分JS 腳本等。
節(jié)點是模板文件的主體,也是用戶需要自己構(gòu)造的主要部分。在模板文件初步生成時,節(jié)點自動劃分為主容器,TOPFRAME、MAINFRAME、BOTFRAME 和OTHERFRAME 子容器等5 部分,每個容器作為一層。
CSS 樣式是指利用CSS 語法對模板文件中元素(容器、控件等)樣式進行控制的CSS 代碼。
在新的模板文件中,樣式設(shè)置主要包括容器和控件2 個元素。容器樣式是用來控制容器位置、大小、背景、邊距、邊框等??丶邮娇梢钥刂瓶丶旧順邮?,同時也可以控制控件內(nèi)元素樣式,主要包括位置、大小、顏色、字體、背景、排列方式、邊距等。容器樣式設(shè)置方式包括2 種:一是利用Web 可視化方式進行選擇設(shè)置或輸入樣式值設(shè)置;二是利用可視化編輯框輸入CSS 代碼進行樣式設(shè)置。
容器是指模板文件中用來放置控件的元素。模板文件的主體部分是由一層層容器組成,其基本規(guī)則為:
(1)容器中可以創(chuàng)建一個或多個容器;
(2)新創(chuàng)建容器中可以創(chuàng)建新容器;
(3)容器創(chuàng)建必須在TOPFRAME、MAINFRAME、BOTFRAME 和OTHERFRAME 容器基礎(chǔ)上創(chuàng)建;
(4)主容器中不能再創(chuàng)建新容器;
(5)除了主容器和TOPFRAME、MAINFRAME、BOTFRAME 和OTHERFRAME 容器外,創(chuàng)建的其他容器都可以移除;
(6)容器由系統(tǒng)采用線性序號方式自動命名,不可更改;
(7)容器可以增加和刪除,但是不可以修改;
(8)通過CSS 樣式語言確定容器樣式,有代碼式輸入和圖形化交互2 種編輯方式;
(9)所有關(guān)于容器的操作可以通過Web 可視化操作。
控件是模板文件的基本組成單元,可以用來放置圖片、新聞、視頻、內(nèi)容、導航等。通過控件,實現(xiàn)模板和后臺數(shù)據(jù)的交互。按照不同的分類標準,控件可以有不同的分類。
1.4.1 按照控件應(yīng)用范圍分類
按照控件的應(yīng)用范圍,控件可以分為2 種:一是以普適性和共性為基礎(chǔ)構(gòu)建的基礎(chǔ)控件,二是在基礎(chǔ)控件基礎(chǔ)上,以個性為特征,并以圖形化交互式進行個性設(shè)置的實例化控件。
基礎(chǔ)控件普適性和共性是指適用于CMS 內(nèi)容管理系統(tǒng)所有網(wǎng)站的特性,這些特性對于構(gòu)建信息展示平臺的用戶具有透明、無關(guān)和不可修改等特點,例如基礎(chǔ)控件對數(shù)據(jù)庫的訪問和讀寫操作、基礎(chǔ)控件和欄目底層數(shù)據(jù)的關(guān)聯(lián)操作、實例化控件的參數(shù)化設(shè)置等。通常,基礎(chǔ)控件由專業(yè)開發(fā)人員依托開源模板解析引擎進行開發(fā)。
實例化控件個性是指適用于CMS 內(nèi)容管理系統(tǒng)所管理某一網(wǎng)站的特性,這些特性是可定制、平臺相關(guān)和可修改,例如實例化控件的名稱、所屬網(wǎng)站、引用的基礎(chǔ)控件、狀態(tài)、圖片尺寸、顯示標題字符數(shù)、是否顯示更多等。實例化控件由建設(shè)信息展示平臺的用戶構(gòu)建。
1.4.2 按照控件功能分類
按照控件功能分類,控件可分為內(nèi)容管理類控件、多媒體控件、個性化控件和其他控件等。
內(nèi)容管理類控件是與文字內(nèi)容相關(guān)的控件,例如新聞內(nèi)容顯示控件、新聞列表顯示控件、文件列表控件、導航控件和留言板控件等。
模板文件的主要操作包括生成模板文件、編輯模板文件、設(shè)定模板欄目、刪除和刷新模板文件。
在CMS 內(nèi)容管理系統(tǒng)中依次點擊“選擇站點”→“模板維護”→“創(chuàng)建模板文件”,彈出模板文件生成對話框。
在模板文件對話框中,選擇模板類型,輸入模板名稱和標題,選擇模板文件增加方式。模板文件的增加方式包括默認和復制,默認方式利用基礎(chǔ)架構(gòu)直接生成模板文件,復制方式利用已有網(wǎng)站文件生成新的模板文件。保存上述選擇后,內(nèi)容管理系統(tǒng)將根據(jù)選擇自動生成一個基本模板文件,默認方式下生成的基本模板文件只包括基礎(chǔ)架構(gòu)。
在模板文件中,每個塊中都有一個“放置控件”的操作接口,該接口描述了當前容器、控件狀態(tài)和控件操作按鈕。
模板文件的編輯包括容器操作、樣式操作和控件操作。
2.2.1 容器操作
(1)容器增加。在布局信息欄中選擇要添加的容器,點擊鼠標右鍵,在彈出的選單中選擇“增加容器”,該容器將作為子容器添加在當前容器中。新增加容器的大小、位置和排列方式將依據(jù)容器樣式自動設(shè)置。
(2)容器刪除。在需要刪除的容器上點擊鼠標右鍵,在彈出式選單中選擇“刪除容器”即可。
(3)容器樣式設(shè)置。在需要設(shè)置樣式的容器上點擊鼠標右鍵,在彈出式選單中選擇“設(shè)置樣式”,即可在彈出的樣式設(shè)置對話框中進行設(shè)置。可以設(shè)置高度、對齊式、外邊距、內(nèi)邊距、背景等,還可以通過輸入框“其他樣式”進行手動輸入CSS 代碼設(shè)置容器樣式。
2.2.2 控件操作
(1)控件添加。點擊模板控件操作接口中的“放置控件”按鈕,在彈出的控件選擇對話框中選擇要放置的控件,點擊“確定”按鈕即可放置控件。
(2)刪除控件。點擊控件操作接口中的“刪除控件”即可刪除當前控件。
(3)編輯控件。點擊控件操作接口中的“編輯控件”,以對話框的形式對當前控件進行基本屬性編輯,例如圖片控件中放置的圖片及其尺寸,新聞列表控件中的欄目、標題名稱、顯示行數(shù)和字符數(shù)等。
(4)設(shè)置樣式。點擊控件操作接口中的“設(shè)置樣式”,以對話框的形式對當前控件內(nèi)的元素進行樣式設(shè)置,對話框中的樣式設(shè)置又分為非代碼圖形化交互方式和CSS 代碼輸入方式2 種。
在模板文件上,點擊鼠標右鍵,在彈出式選單中選擇“模板設(shè)定”即可打開欄目設(shè)定頁面。欄目設(shè)定頁面分為兩列,左列為備選欄目,右列為已選欄目。將需要使用的欄目在備選欄目列表中進行勾選即可??梢酝ㄟ^勾選進行欄目的添加和刪除。
在模板文件上點擊鼠標右鍵,在彈出式選單中選擇“刪除模板”即可將當前模板文件刪除;選擇“刷新”則可利用當前模板和數(shù)據(jù)庫數(shù)據(jù)生成靜態(tài)HTML文件。
欄目主要操作包括欄目增加、刪除和設(shè)置。
3.1.1 增加欄目
在CMS 內(nèi)容管理系統(tǒng)中,依次點擊“站點管理”→“欄目管理”,打開欄目管理界面,可看到樹型列表式欄目信息。
在“欄目管理”界面,在“欄目節(jié)點維護”上點擊鼠標右鍵,在彈出選單上選擇“增加欄目”,則系統(tǒng)自動在欄目節(jié)點維護樹中添加一個欄目,名稱等信息為默認值。如果在已有欄目名稱上點擊右鍵,選擇“增加欄目”,則自動為當前欄目添加子欄目。
3.1.2 欄目編輯
在欄目節(jié)點維護樹中,鼠標左鍵點擊任何一個欄目名稱,則顯示欄目編輯界面。
在欄目編輯界面,可以修改欄目名稱、欄目簡稱、欄目打開方式、欄目類型和新聞引用頁等。欄目引用頁的修改和設(shè)定可在模板文件的操作中進行。
3.1.3 欄目刪除
在欄目節(jié)點維護樹內(nèi)任何一個欄目上點擊鼠標右鍵,在彈出的選單上選擇“刪除欄目”,即可將當前欄目刪除。
在CMS 內(nèi)容管理系統(tǒng)中,依次點擊“站點管理”→“控件管理”,即可進入控件管理界面,進行控件的增加、修改、刪除、參數(shù)設(shè)置和控件復制等操作。
3.2.1 增加控件
控件增加界面包括控件名稱、控件類型和可用控件選項。在控件增加界面輸入控件名稱,選擇控件類型(包括基礎(chǔ)類、新聞類、導航類等),可在系統(tǒng)中自定義控件和引用控件(主要控件可參看模板文件構(gòu)成中的控件設(shè)計部分)。選擇完成之后,如果點擊“保存”按鈕,則當前信息被保存并關(guān)閉對話框;如果點擊“下一步”按鈕,則進入具體控件內(nèi)元素屬性設(shè)置界面。
在控件內(nèi)元素屬性設(shè)置界面,可以設(shè)置當前控件引用的欄目內(nèi)容、標題狀態(tài)、標題名稱、行數(shù)、字數(shù)以及更多屬性。設(shè)置完成之后進行保存,以供模板文件編輯時使用。
3.2.2 控件修改
在控件管理界面,點擊“修改”按鈕,可在彈出的控件修改對話框中修改欄目內(nèi)容、標題狀態(tài)、標題名稱、行數(shù)、字數(shù)等控件的基本信息,修改完成后保存。
3.2.3 參數(shù)修改
在控件管理界面,點擊“參數(shù)修改”按鈕,可在彈出的對話框中修改控件參數(shù)并保存。
3.2.4 控件復制
在控件管理界面,勾選要復制的控件,點擊“控件復制”按鈕,在彈出的對話框中輸入控件名稱,點擊“確定”按鈕即可。
模板文件實現(xiàn)主要包括欄目設(shè)計器、控件庫設(shè)計器、模板文件設(shè)計器、靜態(tài)HTML 文件生成器以及數(shù)據(jù)庫。結(jié)合CMS 的部分內(nèi)容,模板文件操作順序和邏輯關(guān)系如圖1 所示。
根據(jù)模板文件實現(xiàn)原理,利用欄目設(shè)計器進行信息展示系統(tǒng)的欄目設(shè)計,包括欄目的名稱、類型、層次結(jié)構(gòu)、鏈接路徑等,并將欄目信息寫入數(shù)據(jù)庫。
利用控件庫設(shè)計器進行控件的添加、刪除和樣式編輯,包括控件名稱、控件所屬信息展示系統(tǒng)、引用基礎(chǔ)控件、控件內(nèi)容設(shè)置(包括控件對應(yīng)欄目、欄目名稱、字數(shù)、行數(shù)等)等信息,并將信息保存至數(shù)據(jù)庫中。
圖1 模板文件實現(xiàn)原理圖
利用模板文件設(shè)計器進行模板文件的添加、刪除、編輯和刷新,包括模板文件名稱、模板文件增加方式(默認增加方式、復制其他模板文件方式)、容器布局設(shè)置、控件增刪改等,并將信息保存至數(shù)據(jù)庫中。
利用靜態(tài)HTML 文件生成器,從數(shù)據(jù)庫中讀取欄目信息、控件信息和模板文件信息。
a)從Portleft XML 文件中讀取Portlet 信息,進行Portlet 信息初始化。
圖2 模板實體關(guān)系圖
b)依據(jù)模板編號初始化門戶信息展示平臺相關(guān)的自定義Portlet 控件信息。如果自定義控件是符合標簽控件,還要對各個子控件進行初始化。
c)依據(jù)模板編號初始化門戶信息展示平臺模板頁面信息表。如果模板頁面樣式代碼不為空,讀取并設(shè)置樣式代碼;如果控件樣式代碼不為空,則讀取并設(shè)置控件樣式代碼。
d)利用門戶信息展示平臺編號初始化欄目信息表。
e)利用模板編號獲得門戶信息展示平臺模板頁面信息表。
f)依據(jù)不同的模板頁面類型,分別進行不同的靜態(tài)HTML 頁面生成,包括首頁、類型頁、新聞頁、搜索頁、視頻頁。生成頁面的過程是:①創(chuàng)建文檔類型;②創(chuàng)建文件頭,包括meta 信息、標題、文件樣式連接、JS 引入和公共JS 代碼;③創(chuàng)建文件體,包括模板頁面層信息,依據(jù)容器層、控件、樣式和發(fā)布的信息依次創(chuàng)建TOPFRAME 、 MAINFRAM 、 BOTFRAME 和OTHERFRAME 等4 個DIV 層,并依據(jù)當前DIV 層是否有子DIV 層進行循環(huán)嵌套創(chuàng)建;④創(chuàng)建文件底部信息;⑤靜態(tài)HTML 文件輸出。
在模板文件實現(xiàn)中,主要數(shù)據(jù)庫關(guān)系如圖2 所示。
對國內(nèi)常見和常用CMS 的模板文件編輯形式和相關(guān)語言要求進行了比較分析,結(jié)果如表1 所示。
表1 常見CMS 模板文件編輯形式和相關(guān)語言要求表
與傳統(tǒng)的CMS 模板文件編輯形式和相關(guān)語言要求相比較而言,基于控件的層式模板文件將具備以下優(yōu)勢:
(1)傳統(tǒng) CMS 模板文件采用直接在線編輯HTML 文件的方式;而基于控件的層式模板文件提供了圖形化交互編輯方式,提高了模板文件編輯方式的可用性;
(2)傳統(tǒng)CMS 模板文件的構(gòu)造需要信息展示平臺建設(shè)用戶了解和掌握特定的CMS 模板語言、HTML語言和CSS 樣式層疊語言;而采用基于控件的層式模板文件則無需了解和掌握這些特定語言,從而在一定程度上降低了對模板編輯人員的相關(guān)語言要求。
本文提出的基于控件的層式模板文件將有效簡化了信息展示系統(tǒng)建設(shè)用戶操作方式,降低了在HTML代碼、模板語言和CSS 樣式層疊語言方面對信息展示系統(tǒng)建設(shè)用戶的要求,提高了CMS 內(nèi)容管理系統(tǒng)中模板文件的易用性。