主题Drupal6_pro_Drupal_development(专业开发指南)TheThemeSystem主题系统

第8章主题系统

如果你想修改Drupal生成的HTML或者其它标识字体那么你需要深入的了解主题系统的各个组成部分。主题系统是个优雅的架构它使你无需核心代码就可以得到想要的外观但是它也有一个很长的学习曲线特别是你想要完全定制一个站点主题 以与其它drupal站点区别开来那么你还是需要费点功夫的。 我将向你讲述主题系统的工作原理 以及向你展示隐藏在Drupal核心之中的一些最佳实践。首先要记住的是不要通过编辑模块文件内部的HTML来改变你站点的外观。如果这样做了你仅仅创建了一个对你个人适用的内容管理系统这样你就会失去开源软件系统最大的优势之一------社区的支持。覆写而不是修改

主题系统的组成

主题系统由多个抽象层次所组成模板语言主题引擎和主题。

• 模板语言和主题引擎

• 主题

• 安装主题

• 构建一个PHPTemplate主题

• 使用已有的HTML和CSS文件

• 为你的主题创建一个. info文件

• 为你的主题创建一个. info文件(1)

• 理解模板文件

• theme()函数介绍

• theme()工作原理概览

• 覆写可主题化的项目

• 覆写主题函数

• 覆写模板文件

• 添加和操纵模板变量

• 适用于所有模板的变量

• page.tpl .php

• page.tpl .php(1)

• node.tpl .php

• node.tpl .php(1)

• block.tpl .php

• comment.tpl .php

• box.tpl .php

• 其它的.tpl .php文件

• 多页面模板

• 高级Drupal主题化

• 注册表是如何构建的

• 逐步分析theme()函数

• 逐步分析theme()函数(1)

• 定义新的区块区域

• 总结模板语言和主题引擎

主题系统可以使用多个模板语言。 Smarty, PHPTAL,和PHPTemplate都可以与Drupal集成用来向模板文件中添加动态数据。为了使用这些语言需要一个叫做主题引擎的包装器用来在模板语言和Drupal之间进行交互。你可以在http://drupal.org/project/Theme+engines中找到对应模板语言的主题引擎。安装主题引擎其实很简单只需要通过将相应主题引擎的目录放置到你站点的主题引擎目录下面就可以了。如果仅用于单个站点使用目录sites/sitename/themes/engines如果用于多个Drupal站点则使用目录sites/all/themes/engines如图8-1所示。

Drupal社区创建了一个自己的引擎专门对Drupal作了优化。它就是PHPTemplate它使用PHP作为模板语言这样它就不需要中间层的解析环节了而其它模板语言常常需要这一环节。这是Drupal最常用的模板引擎它是Drupal自带的。它位于themes/engines /phptemplate,如图8-2所示

图8-1为Drupal添加定制主题引擎的目录结构

图8-1 Drupal核心主题引擎的目录结构。这个位置专门用于放置核心主题引擎。注意完全可以不使用模板语言而简单的使用纯php的模板文件。如果你是热衷于追求速度或者可能仅仅是想折磨一下你的设计人员那么你可以不使用主题引擎而仅仅整个主题包装在PHP函数中 比如使用函数themename_page()和themename_node()来代替模板文件。一个基于PHP主题的示例可参看themes/chameleon/chameleon. theme。

当你安装好一个主题引擎后你不会看到你的站点有了任何改变。这是因为主题引擎仅仅是一个接口库在它被使用以前你仍然需要安装一个依赖于该主题引擎的Drupal主题。

要使用哪一个模板语言呢如果你正在转换一个遗留站点那么可能使用以前的模板语言会更方便一些也许你的设计团队更倾向于使用所见即所得的编辑器这样PHPTAL应该是个更好的选择因为它可以阻止这些编辑器对模板的破坏。你可以发现大多数的文档和支持都是关于PHPTemplate的如果你是从头开始建立一个站点的话那么从长期的维护和社区支持这两个方面来看PHPTemplate应该是最好的选择。

主题

用Drupal的行话来说主题就是一组负责你站点外观的文件。你可以从http://drupal.org/project/Themes下载第3方主题或者你可以自己动手创建一个主题后者正是你在本章将要学习的。作为一个web设计者主题由你所熟悉的大部分内容所组成样式表图片 JavaScript文件等等。你将发现在Drupal主题和纯HTML站点之间的区别就是模板文件。这些文件一般都包含大段的静态HTML和一些小段的用来插入动态内容的代码。它们负责你站点的一个特定部分的外观。模板文件的语法依赖于它所使用的主题引擎。例如列表8-1 8-2 8-3列出了3个模板文件的代码片段它们输出的内容是一样但是包含的模板文件内容却完全不同。

列表8-1. Smar ty

<div id="top-nav">

{if count($secondary_links) }

<ul id="secondary">

{foreach from=$secondary_links item=link}

<li>{$link}</li>

{/foreach}

</ul>

{/if}

{if count($primary_links) }

<ul id="primary">

{foreach from=$primary_links item=link}

<li>{$link}</li>

{/foreach}

</ul>

{/if}

</div>

列表8-2. PHPTAL

<div id="top-nav">

<ul tal:condition="php: is_array(secondary_links)" id="secondary">

<li tal:repeat="link secondary_links"tal:content="link">secondary link</li>

</ul>

<ul tal:condition="php: is_array(primary_links)" id="primary">

<li tal:repeat="link primary_links" tal:content="link">primarylink</li>

</ul>

</div>

列表8-3. PHPTempla te

<div id="top-nav">

<?php if (count($secondary_links) ) : ?>

<ul id="secondary">

<?php foreach ($secondary_links as $link) : ?>

<li><?php print $link?></li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

<?php if (count($primary_links) ) : ?>

<ul id="primary">

<?php foreach ($primary_links as $link) : ?>

<li><?php print $link?></li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

</div>

每一个模板文件由于它所使用的模板语言的不同所以看起来也各不相同。模板文件的扩展名指明了它所使用的模板语言也就是它所依赖的主题引擎参看表8-1

表8-1模板文件的扩展名指出了它所依赖的模板语言。

模板文件 主题引擎扩展theme PHPtpl php PHPTemplate*tal PHPTALtpl Smarty

*PHPTempla te是Drupal的默认主题引擎

安装主题

为了让一个新的主题显示在Drupal管理界面中你需要把它放到sites/all/themes下面。这样不仅你的Drupal站点可以使用这个主题一个多站点系统中的所有站点都可以使用该主题。如果你的是个多站点系统而你又想把这个主题仅仅用在特定站点上那么你可以把它放到sites/sitename/themes下面。你可以在你的站点安装多个主题主题的安装过程和模块的基本相同。将主题文件放到相应的位置后导航到管理界面“管理➤站点构建➤主题” 。你可以安装多个主题也可以一次启用多个主题。这意味着什么通过启用多个主题用户可以在他们的个人资料页面上从已启用的主题中选择一个作为他们自己的主题。在用户访问站点时就会使用所选的主题了。

当下载或者创建一个新的主题时将新建主题和核心主题以及第3方主题区分开来是个很好的习惯。我们推荐在你的themes文件夹下面创建两个文件夹。将自定义主题放到文件夹custom下而将从drupal.org下载下来的第3方的

主题放到drupal-contrib下。不过这个实践不是特别重要不像模块目录下面那样特别注重这点因为一个站点的主题一般只有几个但是模块的数量却有很多。

构建一个PHPTemplate主题

创建一个主题可以有多种方式这取决于你的起始材料。假定你的设计者已经为你的站点提供了HTML和CSS文件。那么将设计者的设计转化为一个Drupal主题到底难不难呢它实际上不是很难而且你能够轻易的完成工作的80%。不过还有20%---最后的难点了---它是Drupal主题制作高手与新手的分水岭。首先让我们从简单的部分开始。这里有个概括

1. 为站点创建或修改HTML文件。

2. 为站点创建或修改CSS文件。

3. 创建一个. info文件来向Drupal描述你的新主题。

4. 按照Drupal的标准为文件命名。

5. 在你的模板中插入可用的变量。

6. 为单独的节点类型区块等等创建模板文件。

注意如果你从头开始设计你的主题那么在开放源代码WEB设计站点ht tp://www.o swd.org里面有很多非常好的设计可供借鉴注意这些是HTML和CSS设计而不是Drupal主题 。

使用已有的HTML和CSS文件

我们假设你已经有了HTML页面和CSS样式如列表8-4和8-5中所给出的现在让你将它们转化为一个Drupal主题。显然在一个实际的项目中你所用到的文件应该比这些更详细我们在这里介绍的是方法所以示例简单了一些。列表8-4. page.h tml

<html>

<head>

<title>Page Title</title>

<link rel="stylesheet" href="global.css" type="text/css" /></head>

<body>

<div id="container">

<div id="header">

<h1>Header</h1>

</div>

<div id="sidebar-left">

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diamnonummy nibh euismod tincidunt ut.

</p>

</div>

<div id="main">

<h2>Subheading</h2>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diamnonummy nibh euismod tincidunt ut.

</p>

</div>

<div id="footer">

Footer

</div>

</div>

</body>

</html>

列表8-5. global. css

#container {width: 90%;margin: 10px auto;background-color: #fff;color: #333;border: 1px solid gray;line-height: 130%;

}

#header {padding: .5em;background-color: #ddd;border-bottom: 1px solid gray;

}

#header h1 {padding: 0;margin: 0;

}

#sidebar-left {float: left;width: 160px;margin: 0;padding: 1em;

}

#main {margin-left: 200px;border-left: 1px solid gray;padding: 1em;max-width: 36em;

}

#footer {clear: both;margin: 0;padding: .5em;color: #333;background-color: #ddd;border-top: 1px solid gray;

}

#sidebar-left p {margin: 0 0 1em 0;

}

#main h2 {margin: 0 0 .5em 0;

}

该设计如图8-3所示

图8-3在转化为Drupal主题以前的设计

让我们将这个新主题叫作greyscale,在文件夹sites/all/themes/custom下面创建一个子文件夹greyscale。如果sites/all/themes/custom文件夹不存在的话那么你需要新建一个。将page.html和global.css复制到greyscale文件夹下面。接下来将page.html重命名为page. tpl.php,这样它将作为一个新的页面模板为Drupal的每个页面服务了。

为你的主题创建一个. info文件

每个主题都需要包含一个文件用来向Drupal描述它的能力。这个文件就是主题的. info文件。 由于我们把我们的主题叫作greyscale所以我们的. info文件就被命名为greyscale. info。创建文件sites/all/themes/custom/greyscale/greyscale. info并输入列表8-6所示的10行代码。

列表8-6.主题的. info文件

; $Id$name = Greyscalecore = 6.xengine = phptemplateregions[left] = Left sidebar

; We do not have a right sidebar.

; regions[right] = Right sidebarregions[content] = Contentregions[header] = Headerregions[footer] = Footer

如果我们想要更复杂一些的话那么我们可以在我们的. info文件中为Drupal提供更多的信息。让我们看看这个文件都可以包含哪些信息如列表8-7所示。

列表8-7.带有更多信息的. info文件

; $Id$

; Name and core are required; all else is optional.name = Greyscaledescription = Demurely grey tableless theme.screenshot = screenshot.pngcore = 6.xengine = phptemplateregions[left] = Left sidebar

; We do not have a right sidebar

; regions[right] = Right sidebarregions[content] = Contentregions[header] = Headerregions[footer] = Footer

; Features not commented out here appear as checkboxes

; on the theme configuration page for this theme.features[] = logofeatures[] = namefeatures[] = sloganfeatures[] = mission