为 Drupal 7 构建一个新主题
主题解释了 Drupal 网站的用户界面 (UI)。虽然主题结构并没有明显的变化，但 Drupal 版本 7 配备了一个新的主题实现方法。本文演示了如何创建一个新的 Drupal 7 主题。
Drupal 主题的目标是将框架的处理逻辑和设计元素分开。为了做到这一点，Drupal 采用了一个复杂的主题系统，其中包括主题、主题引擎和挂钩。主题组件与 Drupal 核心系统和模块设计元素配合，创建具有独特外观的用户界面（单独 Drupal 页面和表单）。由于将 Drupal 的业务逻辑从它的表示逻辑中分离出来，使代码更易于维护，并且您无需重写代码层就可以交换出主题层的实现，反之亦然。图 1 说明了 Drupal 框架结构。
主题显示 Drupal 核心通过底层主题引擎从数据库中提取的数据，主题引擎被用作 Drupal 核心和主题模板之间的接口。
主题引擎 是一种手段，主题通过此引擎与 Drupal 核心进行交互。有几个主题引擎可以与 Drupal 配合使用。最流行的是：
PHPTemplateXTemplate- Plain PHP
- Smarty Engine
如果您愿意，您也可以使用自己的自定义引擎。
PHPTemplate 主题引擎是默认的 Drupal 引擎，也是本文中所使用的主题引擎，它使用名称类似于 filename.tpl.php 的单独主题文件作为 Drupal 的 theme_filename() 函数的主题。这些文件每个均包含面向动态数据的 HTML 框架以及 PHP 语句。因此，凭借 PHP 的基本知识，利用 PHPTemplate 就能轻松创建高级主题，因为这只涉及极少量的代码。
主题是由若干个文件组件。文件的数量取决于主题的复杂性。一个主题可能只有三个文件，也可能会有几十个文件，包括放置在主题目录内若干个文件夹中的图形元素和各种脚本。图 2 显示了在主题主文件夹中预期可以找到的典型文件描述（颜色、图像、徽标、模板、样式和 PHP 文件）。
并非所有这些文件都是一个主题所需要的，许多人认为级联样式表 (CSS) 文件是绝对必需的，但某些主题甚至连 CSS 也没有。通过了解这些主题文件的用法，主题结构以及它的工作方式会变得更加清晰。让我们再看看主题目录中的一些文件，并探讨它们在整体主题中的功能。
.info 文件是一个必需的文件：Drupal 必须包括它，才能看到主题。.info 文件告诉 Drupal 主题的内部名称。例如，如果这个文件的名称是 ibmtheme.info，那么 Drupal 给这个主题的名称将是 ibmtheme。如果您的主题使用 JavaScript、元数据、样式表或块区域等元素，您也必须在 .info 文件中定义它们。一切都是可选的。在 清单 1 中，Bartik 主题的 .info 文件内容解释了这种行为。
; $Id: bartik.info,v 1.5 2010/11/07 00:27:20 dries Exp $ name = Bartik description = A flexible, recolorable theme with many regions. package = Core version = VERSION core = 7.x stylesheets[all][] = css/layout.css stylesheets[all][] = css/style.css stylesheets[all][] = css/colors.css stylesheets[print][] = css/print.css regions[header] = Header regions[help] = Help regions[page_top] = Page top regions[page_bottom] = Page bottom regions[highlighted] = Highlighted regions[featured] = Featured regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[triptych_first] = Triptych first regions[triptych_middle] = Triptych middle regions[triptych_last] = Triptych last regions[footer_firstcolumn] = Footer first column regions[footer_secondcolumn] = Footer second column regions[footer_thirdcolumn] = Footer third column regions[footer_fourthcolumn] = Footer fourth column regions[footer] = Footer settings[shortcut_module_link] = 0 ; Information added by drupal.org packaging script on 2011-01-05 version = "7.0" project = "drupal" datestamp = "1294208756" |
主题目录包含若干个模板文件，其文件名如 xxx.tpl.php。这些模板文件包含主题的 Extensible HTML (XHTML) 标记和 PHP 变量。在某些情况下，您可以编写它们，以提供其他类型的数据输出，如 RSS。一般来说，每个 Drupal 主题的 tpl.php 文件都进行编码，以处理特定的数据输出：在模板文件中嵌入复杂的逻辑有可能带来混乱，并事与愿违，因为这样做有可能使它们难以维护。理想的场景是让它们只 包含简单的 XHTML 标记和 PHP 变量。
清单 2 显示 node.tpl.php 文件的内容，该文件描述核心 Garland 主题的基本节点的输出。
清单 2. Garland 主题 node.tpl.php 文件的内容
<?php
// $Id: node.tpl.php,v 1.24 2010/12/01 00:18:15 webchick Exp $
?>
<div id="node-<?php print $node->nid; ?>"
class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><a href="<?php
print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<span class="submitted"><?php print $submitted ?></span>
<?php endif; ?>
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// Hide the comments and links now so you can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
</div>
<div class="clearfix">
<?php if (!empty($content['links'])): ?>
<div class="links"><?php print render($content['links']); ?></div>
<?php endif; ?>
<?php print render($content['comments']); ?>
</div>
</div>
|
template.php 文件中通常包含主题输出的所有条件逻辑和数据处理。您也可以使用 template.php 文件使主题的 .tpl.php 文件保持整洁。因为这是一个 PHP 文件，强制以 PHP 打开 <?php 标记作为内容的开始，但您可以省略结束标记。
有几个其他元素对于主题正常运作不是必需的，但它们可能会在许多主题中出现。这些元素包括徽标和屏幕截图、theme-settings.php 文件和 color.inc 文件：
- 徽标和屏幕截图。这些元素是建议使用的元素，但对于主题的正常运作并不是绝对必要的。然而，如果您想将主题贡献到 Drupal 存储库，那么屏幕截图就是一个强制要求的元素。图 3 是 Garland 主题的屏幕截图。
图 3. Garland 主题的屏幕截图
- theme-settings.php。除了搜索或任务徽标等一般设置外，该文件还显示 UI 管理设置或高级特性。请查看针对 Garland 主题的该文件内容，如 清单 3 所示，说明了最终显示。
清单 3. Garland theme-settings.php 文件的内容
<?php // $Id: theme-settings.php,v 1.3 2010/09/04 15:21:09 dries Exp $ /** * @file * Theme setting callbacks for the garland theme. */ /** * Implements hook_form_FORM_ID_alter(). * * @param $form * The form. * @param $form_state * The form state. */ function garland_form_system_theme_settings_alter(&$form, &$form_state) { $form['garland_width'] = array( '#type' => 'radios', '#title' => t('Content width'), '#options' => array( 'fluid' => t('Fluid width'), 'fixed' => t('Fixed width'), ), '#default_value' => theme_get_setting('garland_width'), '#description' => t('Specify whether the content will wrap to a fixed width or will fluidly expand to the width of the browser window.'), // Place this above the color scheme options. '#weight' => -2, ); }
最终显示的将是一个类似于 图 4 的表单。
图 4. 主题设置页面
- color.inc。color. module 的功能是允许管理员彻底改变主题的配色方案，而无需手动修改样式表。如果您的主题需要配色模块支持，那么您必须包括一个 color 目录，其中包含 color.inc 文件和各种支持文件。
构建主题有两个基本方法：您可以从头开始构建它，您也可以修改一个现有主题。在本文中，您将从头开始构建一个新主题。话虽如此，您还是应该准备好现有主题的内容，以便了解结构。
首先，创建一个包含主题文件的目录。放置该目录的最佳位置是 sites/all/themes 目录。将该目录命名为一个惟一的名称以描述您的主题：该名称不应该包含空格。
虽然不是强制性的，但是这对于为样式表（CSS 文件）、图像和脚本（如果您的主题使用它们）创建子目录是有帮助的。这样做有助于保持结构整洁。
.info 文件只是一个包含数据的文本文件，通常是描述主题的结构、内容和配置所需要的参数。在该文本文件中，每一行都有一个键值对，值放在等号 (=) 的右边，键放在等号的左边。清单 4 提供了一个示例。
清单 4. 来自 Garland 主题的 .info 文件的示例内容
; $Id: garland.info,v 1.10 2010/11/07 00:27:20 dries Exp $ name = Garland description = A multi-column theme that can be configured to modify colors and switch between fixed- and fluid-width layouts package = Core version = VERSION core = 7.x stylesheets[all][] = style.css stylesheets[print][] = print.css settings[garland_width] = fluid ; Information added by drupal.org packaging script on 2011-01-05 version = "7.0" project = "drupal" |
您可以在一行的开头使用分号 (;)，以添加注释。使用方括号 ([]) 时，是为了创建关联值的数组。让我们详细介绍在 .info 文件中必须或有可能包含的元素。
name 值是必需的。它应该是一个人类可读的名称，必须以字母字符开始。名称的限制与 PHP 中构成函数的限制相同，因为 Drupal 将它用作同样的用途。因此，该名称可以包含数字和下划线 (_)，但没有连字符 (-)、空格或标点符号。下面是语法：
name = Garland |
description 键是建议使用的，它应该只是主题的简要说明。您在此处输入的描述出现在主题的选择或 Appearance 页面。下面是其语法：
description = A multi-column theme that can be configured to modify colors and switch between fixed- and fluid-width layouts |
screenshot 键是可选的。它的功能是告诉 Drupal 在哪里能找到新主题的缩略图。Appearance 页面上也将显示缩略图。如果 .info 文件中没有包含这个键，Drupal 将调用默认主题目录中的 screenshot.png 文件。如果您决定调用的缩略图文件名称不是 screenshot.png，或者，如果您将该文件放置主题主目录以外的目录，您将需要包括这个键。下面是其语法：
screenshot = /images/screenshot.png |
要创建一个屏幕截图，只需在浏览器中捕获完整的主题图像。然后，裁剪图像并将其尺寸调整为 294 x219 像素，将它保存为 screenshot.png。把这个文件和 .info 文件放在同一文件夹中。
尽管许多流行的主题都包括 version 关键，但我们并不鼓励使用它。如果你打算将主题托管在 Drupal 主题存储库，就没有必要包括 version，因为当一个发布被打包用于下载时，drupal.org 会自动添加版本字符串。否则，您可以包括自己喜欢的任何版本字符串。下面是其语法：
version = 1.0 |
core 键是必需的值。在所有目前受支持的 Drupal 版本中，您必须说明您的模块和主题所兼容的
Drupal 版本。在这里设置的值将与 Drupal Core Compatibility 常数（可以在
include/bootstrap.inc 文件中找到）兼容；如果没有找到匹配，则 Drupal 将禁用主题。下面是该常数的语法：
<?php
define('DRUPAL_CORE_COMPATIBILITY', '7.x')
?>
|
drupal.org 打包脚本会根据每一个发布节点上的 Drupal 核心兼容性设置来自动设置这个值（如果您贡献您的主题）。
engine 键表示您的主题所使用的主题引擎种类。在大多数情况下它是必需的。如果您在 .info 文件中没有提供 engine，Drupal 假定主题是一个通过 .theme 文件实现的独立主题。在 Drupal.org 库中找到的大多数主题使用默认的 PHPTemplate 引擎，该引擎与 Drupal 核心一起打包。下面是其语法：
engine = phptemplate |
如果您的主题是另一个主题的子主题，那么就一定要声明其 base theme，以启用主题继承。换句话说，子主题中将可以使用基础主题 (base theme) 的文件资源。您需要输入基础主题的内部机器可读名称。下面是其语法：
base theme = garland |
regions 键定义主题可用的块区域。您必须明确定义 regions 键，然后定义在方括号中的内部机器可读名称。之后，您必须将人类可读名称定义为适当的值。下面是其语法：
regions[highlighted] =Mission Statement |
如果您选择不定义区域，在 Drupal 7 主题中假定使用以下值：
regions[header] = Header regions[highlighted] = Highlighted regions[help] = Help regions[content] = Content regions[sidebar_first] = Left sidebar regions[sidebar_second] = Right sidebar regions[footer] = Footer |
您可以根据自己的特定需求覆盖这些值。如果要这样做，您必须声明该行。下面是语法：
regions[highlighted] =Mission Statement |
您可以在主题的配置页面上切换各种页面元素。在主题配置页面上所显示的复选框由 features 键控制（见 图 5）。因此，对于主题没有定义或使用的元素，您可以禁止显示其复选框。省略一个条目，就会禁止显示该特性的复选框；如果您没有定义任何特性，那么所有复选框都将显示为假定的默认值。
清单 5 显示 features 键的所有可用元素。
features[ ] = logo features[ ] = name features[ ] = slogan features[ ] = node_user_picture features[ ] = comment_user_picture features[ ] = favicon features[ ] = main_menu features[ ] = secondary_menu |
Drupal 主题曾经默认使用 style.css。然而，在当前版本中，如果未在 .info 文件中指定 style.css，则主题不再默认为 style.css。此外，您可以通过 .info 文件添加新的样式表。下面是其语法：
stylesheets[all][] = css/style.css stylesheets[print][] = css/print.css |
在主题的 template.php 文件中，通过调用 drupal_add_js() 等函数来包括 JavaScript 文件，这曾经是常见的做法。然而，在 Drupal 7 中，只有当您在 .info 文件指定 script.js 时，才会包括该文件。下面是其语法：
scripts[] = scripts/myscript.js |
您在这里定义的字符串将是主题所支持的最低 PHP 版本。默认值来自 DRUPAL MINIMUM PHP 常数（位于 includes/bootstrap.inc 文件）：
<?php
define('DRUPAL_MINIMUM_PHP', '5.2.4')
?>
|
您可以更改此值，但不需要添加字符串。下面是其语法：
php = 5.2.4 |
.info 文件中包含 Drupal 为每个已安装主题假设的默认值。如果在 .info 文件中没有定义这些值，Drupal 强制主题使用默认值。但是请注意，这些值应用为一个组。这意味着，如果重写一行，如：
regions[sub_header] = Sub-header |
您将需要重新定义默认区域的其余部分；否则，它们将被省略。这条规则也适用于样式表。即使样式表在技术上并不是在一个组中进行定义的，但如果在 .info 文件中定义了另一个样式表，您必须再次重新定义 style.css；否则，它将不会被包括在内。
在 清单 6 中的键和值是 Drupal 7 主题的默认值。
regions[sidebar_first] = Left sidebar regions[sidebar_second] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer regions[highlighted] = Highlighted regions[help] = Help regions[page_top] = Page Top regions[page_bottom] = Page Bottom engine = phptemplate features[ ] = logo features[ ] = name features[ ] = slogan features[ ] = node_user_picture features[ ] = comment_user_picture features[ ] = favicon features[ ] = main_menu features[ ] = secondary_menu screenshot = screenshot.png |
现在，研究典型的 page.tpl.php 文件的内容。图 6 中的图像来自 Garland 主题，显示了源代码在浏览器中的样子。
若您更仔细地查看，page.tpl.php 模板只是一个简单的 HTML 页面，其中有大量 PHP 语句。很方便，已经为 Drupal 定义了大部分 PHP 元素，您需要做的就是按需要放置它们。
注：链接
http://drupal.org/node/190815 [Core Templates]
将为您提供 page.tpl.php 模板可用的变量列表。
有若干个变量可用于构建 page.tpl.php。选择包括哪些变量，取决于您想在主题中实现的功能。例如，如果您选择在您的网页上要有面包屑，请添加 $breadcrumbs 变量。
在 page.tpl.php 中最常见的变量是：
$site_name$logo（通过主题设置标志上传的徽标；仅在实现徽标主题特性时才有用）$title（页面标题）$main_menu$secondary_menu$breadcrumbs（导航辅助，当用户更深入网站时留下一串参考链接）
Drupal 管理也有相关的变量：
$tabs（用于编辑或查看管理菜单等的菜单；经常由模块使用）$messages$action_links
其他一些有用的变量是：
$base_path（站点 root 的路径）$front_page（站点首页的路径）$directory（您的主题的路径）
使用 Render 应用程序编程接口 (API) 插入变量，如下：
<?php print render($tabs); ?> |
如果您的 PHP 和 HTML 技能都较高，您显然可以通过观察示例的构建方式，然后使用允许的变量来明显创建自己的卓越主题。
随 Drupal 核心提供的还有其他可用的主题文件的默认模板。您可以在 Drupal 站点（见 参考资料 中的链接）找到它们的列表。对于 page.tpl.php 文件，要轻松构建属于自己的文件，最佳方式是找到一个核心文件，观察它是如何组成的，然后再构建您自己的。访问 Drupal 站点将为您指出允许在任何主题文件中使用的变量。
在一个普通的静态 HTML 页面中，您必须在页头中包括一个指针，以说明用于页面显示的样式表的位置。指针看起来像这样：
<link rel="stylesheet" type="text/css" href="/model.css" /> |
如前所述，您可以将新的样式表添加到一个主题，也可以覆盖默认样式。在这两种情况下，你必须在 .info 文件中输入主题样式表。样式表中有什么呢？您对 CSS 类所使用的模块化方法，与 Drupal 核心对框架的标准页面元素所使用的模块化方法相同。即使主题开发人员可以创建自己的类，但在整个 Drupal 站点有许多类。如需要有关 Drupal 7 核心中的类的完整列表，请参阅 参考资料。
本文为您概述了主题系统在 Drupal 7 中的运作方式，还介绍了 Drupal 主题的多个组件，以及如何使用默认的 PHPTemplate 主题引擎从头开始构建一个新的主题。您已经观看了每个组件主题文件的典型结构，现在应该了解了创建自定义主题所需要的技巧。开始做您喜欢的事情吧！
学习
- 访问 Drupal 站点，查找 Drupal 核心所包括的其他主题的默认模板。
- 查看 page.tpl.php 参考页面，获取可以在您主题中使用的变量列表。
- 查看 Drupal 站点，获取 CSS 类的完整列表。
- developerWorks 中国网站 Web 开发专区 专门提供各种基于 Web 的解决方案的文章。
- 观看 developerWorks 演示中心，那里提供了从初学者的产品安装和配置演示，到面向有经验开发人员的高级功能。
- 随时关注 developerWorks 技术活动和网络广播。
- 访问 developerWorks Open source 专区获得丰富的 how-to 信息、工具和项目更新以及最受欢迎的文章和教程，帮助您用开放源码技术进行开发，并将它们与 IBM 产品结合使用。
- 关注 Twitter 上的 developerWorks，或订阅 Linux tweets on developerWorks 提要。
获得产品和技术
- 获取有关 Drupal 7 的更多信息。
- 以最适合您的方式 IBM 产品评估试用版软件：下载产品试用版、在线试用产品、在云环境中使用产品，或在 IBM SOA 人员沙箱 中花一些时间了解如何高效实现面向服务的架构。
