聚焦：主题系统
Submitted by Very on Fri, 12/23/2011 - 00:19
就像在第一章中简要介绍的那样。模块生产的页面的内容，主题系统给了我们一个在页面显示之前
自定义它的机会。一个主题是一个图片,CSS和HTML/PHP文件的集合，它可以改变Drupal默认输出的
外观。通过切换一个单选按钮，你就可以通过选择不同的主题完全改变站点的设计，你还可以
自定义一些设置来调整这个主题，比如说站点的logo或颜色，这个我们在第二章已经看到。
图11-1 提供了主题系统的一个简单工作原理。Drupal中的每个部分都是和某个模块相关联的，模块是用来处理
页面的请求的。例如“node/1”由节点模块处理，“admin/build/
themes”由系统模块处理，像“albums”的路径则是由视图模块处理的。在模块组建好页面的内容之后
它用 theme()函数通知主题系统，这个函数我们在本章的后面部分做详细讨论。
主题系统主要由一个主题引擎构成，它用来定义页面的动态部分，和Drupal输出的规则，而且可以被当前启用的主题覆盖
，比如Garland。主题引擎能够建立一个基本的框架，修饰内容，用本页面的内容渲染
整个页面模板。但是在可视的魔幻发生的地方---就是你能够控制每个元素如何显示的地方---这里就是主题
页面中的每一个单独的元素，从浏览窗口的标题到站点的logo,在到放置块区的区域。一个Drupal外观的站点
和一个通过主题层工具造型后的网站的不同。让我们看看主题的组成部分，还有Drupal希望我们怎么去使用它。
图11-1. Drupal 是怎么样从URL到HTML
 |
本章讨论的phpTemplate块主题引擎，（也只一种模板系统）是由Drupal内核提供得 。然而需要指出的是 |
修改Drupal 我们为什么要需要主题系统？它是开源的，不对吗?为什么不直接找到drupal中的核心文件中我们不 当你改变的Drupal的安装文件后，你就创建了你自己版本的Drupal，这就失去的它的这些优势。当一个 Drupal在你需要自定义你的需要的时候，不需要你去修改它的代码。它提供了很多机会，在页面加载 通过分开的做一些自定义，我们可以很容易的改变Drupal的安装，不用修改Drupal的默认代码。另外 |
.info 文件
从Drupal 6开始，主题通过主题名.info 文件，放置在主题目录中。这个文件定义了一个主题的各种配置
信息。包括主题名称，所使用的CSS文件和Javascript文件。我们也可以定义用来管理的特性（见第二张章）
这里是一个简单的理解，包括了一下简单的Bluemarine主题配置信息.对.info 文件所有属性的完整描述参见
http://drupal.org/node/171205.
name = Bluemarine
description = Table-based multi-column theme with a marine and ash color scheme.
core = 6.x
engine = phptemplate
图11-2. Skyliner 主题, 只包含CSS, JavaScript, 图片, 和a .info 文件.
主题只需要一个.info文件，这样我们就能不使用PHP或HTML来创建主题了。主题可以关联Drupal的默认
HTML，我们只需要添加CSS,图片和javascript，如果需要的话。Skyliner就是这样的主题。(http://drupal.org/project/skyliner)
如图11-2
区域
区域是站点上我们可以放置区块的地方，就像我们在第二章和本书其他地方一样。 Drupal 默认提供5个区域
* Header (header)
* Footer (footer)
* Left sidebar (left)
* Right sidebar (right)
* Content (content)
你可以在你的主题的.info文件中改变这些区域。下面是一个例子，创建了一个新区域，广告，通过不定义他们
去掉了一些默认区域，比如说头部
regions[ads] = Ads
regions[right] = Right sidebar
regions[content] = Content
regions[footer] = Footer
通过在主题中定义这些区域，可以限制站点管理员在区块管理页面放置块区的位置。这里头和左边区域是
不可用的。当你不想让管理员在某个位置放置东西的时候这就很有用。
|
要取消区域的显示还有一步要做，就是在主题的page.tpl.php文件中输入一个变量，比如 <?php print $ads; ?>. 这个命令将输入所有的放置在这个区域的区块。我们将在“创建一个新区域”一节中 详细讨论。 |
 |
如果你在.info文件中定义区块，drupal就不会使用默认的区域。如果你只自定义了一个区域， 你还必须自定义其他你想用的区域。例如：如果你添加了一个新的“ADs"区域，你需要要也定义 左,右,内容，头，和脚区域。 |
特色
特色指的是主题的一些可以在主题管理界面Administer→Site building→Themes (admin/build/themes)开启和关闭的元素。以下是Drupal内核默认提供得特征列表。
• Logo (logo)
• Site name (name)
• Site slogan (slogan)
• Mission statement (mission)
• User pictures in posts (node_user_picture)
• User pictures in comments (comment_user_picture)
• Search box (search)
• Shortcut icon (favicon)
• Primary links (primary_links)
• Secondary links (secondary_links)
如果你想要从配置列表中去掉一个特色，你需要和在.info文件中创建你自己的特色列表，确定这些项目是你所不需要的。Skyliner 主题的特色列表如下。
features[] = name
features[] = slogan
features[] = mission
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links
这个列表没有包括logo，发布时的用户图片，和评论时的用户图片。这里站点管理员就不能自定义主题的logo了。
CSS
你在.info文件中可以定义所有的CSS和JavaScripts文件的名称和位置。如果没有添加CSS文件，Drupal会
自动找到和包含style.css文件到你的主题目录。你还可以使用其他的CSS文件。你也可以覆盖你的模块提供
的CSS。通过给主题定义一个和模块CSS文件名字相同的文件。这样我们告诉Drupal "用这个文件，
别用那个。”这样Drupal会置换原来的文件。例如，你可以定义 一个system-menus.css文件在你的主题
中，这个就可以覆盖系统模块中的这个文件。下面的一个例子是Skyliner主题定义CSS文件。（注意
他们都放着在了主题目录下的styles 文件夹中）
stylesheets[all][] = styles/reset.css
stylesheets[all][] = styles/typography.css
stylesheets[all][] = styles/forms.css
stylesheets[all][] = styles/style.css
Javascript
也有一个可以自动识别的Javascript文件名：script.js,可以直接在你的主题中使用。你也可以添加其他的文件名到.info文件中去。Skyliner 主题的例子如下scripts[] = skyliner.js
|
drupal默认添加了jQuery 库，我们可以直接使用jQuery 功能。 |
|
CSS 和JavaScript优化设置 由于Drupal的模块特性，虽然一个简单的站点是把CSS和javascript文件直接链接到页面中。在drupal 6 <link type="text/css" rel="stylesheet" media="all"
显而易见，这些很少的文件，需要更少的服务器资源，无论是否有正确的文件在缓存中。这个功能 |
模板文件
创建一个只包含图片和CSS的Drupal主题很好用，如果Drupal本身输出的HTML符合你的需求。但是
如果你要在节点的标题旁添加一个<div>,或者你要把用户的图片从顶部移动到底部。这时候就就可以
用模板文件了，可以对Drupal的输入进行改装
评论，节点，区块，和页面本书都是从模板文件中输出的。模板文件以.tpl.php结尾。
模板文件根据它所控制的项命名。例如评论被 comment.tpl.php控制，整个的页面被page.tpl.php控制
模板文件和典型的Drupal页面的映射如图11-3，页面后的模板文件有点像图11-4
图11-3. Drupal.org 上一个典型 Drupal 网页相关的模板文件
图11-4. SpreadFirefox.com (http://www.spreadfirefox.com) 使用了一个比较复杂的布局, 但是应用的模板文件是相同的。
模板文件主要由HTML和PHP片段构成，它用来显示页面的动态部分。某个主题的page.tpl.php，特别的，应该看上去相似，如果你用html做了前期工作。一个zen主题(http://drupal.org/project/zen)的page.tpl.php文件如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="<?php print $language->language; ?>"
xml:lang="<?php print $language->language; ?>">
<head>
<title><?php print $head_title; ?></title>
...
<div id="content-area">
<?php print $content; ?>
</div>
...
<?php if ($closure_region): ?>
<div id="closure-blocks" class="region region-closure">
<?php print $closure_region; ?>
</div>
<?php endif; ?>
<?php print $closure; ?>
</body>
</html>
HTML和php代码段嵌套在一起，就像，“在这里输入内容”或者“如果有closure区域的区块把这些放在
<div>标签中。这些代码段在<?php ?>标签中，你要注意以$(美元符号）开头的单词。这些特殊的php
单词叫做变量。变量时动态的内容。所然这些起初只是对没有php基础的设计者的警告，一旦你对php
有了足够的理解，能够读和写例子中的东西，你就突然具备的自定义Drupal的惊人能力。
template.php 文件
现在我们看了构成主题一些板块和定义主题的一些文件。最后，主体化最酷的地方
就是给了我们彻底覆盖Drupal输出的能力，完全由我们自己来打扮我们的站点。
这里才是真正有意思的地方。我们发现模板文件确实给我们一些对页面的控制权
，但是你不能真正对里面的变量进行操作。你可以对变量周围的HTML进行自由的
编辑，但是我们怎样进入到变量内部，去得到他的行为哪？ 真正要从实质上去
自定义这些，你需要用到 template.php文件。这个文件才是真正控制主题，在这里通过添加一些变量来显示页面元素和主题的逻辑。我们也可以覆盖主题函数，这是一个有特殊 名称的函数，模块是通过他们来显示HTML的，而不是通过.tpl.php文件.template.php 文件输出了大多数的HTML,但和普通的PHP文件不同，它是通过函数来生产HTML的。如果你对php不太了解，这个文件对你来说就有点难懂，但是如果 你花一些时间学习php来使用这个文件，它会给你神奇的力量，实现对主题的绝对控制。 这里有一个来自Foundation主题(http://
drupal.org/project/foundation)的template.php 文件，它生成了一个新变量$authored, 用在node.tpl.php 中，可以改变默认的搜索表单(删除标题）
<?php
// $Id: template.php,v 1.3 2008/06/23 12:08:02 add1sun Exp $
/**
* Override or insert PHPTemplate variables into the node templates.
*/
function foundation_preprocess_node(&$vars) {
// Set author information line separately from the full $submitted variable.
$vars['authored'] = t('Submitted by') .' '. $vars['name'];
}
/**
* Override the search form (theme, not block) to remove the label.
*/
function foundation_search_theme_form($form) {
unset($form['search_theme_form']['#title']);
return drupal_render($form);
}
|
注意 template.php 有一个php的开始标签(<?php),但是没有使用结束标签（？>) |
在本章的后面我们将举一些小例子，这里你会接触到如何用template.php文件覆盖Drupal的输出。
|
无论在任何时候你对主题做了覆盖后，你都需要通知drupal。drupal为了提高它的性能 |
|
主体化工具箱 在我们进入“操作：创建一个自定义主题”部分之前，我们要花一点时间简要讨论一些称手的工具 文本编辑器 Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60) Devel 模块(http://drupal.org/project/devel) Theme developer 模块( Devel的一部分) |
Tags:
Comments
Post new comment