摘 要： 以目前在國外廣泛應用的Drupal 7為應用開發框架，結合HTML5、樣式表、動態腳本和第三方插件技術，通過在WAMP平臺上對Drupal進行二次開發，設計了一套具有友好界面、易添加與刪除容器，并動態加載數據的布局模板。該模板采取分層設計，從根容器到目標內容容器構建頁面框架；采用HTML5自適應布局設計方法，針對不同的業務需求完成個性化定制界面UI。同時介紹了利用主流瀏覽器調試工具對界面代碼進行分析與調試。

關鍵詞： Drupal 7； HTML5； 樣式表； 動態腳本； 自適應布局

中圖分類號：TP315 文獻標志碼：A 文章編號：1006-8228（2013）12-52-03

Secondary development of HTML layout template based on Drupal 7

Chen Hao， Wu Jian

（Information system of Suzhou institute， Suzhou trade and commerce college， Suzhou， Jiangsu 215009， China）

Abstract： Taking Drupal 7， widely used overseas， as development framework， combining with HTML5， style sheets， dynamic scripting and third-party plug-in technology， Drupal on WAMP platform is developed for the second time. A set of friendly interface is designed， on which it is easy to add and delete container and dynamically load data layout template. Adaptive layout template method using HTML5 is used. UI can be customized according to different business needs. After the design is completed， the use of mainstream browsers interface code debugging tools for analysis and debugging is introduced.

Key words： Drupal 7； HTML5； style sheets； dynamic script； adaptive layout

0 引言

目前，三網融合趨勢日趨明顯，網絡應用越來越集成化，各種CMS被廣泛地應用于Web App制作。其中Druapl作為功能強大的CMF，以其功能豐富的CMS結合PHP Framework受到全球網站開發者的青睞。從長遠來看，Drupal先進的模塊化設計理念結合“自適應布局”會成為國內互聯網應用的主流。“自適應布局”是利用HTML5的布局代碼來快速建立新的應用界面的方法，其易用性好，可以適應不同設備，并有著很好的定制性和替換性，克服了傳統界面修改及其繁瑣或是無法修改的缺點[1]。

本文利用Drupal進行二次開發，設計一套具有友好界面、易添加與刪除容器并動態加載數據的布局模板。

1 項目架構

1.1 總框架

本設計采用Drupal默認的主應用框架，結合HTML5、樣式表、動態腳本和第三方插件技術美化默認布局。系統能夠快速完成單個元素樣式的修改，用戶可以調用該模板的內容發布器來快速發布、修改和刪除內容。項目的開發流程圖如圖1所示[2]，本文將討論“修改為Druapl輸出”部分的內容。

預期模板包含2個默認頁面變量和8個Region，插入外部樣式表CSS調整樣式，利用外部動態腳本JS來調整動態效果。

1.2 子模塊設計

⑴ 頁面頭部設定2個默認變量標志（Logo）和導航（Navigation），作為應用的標示和總體導航，出現在所有頁面的頭部。

⑵ 顯示區塊定義為Region，數據動態加載，可以有效地分離數據與UI，降低元素樣式關聯性。包括首頁與分頁在內，一共設計有8個Region。分別是[featured]、 [content]、[sidebar]、[social]、[footer]、[help]、[page_top]和[page_bottom]。其中[featured]、[content]、[sidebar]、[social]、[footer]是自定義顯性區域，其他3個是系統隱性區域。

圖2 首頁框架圖

圖3 分頁框架圖

⑶ 根據效果圖設定的CSS樣式定義放入一個自建的外部樣式表文件，命名為custom.css，用于自適應屏幕大小的CSS樣式放入media.css文件中，并且加入適應IE版本的CSS插件ie.css；外部動態腳本除了用來做檢測瀏覽器功能支持情況檢查的第三方插件modernizr.js，其余自定義JS放入命名為custom.js的文件。

⑷ 結合以上分析，完成.info文件編寫。包括版式的基本信息、外部樣式表CSS文件指向、外部動態腳本指向和區域列表[3]。布局形式如圖2和圖3所示，具體代碼如下：

name=Watercolor

description=Built for watercolor paintings style framework

core=7.x

；CSS

stylesheets[all][]=assets/css/custom.css

stylesheets[screen and （max-width：600px）][]=assets/css/media.css

stylesheets-conditional[if lt IE 8][all][]=assets/css/ie.css

；JS

scripts[]=assets/js/modernizr.js

scripts[]=assets/js/custom.js

；Regions

regions[featured]=Featured

regions[help]=Help

regions[content]=Content

regions[sidebar]=Sidebar

regions[social]=Social Icons

regions[footer]=Footer

regions[page_top]=Page Top

regions[page_bottom]=Page Bottom

2 分層設計

2.1 樣式表設計

主頁面采用960像素標準定寬；主菜單浮動在右側，條目行內成塊顯示；重點部分高395像素，設背景；社群圖標浮動右側，版權部分高75像素，不繼承浮動。分頁同樣采用960像素定寬，內容區塊高度312像素，內容浮動左側；側邊欄寬339像素，跟隨內容浮動左側，主菜單、社群和版權區塊與主頁設置相同。

關鍵設計代碼如下：

#page{ width： 960px； }

#main-menu{ float： right； }

#main-menu .menu li{ display： inline-block； }

#featured { height： 395px； background：url（../images/

featured_bg.gif）； }

#content { height： 312px； }

.content-block{ width： 291px； float： left； }

#social-icons{ float： right； clear： both； }

#sidebar { float： left； width： 338px； }

#footer { height： 75px； clear： both； }

2.2 頁面動態顯示設計

數據加載采用Drupal 7的頁面動態信息通過各級模板，分層加載，各層設計簡述如下。

⑴ html.tpl.php設計

頂層頁面中指明該模板設計為HTML5，所以替換頭部為

<！DOCTYPE HTML>

添加舊版瀏覽器適配的代碼，其中路徑使用drupal變量以適應不同環境：

<！--[if lt IE 9]>

<！[endif]-->

⑵ page.tpl.php設計

不采用默認的page頁面中導航（Navigation），采用橫排輸出格式，添加新代碼：

<？php print theme（'links__system_main_menu'，

array（'links' => $main_menu， 'attributes' => array（'id' =>

'main-menu'， 'class' => array（'links'， 'inline'， 'clearfix'）），

'heading' => t（'Main menu'）））； ？>

這樣所有頁面都有了主菜單頭部。分頁保持page.tpl.php，利用一份拷貝并更名page--front.tpl.php，利用它為首頁服務。分頁中的二級子標題設計采用以下代碼：

<？php if （$title）： ？>

<？php print $title；

？><？php endif； ？>

首頁的信息通過featured變量、content變量、social變量和footer變量讀取數據庫信息：

<？php print render（$page['featured']）； ？>…

分頁中的信息多一個變量sidebar，用于輸出邊欄信息。

⑶ region.tpl.php設計

區域的劃分主要通過drupal管理員菜單中進行布局設定，region.tpl.php中不需要設定div，刪除系統模板中的類的div容器，刪除代碼為：

⑷ node.tpl.php設計

去除系統模板的node.tpl.php中原本包含node的div；同時去除包含content的div。針對個性子頁面，建立起node—custom.tpl.php的頁面滿足設計要求。

⑸ block.tpl.php設計

設計通過block-views—sidebar-exhibit-block.tpl.php來加入feature-block，加上特殊的CSS樣式；通過block--block--3.tpl.php來加入特殊的樣式feature-content。給aside加上特殊的class并添加每一個所需要的樣式，classt設定在Ddrupal的structure中配置block。

⑹ 其他動態頁面

利用第三方模塊views做細節設計。views-view-fields.tpl.php中，只保留field的content變量，通過css調整顯示樣式完成設計。

3 測試調試

測試頁面時，分別在PC、IPad和Android手機上使用IE、FireFox和Chrome來測試兼容性。同時結合第三方Devel模塊和Theme Developer模塊來進行調試[4]。

最終形成的文件包括templates文件夾中的各層模板文件，assets文件夾中css子文件夾中的樣式表文件、images文件夾中的圖片和js子文件夾腳本與插件，并且數據動態加載，樣式可控可調。

完成效果如圖4所示。

圖4 最終效果圖

4 結束語

經過設計與調試代碼，本課題實現了基于Drupal的主題二次開發：可以通過CSS靈活調整界面的元素位置，更改單個或多個元素的樣式；可以在多種設備上實現頁面以達到設計效果。本設計中采用LAMP為基礎平臺，結合HTML5自適應布局、樣式表、動態腳本和第三方插件技術，形成整套數據、樣式和顯示的Web B/S解決方案，設計方法合理，易于編寫代碼，設計速度快，順應主流Web應用要求，具有很好的后續開發前景。還需要進一步研究的問題有：優化JS與CSS代碼，提高模板的易用性。

參考文獻：

[1] 戴馬.淺談基于Drupal網站開發過程[J].信息系統工程，2011.8：

115-116

[2] 陳豪.網頁色彩設計的案例分析和試用總結[J].美與時代，2009.8：

82-84

[3] 付軍，鄭軍.Drupal在圖書館門戶網站建設中的應用[J].計算機光盤

軟件與應用，2012.23：203-204

[4] 孫方.基于Drupal電子學檔平臺設計與實現[J].現代教育技術，

2012.1：98-101