一種新的基于控件的層式模板文件實現(xiàn)及應(yīng)用

李志德，徐世波，郭金涵

（航天工程大學教研保障中心，北京 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è)計了一種基于控件的層式模板文件。

1 模板文件的構(gòu)成

1.1 基礎(chǔ)架構(gòu)

基礎(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 部分，每個容器作為一層。

1.2 CSS 樣式

CSS 樣式是指利用CSS 語法對模板文件中元素（容器、控件等）樣式進行控制的CSS 代碼。

在新的模板文件中，樣式設(shè)置主要包括容器和控件2 個元素。容器樣式是用來控制容器位置、大小、背景、邊距、邊框等?？丶邮娇梢钥刂瓶丶旧順邮?，同時也可以控制控件內(nèi)元素樣式，主要包括位置、大小、顏色、字體、背景、排列方式、邊距等。容器樣式設(shè)置方式包括2 種：一是利用Web 可視化方式進行選擇設(shè)置或輸入樣式值設(shè)置；二是利用可視化編輯框輸入CSS 代碼進行樣式設(shè)置。

1.3 容器

容器是指模板文件中用來放置控件的元素。模板文件的主體部分是由一層層容器組成，其基本規(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 可視化操作。

1.4 控件

控件是模板文件的基本組成單元，可以用來放置圖片、新聞、視頻、內(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)容顯示控件、新聞列表顯示控件、文件列表控件、導航控件和留言板控件等。

2 模板文件的主要操作

模板文件的主要操作包括生成模板文件、編輯模板文件、設(shè)定模板欄目、刪除和刷新模板文件。

2.1 生成模板文件

在CMS 內(nèi)容管理系統(tǒng)中依次點擊“選擇站點”→“模板維護”→“創(chuàng)建模板文件”，彈出模板文件生成對話框。

在模板文件對話框中，選擇模板類型，輸入模板名稱和標題，選擇模板文件增加方式。模板文件的增加方式包括默認和復制，默認方式利用基礎(chǔ)架構(gòu)直接生成模板文件，復制方式利用已有網(wǎng)站文件生成新的模板文件。保存上述選擇后，內(nèi)容管理系統(tǒng)將根據(jù)選擇自動生成一個基本模板文件，默認方式下生成的基本模板文件只包括基礎(chǔ)架構(gòu)。

在模板文件中，每個塊中都有一個“放置控件”的操作接口，該接口描述了當前容器、控件狀態(tài)和控件操作按鈕。

2.2 編輯模板文件

模板文件的編輯包括容器操作、樣式操作和控件操作。

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 種。

2.3 設(shè)定模板欄目

在模板文件上，點擊鼠標右鍵，在彈出式選單中選擇“模板設(shè)定”即可打開欄目設(shè)定頁面。欄目設(shè)定頁面分為兩列，左列為備選欄目，右列為已選欄目。將需要使用的欄目在備選欄目列表中進行勾選即可?？梢酝ㄟ^勾選進行欄目的添加和刪除。

2.4 刪除與刷新模板文件

在模板文件上點擊鼠標右鍵，在彈出式選單中選擇“刪除模板”即可將當前模板文件刪除；選擇“刷新”則可利用當前模板和數(shù)據(jù)庫數(shù)據(jù)生成靜態(tài)HTML文件。

3 模板文件其他輔助操作

3.1 欄目的主要操作

欄目主要操作包括欄目增加、刪除和設(shè)置。

3.1.1 增加欄目

在CMS 內(nèi)容管理系統(tǒng)中，依次點擊“站點管理”→“欄目管理”，打開欄目管理界面，可看到樹型列表式欄目信息。

在“欄目管理”界面，在“欄目節(jié)點維護”上點擊鼠標右鍵，在彈出選單上選擇“增加欄目”，則系統(tǒng)自動在欄目節(jié)點維護樹中添加一個欄目，名稱等信息為默認值。如果在已有欄目名稱上點擊右鍵，選擇“增加欄目”，則自動為當前欄目添加子欄目。

3.1.2 欄目編輯

在欄目節(jié)點維護樹中，鼠標左鍵點擊任何一個欄目名稱，則顯示欄目編輯界面。

在欄目編輯界面，可以修改欄目名稱、欄目簡稱、欄目打開方式、欄目類型和新聞引用頁等。欄目引用頁的修改和設(shè)定可在模板文件的操作中進行。

3.1.3 欄目刪除

在欄目節(jié)點維護樹內(nèi)任何一個欄目上點擊鼠標右鍵，在彈出的選單上選擇“刪除欄目”，即可將當前欄目刪除。

3.2 控件的主要操作

在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 控件復制

在控件管理界面，勾選要復制的控件，點擊“控件復制”按鈕，在彈出的對話框中輸入控件名稱，點擊“確定”按鈕即可。

4 基于控件的層式模板文件實現(xiàn)原理

模板文件實現(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 所示。

5 基于控件的層式模板文件應(yīng)用分析

對國內(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)語言要求。

6 結(jié)語

本文提出的基于控件的層式模板文件將有效簡化了信息展示系統(tǒng)建設(shè)用戶操作方式，降低了在HTML代碼、模板語言和CSS 樣式層疊語言方面對信息展示系統(tǒng)建設(shè)用戶的要求，提高了CMS 內(nèi)容管理系統(tǒng)中模板文件的易用性。