为 Drupal 7 构建一个新主题

为您的 Drupal 站点创建自定义的外观

主题 是 Drupal 的插件,可以构建或改善 Drupal 的核心外观。在本文中,概述了主题系统在 Drupal 内如何运作,包括 Drupal 主题的各个组件,以及如何确定哪些组件是必需的元素,哪些组件是可选的元素,并且学习如何使用默认的 PHPTemplate 主题引擎从头开始构建一个新的主题。

Timi Ogunjobi, 软件工程师和作者, Xceedia Limited

Timi Ogunjobi 的照片Timi Ogunjobi 是一名作者兼 Web 应用程序开发人员。他是 Xceedia Limited 的 CEO,这是一家致力于 Web 和移动应用程序开发的软件工程公司。他还是 3 部 Drupal 图书及其他几本书籍的作者。



2012 年 6 月 26 日

主题解释了 Drupal 网站的用户界面 (UI)。虽然主题结构并没有明显的变化,但 Drupal 版本 7 配备了一个新的主题实现方法。本文演示了如何创建一个新的 Drupal 7 主题。

Drupal 主题的目标是将框架的处理逻辑和设计元素分开。为了做到这一点,Drupal 采用了一个复杂的主题系统,其中包括主题、主题引擎和挂钩。主题组件与 Drupal 核心系统和模块设计元素配合,创建具有独特外观的用户界面(单独 Drupal 页面和表单)。由于将 Drupal 的业务逻辑从它的表示逻辑中分离出来,使代码更易于维护,并且您无需重写代码层就可以交换出主题层的实现,反之亦然。图 1 说明了 Drupal 框架结构。

图 1. Drupal 框架结构
Drupal 框架结构的图形表示

主题显示 Drupal 核心通过底层主题引擎从数据库中提取的数据,主题引擎被用作 Drupal 核心和主题模板之间的接口。

主题引擎

主题引擎 是一种手段,主题通过此引擎与 Drupal 核心进行交互。有几个主题引擎可以与 Drupal 配合使用。最流行的是:

  • PHPTemplate
  • XTemplate
  • Plain PHP
  • Smarty Engine

其他 Drupal 主题引擎

与 Drupal 配合的还有其他几个常用主题引擎。它们包括 PHPTALwgSmarty、Zengine、Awesomengine、ETS、Haml、XSLengine 和 Peroxide。不过,本文使用 PHPTemplate 引擎,因为它是默认的主题引擎,并且是与 Drupal 7 一起打包的惟一主题引擎。

如果您愿意,您也可以使用自己的自定义引擎。

PHPTemplate 主题引擎是默认的 Drupal 引擎,也是本文中所使用的主题引擎,它使用名称类似于 filename.tpl.php 的单独主题文件作为 Drupal 的 theme_filename() 函数的主题。这些文件每个均包含面向动态数据的 HTML 框架以及 PHP 语句。因此,凭借 PHP 的基本知识,利用 PHPTemplate 就能轻松创建高级主题,因为这只涉及极少量的代码。


规划主题

主题是由若干个文件组件。文件的数量取决于主题的复杂性。一个主题可能只有三个文件,也可能会有几十个文件,包括放置在主题目录内若干个文件夹中的图形元素和各种脚本。图 2 显示了在主题主文件夹中预期可以找到的典型文件描述(颜色、图像、徽标、模板、样式和 PHP 文件)。

图 2. 主题文件夹的典型内容
屏幕截图显示主题文件夹中的典型文件夹和文件

并非所有这些文件都是一个主题所需要的,许多人认为级联样式表 (CSS) 文件是绝对必需的,但某些主题甚至连 CSS 也没有。通过了解这些主题文件的用法,主题结构以及它的工作方式会变得更加清晰。让我们再看看主题目录中的一些文件,并探讨它们在整体主题中的功能。

.info 文件

.info 文件是一个必需的文件:Drupal 必须包括它,才能看到主题。.info 文件告诉 Drupal 主题的内部名称。例如,如果这个文件的名称是 ibmtheme.info,那么 Drupal 给这个主题的名称将是 ibmtheme。如果您的主题使用 JavaScript、元数据、样式表或块区域等元素,您也必须在 .info 文件中定义它们。一切都是可选的。在 清单 1 中,Bartik 主题的 .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"

.tpl.php 模板文件

主题目录包含若干个模板文件,其文件名如 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 文件中通常包含主题输出的所有条件逻辑和数据处理。您也可以使用 template.php 文件使主题的 .tpl.php 文件保持整洁。因为这是一个 PHP 文件,强制以 PHP 打开 <?php 标记作为内容的开始,但您可以省略结束标记。

其他文件

有几个其他元素对于主题正常运作不是必需的,但它们可能会在许多主题中出现。这些元素包括徽标和屏幕截图、theme-settings.php 文件和 color.inc 文件:

  • 徽标和屏幕截图。这些元素是建议使用的元素,但对于主题的正常运作并不是绝对必要的。然而,如果您想将主题贡献到 Drupal 存储库,那么屏幕截图就是一个强制要求的元素。图 3 是 Garland 主题的屏幕截图。
    图 3. Garland 主题的屏幕截图
    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 文件

.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

区域

创建新的主题区域

您希望能够在 Blocks 管理页面上编辑的页面的任何部分,都需要成为一个区域。通常情况下,这个区域包括标题、右侧栏、内容区和页脚。您必须在 .info 文件中引入您的所有区域。否则它们对于 Drupal 而言并不存在。

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

您可以在主题的配置页面上切换各种页面元素。在主题配置页面上所显示的复选框由 features 键控制(见 图 5)。因此,对于主题没有定义或使用的元素,您可以禁止显示其复选框。省略一个条目,就会禁止显示该特性的复选框;如果您没有定义任何特性,那么所有复选框都将显示为假定的默认值。

图 5. 主题特性设置页面
主题特性设置页面的复选框屏幕截图

清单 5 显示 features 键的所有可用元素。

清单 5. 在 .info 文件中的主题特性条目
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

您在这里定义的字符串将是主题所支持的最低 PHP 版本。默认值来自 DRUPAL MINIMUM PHP 常数(位于 includes/bootstrap.inc 文件):

<?php
define('DRUPAL_MINIMUM_PHP', '5.2.4')
?>

您可以更改此值,但不需要添加字符串。下面是其语法:

php = 5.2.4

默认的 .info 值

.info 文件中包含 Drupal 为每个已安装主题假设的默认值。如果在 .info 文件中没有定义这些值,Drupal 强制主题使用默认值。但是请注意,这些值应用为一个组。这意味着,如果重写一行,如:

regions[sub_header] = Sub-header

您将需要重新定义默认区域的其余部分;否则,它们将被省略。这条规则也适用于样式表。即使样式表在技术上并不是在一个组中进行定义的,但如果在 .info 文件中定义了另一个样式表,您必须再次重新定义 style.css;否则,它将不会被包括在内。

清单 6 中的键和值是 Drupal 7 主题的默认值。

清单 6. 默认的 .info 值
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 文件

现在,研究典型的 page.tpl.php 文件的内容。图 6 中的图像来自 Garland 主题,显示了源代码在浏览器中的样子。

图 6. 在浏览器中的 page.tpl.php 源代码
在浏览器中显示 page.tpl.php 源代码的屏幕截图

若您更仔细地查看,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 技能都较高,您显然可以通过观察示例的构建方式,然后使用允许的变量来明显创建自己的卓越主题。


构建其他模板文件

打印或渲染

有些变量需要使用 render() 函数显示,而其他变量可以简单地打印。如果数组中包含了在 page.tpl.php 参考页(见 参考资料 中的链接)中列出的变量,那么您需要使用 render() 方法。否则,您可以打印该变量 (<?php print $variable; ?>)。

随 Drupal 核心提供的还有其他可用的主题文件的默认模板。您可以在 Drupal 站点(见 参考资料 中的链接)找到它们的列表。对于 page.tpl.php 文件,要轻松构建属于自己的文件,最佳方式是找到一个核心文件,观察它是如何组成的,然后再构建您自己的。访问 Drupal 站点将为您指出允许在任何主题文件中使用的变量。


style.css 文件

在一个普通的静态 HTML 页面中,您必须在页头中包括一个指针,以说明用于页面显示的样式表的位置。指针看起来像这样:

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

如前所述,您可以将新的样式表添加到一个主题,也可以覆盖默认样式。在这两种情况下,你必须在 .info 文件中输入主题样式表。样式表中有什么呢?您对 CSS 类所使用的模块化方法,与 Drupal 核心对框架的标准页面元素所使用的模块化方法相同。即使主题开发人员可以创建自己的类,但在整个 Drupal 站点有许多类。如需要有关 Drupal 7 核心中的类的完整列表,请参阅 参考资料


结束语

本文为您概述了主题系统在 Drupal 7 中的运作方式,还介绍了 Drupal 主题的多个组件,以及如何使用默认的 PHPTemplate 主题引擎从头开始构建一个新的主题。您已经观看了每个组件主题文件的典型结构,现在应该了解了创建自定义主题所需要的技巧。开始做您喜欢的事情吧!

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Open source, Web development
ArticleID=822888
ArticleTitle=为 Drupal 7 构建一个新主题
publish-date=06262012