drupal 7宝典
主题说明了Drupal网站的用户界面(UI)。 即使主题结构没有明显改变,Drupal版本7还是带有一种新的主题实现方法。 本文介绍了如何创建新的Drupal 7主题。
Drupal主题的目的是将框架的处理逻辑与设计元素分开。 为此,Drupal采用了一个复杂的主题系统,该系统由主题,主题引擎和挂钩组成。 主题组件与Drupal核心系统和模块设计元素一起工作,以创建独特的用户界面外观(单独的Drupal页面和表单)。 通过将Drupal的业务逻辑从其表示逻辑中分离出来,代码更易于维护,您可以交换主题层的实现,而不必重写代码层,反之亦然。 图1展示了Drupal框架架构。
图1. Drupal框架架构
主题显示Drupal核心通过基础主题引擎从数据库中获取的数据,该引擎充当Drupal核心与主题模板之间的接口。
主题引擎
主题引擎是主题与Drupal核心交互的方式。 您可以将多个主题引擎与Drupal一起使用。 最受欢迎的是:
-
PHPTemplate
-
XTemplate
- 纯PHP
- Smarty引擎
如果需要,您也可以使用自己的自定义引擎。
PHPTemplate
主题引擎是默认的Drupal引擎,也是本文中使用的引擎,它使用名称分别为filename.tpl.php的单个主题文件作为主题Drupal的theme_filename()
函数。 这些文件均包含HTML框架以及动态数据PHP语句。 因此,凭借PHP的基本知识,使用PHPTemplate
可以轻松创建高级主题,因为仅涉及少量代码。
规划主题
主题由几个文件组成。 多少文件取决于主题的复杂性。 一个主题可以只有三个文件或几十个文件,包括放置在主题目录内几个文件夹中的图形元素和各种脚本。 图2显示了可以在主题的主文件夹中找到的典型文件描述(颜色,图像,徽标,模板,样式表和PHP文件)。
图2.主题文件夹的典型内容
并非所有这些文件在主题中都是必需的,并且某些主题甚至没有许多人认为绝对需要的级联样式表(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的模板文件。 这些模板文件包含主题的可扩展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
标签开始内容,但是您可以省略close标签。
其他的文件
要使该主题起作用,并不需要其他几个元素,但可能会出现在许多主题中。 这些元素包括徽标和屏幕截图,theme-settings.php文件和color.inc文件:
- 徽标和屏幕截图。 建议使用这些元素,但对于主题运行而言并非绝对必要。 但是,如果您想将主题贡献给Drupal存储库,则必须进行屏幕截图。 图3是Garland主题的屏幕截图。
图3. Garland主题的屏幕截图
- theme-settings.php。 该文件显示管理UI设置或除常规设置(如搜索或任务徽标的设置)以外的高级功能。 清单3中显示了Garland主题的此文件的内容,它指示了最终显示的内容。
清单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.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
键,并且仅应是主题的简短描述。 您在此处输入的描述将出现在主题选择或外观页面上。 语法如下:
description = A multi-column theme that can be configured to modify colors
and switch between fixed- and fluid-width layouts
屏幕截图
screenshot
键是可选的。 它的功能是告诉Drupal在哪里可以找到新主题的缩略图。 缩略图图像还将显示在外观页面上。 如果您没有在.info文件中包含此键,Drupal将从默认主题的目录中调用默认的screenshot.png文件。 如果您决定将缩略图文件命名为screenshot.png以外的其他名称,或者将其放置在主题主目录之外的目录中,则需要包含此键。 语法如下:
screenshot = /images/screenshot.png
要创建屏幕截图,只需在浏览器中捕获完成主题的图像即可。 然后,裁剪图像并将其调整为294 x 219像素的尺寸,并将其另存为screenshot.png。 将此文件与.info文件放在同一文件夹中。
版
尽管许多流行的主题都包含version
密钥,但不鼓励使用它。 如果您打算在Drupal主题存储库中托管主题,则无需包含version
,因为打包发行版本以供下载时,drupal.org会自动添加版本字符串。 否则,您可以包括任何您喜欢的版本字符串。 语法如下:
version = 1.0
核心
core
密钥是必需的值。 在当前所有受支持的Drupal版本中,您必须指明与模块和主题兼容的Drupal版本。 您在此处设置的值将与Drupal Core兼容性常量(在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 = 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.主题功能设置页面
清单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。 另外,您可以通过.info文件添加新的样式表。 语法如下:
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
剧本
通常仅通过在主题的template.php文件中调用诸如drupal_add_js()
类的函数来包含JavaScript文件。 但是,在Drupal 7中,只有在.info文件中指定script.js时,才会包括script.js。 语法如下:
scripts[] = scripts/myscript.js
PHP
您在此处定义的字符串将是主题支持的最低PHP版本。 缺省值来自DRUPAL MINIMUM PHP
常量(位于include / 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语句。 非常方便的是,大多数PHP元素已经为Drupal定义了,而您需要做的就是将它们放置在所需的位置。
注意:链接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
(网站根目录的路径) -
$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
主题引擎从头开始构建新主题。 您看到了每个组件主题文件的典型结构。 您应该具有创建自己的自定义主题所需的内容。 请享用!
翻译自: https://www.ibm.com/developerworks/web/library/os-new-drupal-theme/index.html
drupal 7宝典