網(wǎng)頁(yè)設(shè)計(jì)與制作 教學(xué)課件 朱金華 第13章 CMS主題制作

第13章CMS主題制作教學(xué)目標(biāo)熟悉CMS。2.

掌握Drupal的安裝。3.

掌握Drupal主題制作。

教學(xué)內(nèi)容13.1CMS簡(jiǎn)介13.2安裝Drupal13.3Drupal主題制作教學(xué)重點(diǎn)和難點(diǎn)重點(diǎn)：Drupal主題制作。難點(diǎn)：Drupal主題制作。導(dǎo)入：

通過(guò)前12章的學(xué)習(xí)，基本可以掌握前端工程師的基本技能。但許多人還想制作一個(gè)可以交互的個(gè)人網(wǎng)站，但因涉及服務(wù)器端編程語(yǔ)言，對(duì)前端工程師而言會(huì)耗費(fèi)大量的編程時(shí)間。因此，可以下載一個(gè)成熟的開(kāi)源CMS系統(tǒng)，并學(xué)會(huì)安裝和使用，制作一個(gè)自己的主題模板就可以實(shí)現(xiàn)創(chuàng)建個(gè)人網(wǎng)站的目的了。13.1CMS簡(jiǎn)介

CMS（ContentManagementSystem）的意思是內(nèi)容管理系統(tǒng)，它包含許多基于模板的優(yōu)秀設(shè)計(jì)，可以加快網(wǎng)站開(kāi)發(fā)的速度，減少開(kāi)發(fā)的成本。CMS的功能并不只限于文本處理，它也可以處理圖片、Flash動(dòng)畫(huà)、聲像流、圖像甚至電子郵件檔案。

設(shè)計(jì)CMS是為了方便一些對(duì)于網(wǎng)絡(luò)編程語(yǔ)言不熟悉的用戶或設(shè)計(jì)者，可以幫助他們用一種比較簡(jiǎn)單的方式來(lái)管理自己的網(wǎng)站。

13.1CMS簡(jiǎn)介

內(nèi)容管理系統(tǒng)根據(jù)各個(gè)層面優(yōu)先考慮的需求不同，可以分成以下幾個(gè)層面：1）后臺(tái)業(yè)務(wù)子系統(tǒng)，管理優(yōu)先，注重內(nèi)容管理。2）Portal系統(tǒng)，表現(xiàn)優(yōu)先，注重模板管理。3）前臺(tái)發(fā)布系統(tǒng)，效率優(yōu)先，注重發(fā)布管理。

選擇CMS需注意服務(wù)器支持的編程語(yǔ)言，目前使用最多的是基于PHP和ASP的CMS系統(tǒng)。本章以一個(gè)優(yōu)秀的開(kāi)源系統(tǒng)Drupal為例進(jìn)行講解。13.2安裝Drupal安裝Drupal需要Web服務(wù)器（Apache、Nginx等）、PHP和MySQL的支持，對(duì)于個(gè)人學(xué)習(xí)者在本地的調(diào)試可以下載一些免費(fèi)的PHP套件（如phpStudy、ESSamp、pdenv等）。在此建議使用免安裝版的PHP套件，一般是將解壓文件夾放在非系統(tǒng)盤(pán)根目錄。要注意閱讀安裝說(shuō)明，然后啟動(dòng)該套件，在瀏覽器中輸入“”或“://”，就能看到其默認(rèn)頁(yè)面環(huán)境準(zhǔn)備完畢。13.2安裝Drupal1.Drupal的基本安裝2.中文化Drupal

3.模塊安裝4.主題安裝13.3Drupal主題制作主題可以解釋Drupal網(wǎng)站的用戶界面(UI)。在Drupal7中，雖然主題結(jié)構(gòu)并沒(méi)有明顯的變化，但它配備了一個(gè)新的主題實(shí)現(xiàn)方法。

通過(guò)主題，除了可以改變整個(gè)站點(diǎn)的外觀，還可以做以下事情：●修改布局、圖片或者字體?！裢ㄟ^(guò)角色來(lái)控制字段的隱藏或者顯示?！駝?dòng)態(tài)地響應(yīng)內(nèi)容的變化或者用戶的輸入?！裥薷幕蛱鎿Q文本（例如標(biāo)簽）和模塊生成的變量?！窨梢詮钠渌_(kāi)源設(shè)計(jì)（Joomla!模板，WordPress主題等）轉(zhuǎn)到Drupal，或任何一個(gè)網(wǎng)站的布局或模板轉(zhuǎn)換成Drupal主題。13.3Drupal主題制作

制作Drupal7的外觀主題，首先要掌握如何在現(xiàn)有基礎(chǔ)上使用CSS樣式表來(lái)改變目前的主題，然后探討如何重寫(xiě)各種主題的部分和節(jié)點(diǎn)類型。在此可以學(xué)習(xí)從頭開(kāi)始創(chuàng)建自己的主題，最后使用PHP代碼來(lái)制作更高級(jí)的主題。

一個(gè)Drupal7主題就是一些定義前端頁(yè)面展示的一些文件的集合。也可以為該主題添加“子主題”（Sub-Themes）或者修改這個(gè)主題。只有info文件是必需的。但是通常情況下，每個(gè)主題都包含很多其他文件。13.3Drupal主題制作

Drupal主題的目標(biāo)是將框架的處理邏輯和設(shè)計(jì)元素分開(kāi)。如圖13-1所示說(shuō)明了Drupal框架結(jié)構(gòu)。圖13-113.3Drupal主題制作1.主題引擎

主題引擎是一種手段，主題通過(guò)此引擎與Drupal核心進(jìn)行交互。有幾個(gè)主題引擎可以與Drupal配合使用。目前最流行的是：●PHPTemplate。●XTemplate?！馪lainPHP?！馭martyEngine。13.3Drupal主題制作2.規(guī)劃主題

主題是由若干個(gè)文件組成的，文件的數(shù)量取決于主題的復(fù)雜性。一個(gè)主題的文件數(shù)量可能從幾個(gè)到幾十個(gè)不等，包括放置在主題目錄內(nèi)若干個(gè)文件夾中的圖形元素和各種腳本。如圖13-2所示，顯示了在Garland主題主文件夾中預(yù)期可以找到的典型文件描述（顏色、圖像、徽標(biāo)、模板、樣式和PHP文件）。13.3Drupal主題制作圖13-213.3Drupal主題制作

主題目錄中的一些文件的功能：

（1）.info文件.info文件是一個(gè)必需的文件，.info文件的name告訴Drupal主題的內(nèi)部名稱。如果主題使用JavaScript、元數(shù)據(jù)、樣式表或塊區(qū)域等元素，也必須在.info文件中定義它們。一切都是可選的。13.3Drupal主題制作（2）模板文件

在modules文件夾的子文件夾下，有很多Drupal7默認(rèn)的核心模板文件（），比如聚合Aggregator、區(qū)塊Block、大綱Book、評(píng)論Comment、Field、論壇Forum、節(jié)點(diǎn)Node、網(wǎng)頁(yè)頂層顯示管理界面Overlay、投票P(pán)oll、檔案Profile、搜索Search、系統(tǒng)System、分類Taxonomy、工具欄Toolbar、用戶User等。模板文件里有默認(rèn)設(shè)置的變量和目標(biāo)配置文件信息。為了覆蓋這些模板，所有你需要做的是將它們復(fù)制到你的主題文件夾，并清空主題注冊(cè)表。

13.3Drupal主題制作

如果想重寫(xiě)這些模板，就將文件復(fù)制到sites/all/modules下你的模板目錄修改即可。

每一個(gè)模板文件都負(fù)責(zé)一個(gè)可定制的輸出部分，比較常用的一種手法是通過(guò)suggestions機(jī)制進(jìn)行多模板文件自動(dòng)匹配覆蓋。13.3Drupal主題制作（3）文件

可將輸出時(shí)所用到的所有條件邏輯和數(shù)據(jù)處理，都放到文件中。該文件不是必需的，但是它能使文件保持整潔，也可以對(duì)文件中的PHP變量進(jìn)行預(yù)處理，定制函數(shù)、覆寫(xiě)主題函數(shù)或者其它對(duì)原始輸出的外觀定制函數(shù)，都可以放到這里。這個(gè)文件開(kāi)頭必須是PHP開(kāi)始標(biāo)簽。13.3Drupal主題制作（4）其他文件

有幾個(gè)其他元素對(duì)于主題正常運(yùn)作不是必需的，但它們可能會(huì)在許多主題中出現(xiàn)。這些元素包括徽標(biāo)和屏幕截圖、文件和文件：

徽標(biāo)和屏幕截圖。這些元素是建議使用的元素，但對(duì)于主題的正常運(yùn)作并不是絕對(duì)必要的。然而，如果想將主題貢獻(xiàn)到Drupal存儲(chǔ)庫(kù)，那么屏幕截圖就是一個(gè)強(qiáng)制要求的元素。如圖13-3所示是Garland主題的屏幕截圖。13.3Drupal主題制作圖13-313.3Drupal主題制作除了搜索或任務(wù)徽標(biāo)等一般設(shè)置外，該文件還顯示UI管理設(shè)置或高級(jí)特性。。的功能是允許管理員徹底改變主題的配色方案，而無(wú)需手動(dòng)修改樣式表。如果主題需要配色模塊支持，那么您必須包括一個(gè)color目錄，其中包含文件和各種支持文件。13.3Drupal主題制作3.構(gòu)建主題

構(gòu)建主題有兩個(gè)基本方法：可以從頭開(kāi)始構(gòu)建它，也可以修改一個(gè)現(xiàn)有主題。本例將從頭開(kāi)始構(gòu)建一個(gè)新主題。但還是應(yīng)該準(zhǔn)備好現(xiàn)有主題的內(nèi)容，以便了解結(jié)構(gòu)。

首先，創(chuàng)建一個(gè)包含主題文件的目錄。放置該目錄的最佳位置是sites/all/themes目錄。將該目錄命名為一個(gè)唯一的名稱以描述你的主題，該名稱不應(yīng)該包含空格。

雖然不是強(qiáng)制性的，但是這對(duì)于為樣式表（CSS文件）、圖像和腳本（如果你的主題使用它們）創(chuàng)建子目錄是有幫助的，這樣做有助于保持結(jié)構(gòu)整潔。13.3Drupal主題制作

4.構(gòu)建.info文件

唯一的絕對(duì)必需文件，是一個(gè)包含數(shù)據(jù)的文本文件，包含了整個(gè)主題的元數(shù)據(jù)（metadata）、樣式表（CSS）、腳本（JavaScript）、區(qū)塊位置定義等信息；這些信息都是必要的，主題的系統(tǒng)內(nèi)部名稱也是通過(guò)這個(gè)文件定義的。

在該文本文件中，每一行都有一個(gè)鍵值對(duì)，值放在等號(hào)（=）的右邊，鍵放在等號(hào)的左邊（范例：key=value），分號(hào)用來(lái)注釋一行字符，有些關(guān)鍵詞使用數(shù)組的形式來(lái)表現(xiàn)一組關(guān)聯(lián)的值。13.3Drupal主題制作

在.info文件中必須或有可能包含的元素。（1）名稱name值是必需的。它是一個(gè)用戶可讀名稱（humanreadablename），區(qū)別于機(jī)器可讀名稱（machinereadablename），必須以字母字符開(kāi)始。名稱的限制與PHP中構(gòu)成函數(shù)的限制相同，因?yàn)镈rupal將它用作同樣的用途。因此，該名稱可以包含數(shù)字和下劃線，但沒(méi)有連字符、空格或標(biāo)點(diǎn)符號(hào)。

語(yǔ)法格式為：name=Garland13.3Drupal主題制作（2）描述description鍵是建議使用的，它只是主題的簡(jiǎn)要說(shuō)明。在此處輸入的描述出現(xiàn)在主題的選擇或Appearance頁(yè)面（Administer>Sitebuilding>themes）。

語(yǔ)法格式為：description=Amulti-columnthemewhichcanbeconfiguredtomodifycolorsandswitchbetweenfixedandfluidwidthlayouts.13.3Drupal主題制作（3）屏幕截圖screenshot鍵是可選的。它的功能是告訴Drupal在哪里能找到新主題的縮略圖。Appearance頁(yè)面上也將顯示縮略圖。如果.info文件中沒(méi)有包含這個(gè)鍵，Drupal將調(diào)用默認(rèn)主題目錄中的文件。如果調(diào)用的縮略圖文件名稱不是，或者，如果將該文件放置在主題主目錄以外的目錄，則需要包括這個(gè)鍵。

語(yǔ)法格式為：screenshot13.3Drupal主題制作（4）版本

盡管許多流行的主題都包括version關(guān)鍵詞，但我們并不鼓勵(lì)使用它。如果你打算將主題托管在Drupal主題存儲(chǔ)庫(kù)，就沒(méi)有必要包括version，因?yàn)楫?dāng)一個(gè)發(fā)布被打包用于下載時(shí)，會(huì)自動(dòng)添加版本字符串。否則，您可以包括自己喜歡的任何版本字符串。

語(yǔ)法格式為：version13.3Drupal主題制作（5）核

core鍵是必需的值。在所有目前受支持的Drupal版本中，必須說(shuō)明模塊和主題所兼容的Drupal版本。在這里設(shè)置的值將與DrupalCoreCompatibility常數(shù)（可以在文件中找到）兼容；如果沒(méi)有找到匹配，則Drupal將禁用主題。下面是該常數(shù)的語(yǔ)法：<?phpdefine('DRUPAL_CORE_COMPATIBILITY','7.x')?>13.3Drupal主題制作（6）引擎engine鍵表示主題所使用的主題引擎種類。在大多數(shù)情況下它是必需的。如果在.info文件中沒(méi)有提供engine，Drupal假定主題是一個(gè)通過(guò).theme文件實(shí)現(xiàn)的獨(dú)立主題。在庫(kù)中找到的大多數(shù)主題使用默認(rèn)的PHPTemplate引擎，該引擎與Drupal核心一起打包，PHPTemplate負(fù)責(zé)查找主題用到的主題函數(shù)和模板。

語(yǔ)法格式為：engine=phptemplate13.3Drupal主題制作（7）基礎(chǔ)主題表面上子主題和其它主題是一樣的，如果主題是另一個(gè)主題的子主題，那么就一定要聲明其basetheme，以啟用主題繼承。換句話說(shuō)，子主題中將可以使用基礎(chǔ)主題（basetheme）的文件資源。子主題可以聲明別的子主題作為其基主題，也就是允許多重繼承的存在。需要輸入基礎(chǔ)主題的內(nèi)部機(jī)器可讀名稱。

語(yǔ)法格式為：basetheme=garland13.3Drupal主題制作（8）區(qū)域

在Blocks管理頁(yè)面上編輯的頁(yè)面的任何部分，都需要成為一個(gè)區(qū)域。通常情況下，這個(gè)區(qū)域包括標(biāo)題、右側(cè)欄、內(nèi)容區(qū)和頁(yè)腳。必須在.info文件中引入所有區(qū)域。否則它們對(duì)于Drupal而言并不存在。regions鍵定義主題可用的塊區(qū)域。必須明確定義regions鍵，然后定義在方括號(hào)中的內(nèi)部機(jī)器可讀名稱。之后，必須將人類可讀名稱定義為適當(dāng)?shù)闹怠?/p>

語(yǔ)法格式為：regions[highlighted]=MissionStatement13.3Drupal主題制作（9）Features

很多由主題輸出的頁(yè)面元素都可以在主題管理中設(shè)置顯示狀態(tài)（顯示或隱藏），.info文件中的特性features鍵值就是用來(lái)控制哪些元素可以被這樣設(shè)置的。在主題配置頁(yè)面上所顯示的復(fù)選框由features鍵控制（如圖13-5所示）。13.3Drupal主題制作圖13-513.3Drupal主題制作（10）樣式表

用來(lái)聲明當(dāng)前主題使用到的樣式表，可以通過(guò)這個(gè)鍵值來(lái)添加新樣式表或覆蓋父級(jí)同名樣式表。Drupal主題曾經(jīng)默認(rèn)使用，然而在當(dāng)前版本中，如果未在.info文件中指定，則主題不再默認(rèn)為。所以應(yīng)該通過(guò).info文件添加新的樣式表。

語(yǔ)法格式為：stylesheets[all][]=cssstylesheets[print][]=css13.3Drupal主題制作（11）腳本

在主題的文件中，通過(guò)調(diào)用drupal_add_js()等函數(shù)來(lái)包括JavaScript文件，這曾經(jīng)是常見(jiàn)的做法。然而，在Drupal7中，只有當(dāng).info文件中指定時(shí)，才會(huì)包括該文件。

語(yǔ)法格式為：scripts13.3Drupal主題制作（12）PHP

在這里定義的字符串將是主題所支持的最低PHP版本。默認(rèn)值來(lái)自DRUPALMINIMUMPHP常數(shù)（位于文件）：<?phpdefine('DRUPAL_MINIMUM_PHP','5.2.4')?>

對(duì)于一個(gè)新的版本，如果需要的話，可以對(duì)其進(jìn)行重新定義。而對(duì)于大多數(shù)的主題，都不應(yīng)該添加這一項(xiàng)。

語(yǔ)法格式為：php13.3Drupal主題制作（13）默認(rèn)的.info值.info文件中包含Dru