为 Drupal 7 构建一个新主题

时间 2019-11-17

标签 drupal 构建一个主题繁體版

原文原文链接

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

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

图 1. Drupal 框架结构

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

主题引擎

主题引擎 是一种手段，主题经过此引擎与 Drupal 核心进行交互。有几个主题引擎能够与 Drupal 配合使用。最流行的是：ios

PHPTemplate
XTemplate
Plain PHP
Smarty Engine

若是您愿意，您也可使用本身的自定义引擎。数据库

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

回页首bootstrap

规划主题

主题是由若干个文件组件。文件的数量取决于主题的复杂性。一个主题可能只有三个文件，也可能会有几十个文件，包括放置在主题目录内若干个文件夹中的图形元素和各类脚本。图 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 主题的屏幕截图

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

区域

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 模板只是一个简单的 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 站点将为您指出容许在任何主题文件中使用的变量。

回页首

style.css 文件

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

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

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

回页首

结束语

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

注：原文连接：http://www.ibm.com/developerworks/cn/opensource/os-new-drupal-theme/