主題(Theme)
主題是什么呢? 其實(shí)這個(gè)詞已經(jīng)被用的很泛了, 所有涉及外觀定制的地方都充斥著這個(gè)詞, 比如我們最常見到的windows桌面主題, QQ的界面皮膚等. 說白了主題就是外觀, 可定制主題就是允許用戶自定義應(yīng)用的外觀.
Drupal的外觀也是由其主題(Theme)來表現(xiàn)的, 一個(gè)CMS只有強(qiáng)大的業(yè)務(wù)邏輯處理和擴(kuò)展能力, 而沒有好的外表, 一樣會(huì)流失大量的用戶. 所幸Drupal的外觀表現(xiàn)機(jī)制同樣十分強(qiáng)大, 它允許網(wǎng)站開發(fā)人員為其網(wǎng)站重新設(shè)計(jì)開發(fā)個(gè)性化主題, 同時(shí)Drupal社區(qū)還有大量共享的主題, 下載下來后, 解壓到站點(diǎn)對(duì)應(yīng)的主題目錄(sites/all/themes,或sites/指定站點(diǎn)/themes)下即完成安裝, 在管理界面直接熱插拔應(yīng)用主題, 非常方便.
主題機(jī)制(Theme System)
為了支持這么靈活,方便又強(qiáng)大的可插拔主題, Drupal有一整套設(shè)計(jì)實(shí)現(xiàn), 我們叫它主題機(jī)制(Theme System),它被設(shè)計(jì)用來分離界面元素(比如HTML, CSS等)與核心業(yè)務(wù)邏輯. 通過這種分離, 有效的減少界面元素對(duì)核心代碼的影響,從而能使核心代碼盡快穩(wěn)定; 同時(shí)更換新的界面也不需要去動(dòng)復(fù)雜的業(yè)務(wù)邏輯, 便于分配給專業(yè)的界面設(shè)計(jì)人員去開發(fā),從而降低用戶界面這種需求易變性模塊的開發(fā)復(fù)雜性和依賴性. 下面我們就到Drupal的主題機(jī)制內(nèi)部去探索一番.
Drupal的主題機(jī)制(Theme System)有由三大部分組成: 主題(Themes), 主題引擎(Theme Engines)和主題api(includes/theme.inc).
主題(Themes)主要包含一組文件, 系統(tǒng)可以利用這些文件能展示對(duì)應(yīng)的外觀, 以獲得不同的用戶感受。一個(gè)主題主要由以下內(nèi)容組成：模板文件, 樣式表(CSS), 圖像(images), Javascript文件等;對(duì)于一個(gè)web設(shè)計(jì)者來說, 樣式表什么的應(yīng)該都比較熟悉, 但模板文件是什么呢? 模板就是一個(gè)HTML片斷模子,我們可以用它來生成有具體含義的HTML片斷. 舉個(gè)例子, 就好像一張空的賀卡, 你填上"xx生日快樂"就成了生日賀卡,你寫上"情人節(jié)一起happy吧"那就成了節(jié)日祝福賀卡. 因?yàn)橐话闳硕急容^聰明, 所以空的賀卡大家也知道哪該寫姓名, 哪該寫祝福語;萬一碰到個(gè)比較傻的要寫怎么辦, 于是聰明人可以先用鉛筆在該寫的作些提示標(biāo)記,這樣傻子雖然不聰明但在有提示的地方把原來的鉛筆標(biāo)記替換成他自己的話還是能做到的. OK, 這個(gè)帶有鉛筆標(biāo)記的賀卡我們就可以稱之為一張賀卡模板.
Drupal的主題模板文件也是同樣道理, 它是一種帶有標(biāo)記(Tags)的HTML模板, 系統(tǒng)能夠識(shí)別標(biāo)記, 并根據(jù)標(biāo)記進(jìn)行內(nèi)容替換, 生成實(shí)際的HTML頁(yè)面.那我靠什么識(shí)別標(biāo)記? 當(dāng)然就是看標(biāo)記所用的語言了. 話說如果是美國(guó)傻子, 那我們就用英語寫標(biāo)記, 日本傻子則用日語. 回到Drupal世界,寫它的模板文件中標(biāo)記的語言我們稱之為模板語言(Template Language), Drupal6.x目前支持三種模板語言: php(默認(rèn)), smarty, Xtemplate; 光有語言還不行, 還要有傻子的大腦來能識(shí)別這些語言啊, 那么系統(tǒng)中對(duì)應(yīng)解釋這些語言的工具就是主題引擎(Theme Engine).
Drupal默認(rèn)的主題引擎是phptemplate, 它使用PHP語言, 直接內(nèi)簽在Drupal中, 不存在任何外部依賴. 下面看一個(gè)phptemplate的模板例子:
<?php
// $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $
?>;
<div id="block-<?php print $block->module .‘-‘. $block->delta; ?>;" class="clear-block block block-<?php print $block->module ?>">
<?php if (!empty($block->subject)): ?>;
<h2><?php print $block->subject ?></h2>
<?php endif;?>;
<div class="content"><?php print $block->content ?></div>
</div>因?yàn)閜hptemplate引擎使用的模板語言是PHP, 則里面php代碼部分都是標(biāo)記, 如果我們傳入blcok變量{0,xx區(qū)塊,xx區(qū)塊內(nèi)容}, 則經(jīng)過主題機(jī)制(Theme system)處理后,上面這段模板代碼將生成如下HTML片斷:
<div id="block-book-0" class="clear-block block-book">
<h2>xx區(qū)塊</h2>
<div class="content">xx區(qū)塊的內(nèi)容</div>
</div>
主題api
主題api提供的強(qiáng)大機(jī)制使得分離出去的主題層能有機(jī)地和核心協(xié)同工作, 完成內(nèi)容的表現(xiàn). 該機(jī)制又是通過鉤子(hooks)技術(shù)實(shí)現(xiàn)的,看來hooks不僅僅用于模塊(Module)與核心的交互, 它被應(yīng)用到所有需要與核心交互的場(chǎng)景. 與普通的業(yè)務(wù)邏輯類的鉤子不同,主題鉤子(theme hooks)具備以下的特性:
- 主題鉤子是按顯示組件(components)來定義的, 即一個(gè)顯示組件定義一個(gè)鉤子名;
- 主題鉤子不僅能靠注冊(cè)函數(shù)實(shí)現(xiàn), 還能靠模板形式實(shí)現(xiàn), 通過模板文件名的命名規(guī)約, 能實(shí)現(xiàn)與函數(shù)鉤子類似的效果
- 主題鉤子不僅是只能在模塊中實(shí)現(xiàn), 而且在表現(xiàn)層的主題和主題引擎都能實(shí)現(xiàn); 這里注意了, 前面我們只說了主題中的模板文件, 這些文件是無法實(shí)現(xiàn)鉤子函數(shù), 而表現(xiàn)層中的鉤子函數(shù)在哪里實(shí)現(xiàn)呢? 對(duì)了, 在主題目錄下的template.php文件中實(shí)現(xiàn).
- 主題鉤子必須有默認(rèn)實(shí)現(xiàn), 要么在模塊中實(shí)現(xiàn), 即模塊默認(rèn)實(shí)現(xiàn), 要么直接使用主題api中的theme_HOOK(), 它定義了核心默認(rèn)的顯示組件的外觀.
- 主題鉤子是縱向的, 是覆蓋式的, 也就是說只有最上層的能起作用, 底下的都被屏蔽了, 這種鉤子實(shí)現(xiàn)是不是更像函數(shù)重載呢
上面這張圖是從drupal.org網(wǎng)站下載的, 它清楚地描述了主題機(jī)制的核心架構(gòu). 整個(gè)網(wǎng)頁(yè)由幾部分組成, 它們的不同顏色代表從不同鉤子輸出,其中a點(diǎn)輸出代表默認(rèn)主題實(shí)現(xiàn)(核心和模塊的默認(rèn)鉤子實(shí)現(xiàn), 對(duì)應(yīng)兩種青灰的顏色); b點(diǎn)是主題引擎的鉤子重載點(diǎn), 主題引擎鉤子實(shí)現(xiàn)的輸出為褐色;c點(diǎn)則是主題的鉤子重載點(diǎn), 它的鉤子輸出為紅色, 這三層的輸出最終形成了給終端用戶的網(wǎng)頁(yè).
主題鉤子的注冊(cè)是在模塊的hook_theme()中實(shí)現(xiàn)的(一個(gè)業(yè)務(wù)鉤子), 而主題鉤子有兩種形式: 回調(diào)函數(shù)和模板文件, 但主題層鉤子形式必須與業(yè)務(wù)邏輯層(Core和Module)的形式保持一直, 下面我們分開進(jìn)行闡述(下面的描述都基于PHPTemplate引擎):
(1)模板文件形式
模板文件允許你僅用css和的修改預(yù)定義的模板即可變換站點(diǎn)的外觀, 非常簡(jiǎn)介和直接, 是我們自定義外觀的主要方式. 常用的模板文件主要有以下幾個(gè):page.tpl.php; node.tpl.php; block.tpl.php; comment.tpl.php; box.tpl.php;
- page.tpl.php
- 該模板描述一個(gè)HTML頁(yè)面的主要元素, 包括, 和 元素, 它非常復(fù)雜, 大概能使用30多個(gè)Tag變量
- node.tpl.php
- 該模板負(fù)責(zé)node內(nèi)容的顯示, 它的Tag變量都與node的屬性相關(guān), 而page.tpl.php的$content變量實(shí)際就代表它
- block.tpl.php
- 該模板負(fù)責(zé)block的顯示, 它有一個(gè)變量$block
- box.tpl.php
- 該模板負(fù)責(zé)畫一個(gè)簡(jiǎn)單的盒子, 原來好像被用作搜索結(jié)果和form, 但這個(gè)版本已經(jīng)很少被使用了, 它與block有什么關(guān)系我到目前還沒搞清楚
- comment.tpl.php
- 該模板負(fù)責(zé)comment的顯示, 其他沒啥好說的
當(dāng)處理頁(yè)面顯示請(qǐng)求時(shí), 區(qū)塊的內(nèi)容, 節(jié)點(diǎn)的內(nèi)容, 評(píng)論的內(nèi)容等等都會(huì)先被放到區(qū)域(Region)中,然后通過page.tpl.php中的區(qū)域變量$content, $header, $left, $right, and$footer等拼接成實(shí)際頁(yè)面. 所以為了減少顯示數(shù)據(jù)的生成, 可以禁用區(qū)域內(nèi)的block而不是僅僅修改page模板.
前面說了, 模塊也可以注冊(cè)模板鉤子, 主題也可以注冊(cè)模板鉤子, 那到底哪一個(gè)鉤子生效呢? 這是由主題機(jī)制的調(diào)度函數(shù)分發(fā)的. 下圖描述了幾種關(guān)鍵模板的查順序, 它們完全依賴模板名字的特殊命名約定來實(shí)現(xiàn), 如果文件名相同, 則優(yōu)先選擇上層的模板.
更詳細(xì)的關(guān)于模板文件內(nèi)的Tag變量, 可以參考《Pro_Drupal_Development》和Drupal.org.
(2)回調(diào)函數(shù)形式
回調(diào)函數(shù)形式是一種用coding來處理自定義界面的方式, 說白了就是表現(xiàn)層沒剝離完全的那部分, 留了一個(gè)后門, 以便處理更特殊的顯示需求.主題和主題引擎的鉤子函數(shù)都在template.php文件中實(shí)現(xiàn),它們的命名規(guī)范是mytheme_hook()和themeengine_hook(). 盡管采用回調(diào)函數(shù), 比模板方式提高5倍的速度,但我們?cè)诙ㄖ仆庥^的時(shí)候, 還是建議優(yōu)先考慮定制模板鉤子. 如果確實(shí)沒有模板可用, 也盡量在主題引擎層實(shí)現(xiàn)函數(shù)鉤子,這樣子主題也可以共享該函數(shù)鉤子.
最后, 整個(gè)上面的流程, 不論是模板還是回調(diào)函數(shù), 全部都是靠主題api中的theme()函數(shù)來實(shí)現(xiàn)的, 該函數(shù)堪稱Drupal主題機(jī)制的中場(chǎng)發(fā)動(dòng)機(jī).
編后語:
我花了三天時(shí)間來看主題, 每多看一次都會(huì)對(duì)自己的否定幾次, 確實(shí)太復(fù)雜, 而且Drupal6主題變化很大, 每天都不停的修改這篇文章,真的以為這篇文章發(fā)不出來了, 但是為了給我的學(xué)習(xí)進(jìn)程做個(gè)見證, 在我還沒有完全理解它之前, 還是post出來了, 雖然不是很系統(tǒng),但它闡明我目前對(duì)主題機(jī)制的理解, 希望大家的指正.
