Drupal6_pro_Drupal_development(专业开发指南)TheThemeSystem主题系统.doc

第8章 主题系统如 果你想修改Drupal生成的HTML或者其它标识字体，那么你需要深入的了解主题系统的各个组成部分。主题系统是个优雅的架构，它使你无需核心代码，就 可以得到想要的外观；但是它也有一个很长的学习曲线，特别是你想要完全定制一个站点主题，以与其它drupal站点区别开来，那么你还是需要费点功夫的。 我将向你讲述主题系统的工作原理，以及向你展示隐藏在Drupal核心之中的一些最佳实践。首先要记住的是：不要通过编辑模块文件内部的HTML来改变你 站点的外观。如果这样做了，你仅仅创建了一个对你个人适用的内容管理系统，这样你就会失去开源软件系统最大的优势之一-社区的支持。覆写，而不 是修改！主题系统的组成 主题系统由多个抽象层次所组成：模板语言，主题引擎和主题。模板语言和主题引擎主题安装主题构建一个PHPTemplate主题使用已有的HTML和CSS文件为你的主题创建一个.info文件为你的主题创建一个.info文件(1)理解模板文件theme()函数介绍theme()工作原理概览覆写可主题化的项目覆写主题函数覆写模板文件添加和操纵模板变量适用于所有模板的变量page.tpl.phppage.tpl.php(1)node.tpl.phpnode.tpl.php(1)block.tpl.phpcomment.tpl.phpbox.tpl.php其它的.tpl.php文件多页面模板高级Drupal主题化注册表是如何构建的逐步分析theme()函数逐步分析theme()函数(1)定义新的区块区域总结模板语言和主题引擎主题系统可以使用多个模板语言。Smarty, PHPTAL, 和PHPTemplate都可以与Drupal集成，用来向模板文件中添加动态数据。为了使用这些语言，需要一个叫做主题引擎的包装器，用来在模板语言和Drupal之间进行交互。你可以在/project/Theme+engines中找到对应模板语言的主题引擎。安装主题引擎其实很简单，只需要通过将相应主题引擎的目录放置到你站点的主题引擎目录下面就可以了。如果仅用于单个站点，使用目录sites/sitename/themes/engines；如果用于多个Drupal站点，则使用目录sites/all/themes/engines，如图8-1所示。 Drupal社区创建了一个自己的引擎，专门对Drupal作了优化。它就是PHPTemplate，它使用PHP作为模板语言，这样它就不需要中间层的 解析环节了，而其它模板语言常常需要这一环节。这是Drupal最常用的模板引擎，它是Drupal自带的。它位于themes/engines /phptemplate,如图8-2所示：图8-1 为Drupal添加定制主题引擎的目录结构图8-1 Drupal核心主题引擎的目录结构。这个位置专门用于放置核心主题引擎。注意 完全可以不使用模板语言，而简单的使用纯php 的模板文件。如果你是热衷于追求速度，或者可能仅仅是想折磨一下你的设计人员，那么你可以不使用主题引擎而仅仅整个主题包装在PHP函数中，比如使用函数 themename_page()和themename_node()来代替模板文件。一个基于PHP主题的示例，可参看 themes/chameleon/chameleon.theme。 当你安装好一个主题引擎后，你不会看到你的站点有了任何改变。这是因为，主题引擎仅仅是一个接口库，在它被使用以前，你仍然需要安装一个依赖于该主题引擎的Drupal主题。 要使用哪一个模板语言呢？如果你正在转换一个遗留站点，那么可能使用以前的模板语言会更方便一些；也许你的设计团队更倾向于使用所见即所得的编辑器，这样 PHPTAL应该是个更好的选择，因为它可以阻止这些编辑器对模板的破坏。你可以发现，大多数的文档和支持都是关于PHPTemplate的，如果你是从 头开始建立一个站点的话，那么从长期的维护和社区支持这两个方面来看，PHPTemplate应该是最好的选择。主题用Drupal的行话来说，主题就是一组负责你站点外观的文件。你可以从/project/Themes下载第3方 主题，或者你可以自己动手创建一个主题，后者正是你在本章将要学习的。作为一个web设计者，主题由你所熟悉的大部分内容所组成：样式表，图 片，JavaScript文件，等等。你将发现，在Drupal主题和纯HTML站点之间的区别就是模板文件。这些文件一般都包含大段的静态HTML，和 一些小段的用来插入动态内容的代码。它们负责你站点的一个特定部分的外观。模板文件的语法依赖于它所使用的主题引擎。例如，列表8-1，8-2，8-3列 出了3个模板文件的代码片段，它们输出的内容是一样但是包含的模板文件内容却完全不同。列表 8-1. Smarty if count($secondary_links) foreach from=$secondary_links item=link $link /foreach /if if count($primary_links) foreach from=$primary_links item=link $link /foreach /if列表 8-2. PHPTAL secondary link primary link 列表 8-3. PHPTemplate 每一个模板文件，由于它所使用的模板语言的不同，所以看起来也各不相同。模板文件的扩展名指明了它所使用的模板语言，也就是它所依赖的主题引擎（参看表8-1）表8-1 模板文件的扩展名指出了它所依赖的模板语言。模板文件 主题引擎扩展.theme PHP.tpl.php PHPTemplate*.tal PHPTAL.tpl Smarty* PHPTemplate是Drupal的默认主题引擎安装主题为了让一个新的主题显示在Drupal 管理界面中，你需要把它放到sites/all/themes下面。这样不仅你的Drupal站点可以使用这个主题，一个多站点系统中的所有站点都可以使 用该主题。如果你的是个多站点系统，而你又想把这个主题仅仅用在特定站点上，那么你可以把它放到sites/sitename/themes下面。你可以在你的站点安装多个主题，主题的安装过程和模块的基本相同。将主题文件放到相应的位置后，导航到管理界面“管理站点构建主题”。你可以安装多个主题，也可以一次启用多个主题。这意味着什么？通过启用多个主题，用户可以在他们的个人资料页面上，从已启用的主题中选择一个作为他们自己的主题。在用户访问站点时，就会使用所选的主题了。当 下载或者创建一个新的主题时，将新建主题和核心主题以及第3方主题区分开来是个很好的习惯。我们推荐在你的themes文件夹下面创建两个文件夹。将自定 义主题放到文件夹custom下，而将从下载下来的第3方的主题放到drupal-contrib下。不过这个实践不是特别重要，不 像模块目录下面那样特别注重这点，因为一个站点的主题一般只有几个，但是模块的数量却有很多。构建一个PHPTemplate主题创建一个主题，可以有多种方式，这取决于你的起始材料。假定你的设计者已经为你的站点提供了HTML 和CSS文件。那么将设计者的设计转化为一个Drupal主题，到底难不难呢？它实际上不是很难，而且你能够轻易的完成工作的80%。不过还有 20%-最后的难点了-它是Drupal主题制作高手与新手的分水岭。首先让我们从简单的部分开始。这里有个概括：1. 为站点创建或修改HTML文件。2. 为站点创建或修改CSS文件。3. 创建一个.info文件，来向Drupal描述你的新主题。4. 按照Drupal的标准为文件命名。5. 在你的模板中，插入可用的变量。6. 为单独的节点类型，区块，等等创建模板文件。注意 如果你从头开始设计你的主题，那么在开放源代码WEB设计站点里面有很多非常好的设计可供借鉴（注意这些是HTML和CSS设计，而不是Drupal主题）。使用已有的HTML和CSS文件我们假设你已经有了HTML页面和CSS样式，如列表8-4和8-5中所给出的，现在让你将它们转化为一个Drupal主题。显然在一个实际的项目中，你所用到的文件应该比这些更详细；我们在这里介绍的是方法，所以示例简单了一些。列表 8-4. page.html Page Title Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. Subheading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. Footer 列表 8-5. global.css#container width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%;#header padding: .5em; background-color: #ddd; border-bottom: 1px solid gray;#header h1 padding: 0; margin: 0;#sidebar-left float: left; width: 160px; margin: 0; padding: 1em;#main margin-left: 200px; border-left: 1px solid gray; padding: 1em; max-width: 36em;#footer clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;#sidebar-left p margin: 0 0 1em 0; #main h2 margin: 0 0 .5em 0; 该设计如图8-3所示图8-3 在转化为Drupal主题以前的设计 让我们将这个新主题叫作greyscale,在文件夹sites/all/themes/custom下面创建一个子文件夹greyscale。如果 sites/all/themes/custom文件夹不存在的话，那么你需要新建一个。将page.html和global.css复制到 greyscale文件夹下面。接下来，将page.html重命名为page.tpl.php,这样它将作为一个新的页面模板，为Drupal的每个页 面服务了。为你的主题创建一个.info文件每个主题都需要包含一个文件，用来向Drupal 描述它的能力。这个文件就是主题的.info文件。由于我们把我们的主题叫作greyscale，所以我们的.info文件就被命名为 。创建文件sites/all/themes/custom/greyscale/，并输入列 表8-6所示的10行代码。列表 8-6.主题的.info文件; $Id$name = Greyscalecore = 6.xengine = phptemplateregionsleft = Left sidebar; We do not have a right sidebar.; regionsright = Right sidebarregionscontent = Contentregionsheader = Headerregionsfooter = Footer 如果我们想要更复杂一些的话，那么我们可以在我们的.info文件中为Drupal提供更多的信息。让我们看看这个文件都可以包含哪些信息，如列表8-7所示。列表 8-7.带有更多信息的.info文件; $Id$; Name and core are required; all else is = Greyscaledescription = Demurely grey tableless theme.screenshot = screenshot.pngcore = 6.xengine = phptemplateregionsleft = Left sidebar; We do not have a right sidebar; regionsright = Right sidebarregionscontent = Contentregionsheader = Headerregionsfooter = Footer; Features not commented out here appear as checkboxes; on the theme configuration page for this theme.features = logofeatures = namefeatures = sloganfeatures = missionfeatures = node_user_picturefeatures = comment_user_picturefeatures = searchfeatures = faviconfeatures = primary_linksfeatures = secondary_links; Stylesheets can be declared here or, for more; control, be added by drupal_add_css() in template.php.; Add a stylesheet for media=all:stylesheetsall = mystylesheet.css; Add a stylesheet for media=print:stylesheetsprint = printable.css; Add a stylesheet for media=handheld:stylesheetshandheld = smallscreen.css; Add a stylesheet for media=screen, projection, tv:stylesheetsscreen, projection, tv = screen.css; Override an existing Drupal stylesheet with our own; (in this case the forum modules stylesheet):stylesheetsall = forum.css; JavaScript files can be declared here or, for more; control, be added by drupal_add_js() in template.php.; scripts.js is added automatically (just like style.css; is added automatically to stylesheets).scripts = custom.js; PHP version is rarely used; you might need it if your; templates have code that uses very new PHP features.php = 5.2.0; Themes may be based on other themes; for example, they; may simply override some of the parent themes CSS.; See the Minnelli theme at themes/garland/minnelli for; an example of a theme that does this in Drupal core.base theme = garland 由于Greyscale主题现在有了一个.info文件（列表8-6所给的简单的那个）和一个page.tpl.php文件，所以你就可以在管理界面中启用它了。导航到“管理站点构建主题”，将它设置为默认主题。为你的主题创建一个.info文件(1)恭喜恭喜！现在你应该可以实际的看到你的设计了。外部的样式表还没有加载进来（我们将在后面讨论它），访问你的站点中的任何页面，都会一而再再而三的显示同一个页面，尽管如此，这也是一个了不起的开始！由于访问你的站点中的任何页面，都会显示page.tpl.php 中的静态HTML内容，所以现在你无法进入管理界面了。我们将你关到了Drupal站点的门外面！哎哟。一不小心被关到了门外面，对于初学者来说，这是常 碰到的事情，下面我们将向你讲述如何解决这个问题。一种方案是对刚才启用的主题进行重命名。在这种情况下，你可以简单的将greyscale重命名为 greyscale_，这样你就可以重新返回站点到里面了。那是一个快速解决办法，但是由于你知道问题的真正所在（也就是，我们还没有包含动态内容），这 里给出另一种方案：你可以向page.tpl.php中添加适当的变量，从而显示Drupal的动态内容而不是前面的静态内容。 每一个PHPTemplate模板文件-比如page.tpl.php，node.tpl.php，block.tpl.php等等-都有一组动态内容的变量传递给它们使用。打开page.tpl.php将相应的静态内容替换为相应的Drupal变量。不要担心，我很快就会对这些变量进行讲解。 重新加载页面，你将发现，变量被来Drupal的内容替换了。你将注意到没有加载global.css样式表，这是因为指向该文件的路径不对。你可以手工的调整它的路径，或者你可以采用Drupal的方式来完成它，这样更加灵活并且具有其它好处。首 先，将global.css重命名为style.css。根据规定，Drupal将自动的查找每个主题下面的style.css文件。一旦找到了这个文 件，那么Drupal会将其添加到变量$styles里面，从而被传递给page.tpl.php.让我们使用下面的信息来更新 page.tpl.php。. 保存你的修改并重新加载页面。瞧！如果你查看页面的源代码的话，你将注意到，其它启用的模块所带有的样式表也被加载了进来，这些都是通过变量$styles实现的： Example | Drupal 6 . 通过将你的CSS文件命名为style.css,这样Drupal就可以使用它的CSS预处理引擎来对它进行处理，以消除CSS文件中所有的空白和换行， 另外，它还将它们合并到了一起（Drupal没有使用多个样式表），作为一个文件提供给浏览器。关于这一特性的更多细节，参看第22章。注意 Drupal在样式表URL的后面添加了伪查询字符串（在前面例子中的“?f”），这样就可以控制缓存了。当需要的时候，它可以修改字符串，比如运行update.php以后，或者在管理界面“管理站点构建 性能”中清空了缓存以后。 在你将global.css重命名为style.css以后，刷新浏览器，你将看到一个与图8-3中主题类似的主题，它包含了页首，页脚，和左边栏。尝试一下，导航到“管理站点构建 区块”，将“在线用户”区块指定到左边栏。除了前面提到的这些变量以外，还有更多的变量可以添加到page.tpl.php和其它模板文件中。让我们深入的学习一下！如果你没有动手实现前面所给的例子，那么你可以浏览一下themes目录中所带有的核心主题，看看在这些主题中，变量是如何使用的。理解模板文件一些主题包含各种模板文件，而有些仅包含page.tpl.php。那么你如何知道，你可以创建哪些Drupal能够识别的模板文件呢？创建模板文件时，所遵循的命名约定有哪些？在接下来的部分中，我将向你讲解使用模板文件的各种技能。大图 page.tpl.php是所有其它模板文件的祖宗，它负责站点的整体布局。其它模板文件被插入到了page.tpl.php中，如图8-4所说明的。图8-4其它的模板被插入到了page.tpl.php文件中 在页面的构建期间,图8-4中block.tpl.php和node.tpl.php的插入是由主题系统自动完成的。还记不记得，你在前面的例子中创建的 page.tpl.php文件？好的，变量$content包含了调用node.tpl.ph的输出，而$left包含了调用block.tpl.php 的输出。让我们看看它是怎么工作的。 让我们向Greyscale主题中添加一个节点模板文件。我们在这里没有从头创建一个，而是拷贝Drupal的默认节点模板文件；也就是，如果一个主题中 找不到node.tpl.php文件的话，所使用的节点模板文件。将modules/node/node.tpl.php拷贝到sites/all /themes/custom/greyscale/node.tpl.php。然后访问“管理站点构建 模块”页面，这样就会重新构建主题注册表。在重新构建的过程中，Drupal将找到sites/all/themes/custom/greyscale/node.tpl.php文件，并且从现在起，它将使用这个文件作为节点模板。导航到“创建内容Page”，来创建一个节点（只输入标题和主体字段就可以了）。现在你可以对你的node.tpl.php文件做一点小的修改（比如在它的最后面加上“你好吗！”）。现在你节点的显示，就使用了你修改的模板文件。 对于block.tpl.php，方法是一样的（你可以在modules/system/block.tpl.php找到默认的区块模板文件），对于Drupal中的其它模板，也同样适用。theme()函数介绍当Drupal想要为一个可主题化的项目（比如节点，区 块，面包屑，评论，或者用户签名）生成一些HTML输出时，它将查找用来为该项目生成HTML的主题函数或者模板文件。Drupal的所有部分，基本上都 是可主题化的，这意味着，对于为该项目实际生成的HTML，你可以进行覆写。我们一会儿看一些例子。提示 在Drupal中，可主题化的项目的列表，可参看/api/group/themeable/6。theme()工作原理概览当一个简单的节点页面显示时，比如/?q=node/3，都发生了什么呢，这里给出了大致的总结：1. Drupal的菜单系统收到了请求，并将控制权转交给节点模块。2. 在构建了节点数据结构以后，调用theme(node, $node, $teaser, $page)。这将查找合适的主题函数或者模板文件，定义模板文件中所用的各种变量，应用该模板，为节点生成最终的HTML。（如果有多个节点正在被显 示，比如一个日志，那么对于每个节点都会调用一遍这个流程。）3. 如果启用了评论模块，节点的评论也将被转化为HTML，并追加在节点的HTML后面。4. 这样就返回了一团HTML（在index.php中，它就是变量$return），使用theme(page, $return)，这样就再次传递给了theme()函数。5. 在处理页面模板以前，Drupal 作了一些预处理，比如，找出有哪些区域可用，以及在每个区域中显示哪些区块。通过调用theme(blocks, $region)，将每个区块转化为HTML，theme(blocks, $region)是用来定义区块变量并应用区块模板的。在这里，你应该可以开始看到一个模式了。6. 最后，Drupal定义了许多供页面模板使用的变量，并将其应用到页面模板中去。 现在，从前面的列表中，你应该能够认识到theme()函数在Drupal中的重要地位。它负责运行预处理函数，来设置模板中所用的变量；它将主题函数的 调用，分发给合适的函数或者查找合适的模板文件。而输出的结果就是HTML。这一流程的图示可参看图8-5。我们将在后面更深入的学习一下，这个函数是如 何工作的。现在，应该不难理解，当Drupal想将一个节点转化为HTML时，就会调用theme(node)。根据所启用的主 题，theme_node()将用来生成HTML，或者使用一个名为node.tpl.php的模板文件来生成HTML。可以在多个层次上，对这个流程进行覆写。例如，主题可以覆写内置的主题函数，所以，当调用theme(node)时，那么将会调用 greyscale_node()，而不是默认的theme_node()。模板文件也有命名约定，我们将在后对它进行讲解，所以，模板文件node- story.tpl.php将专门负责Story类型的节点。覆写可主题化的项目Drupal的主题系统背后的核心哲理和钩子系统的类似。通过遵循命名规范，就可以标识出哪些函数是主题相关的函数，它们负责格式化并返回你站点的内容，或者使用模板文件负责输出HTML内容。覆写主题函数正如你看到的,可主题化的项目是通过它们的函数名来标识的,每个函数名前都带有前缀“theme_”, 或者还可以通过模板文件来标识。这一命名规范使得Drupal能够为所有的可主题化函数创建一个函数覆写机制。这样,设计者就可以指示Drupal执行一 个具有更高优先级的自定义函数，从而替代开发者在模块中给出的默认的主题函数,或者替代Drupal的默认模板文件。例如，让我们检查一下,在构建站点的 面包屑时该流程是怎么工作的。 打开includes/theme.inc文件,并检查里面的函数。这里的许多函数都以theme_开头，这就告诉人们它们是可以被覆写的。特别的，我们看看theme_breadcrumb()：/* Return a themed breadcrumb trail.* param $breadcrumb* An array containing the breadcrumb links.* return a string containing the breadcrumb output.*/function theme_breadcrumb($breadcrumb) if (!empty($breadcrumb) return . implode( , $breadcrumb) .; 这个函数控制着Drupal中面包屑导航条的HTML输出。当前，它在面包屑的每一项之间添加了一个向右的双箭头分隔符（）。假定你想将div标签改为span标签，并使用星号（*）来代替双箭头（）。那么你该怎么办呢？一种方式是在theme.inc中修改这个函数，保存，并调用。这样也能达到目的。（别！别！千万别这样做！）。我们有更好的方式。你有没有见过Drupal核心中是怎么调用这些主题函数的？你永远都不会看到直接调用theme_breadcrumb()的情况。替代的，它通常包装在帮助函数theme()中。你期望这样调用这个函数：theme_breadcrumb($breadcrumb) 但实际不是这样。替代的，你将看到开发者这样调用：theme(breadcrumb, $breadcrumb); 这个通用的theme()函数负责初始化主题层,并将函数调用分发到合适的位置，这使得我们能够以更优雅的方式来解决我们的问题。图8-5展示了通过调用theme()，指示Drupal按照下面的次序查来找相应的面包屑函数。假定你使用的主题为Greyscale,，它是基于PHPTemplate的主题，那么Drupal将会查找下面的函数(我们暂且忽略一下breadcrumb.tpl.php)：greyscale_breadcrumb()phptemplate_breadcrumb()sites/all/themes/custom/greyscale/breadcrumb.tpl.phptheme_breadcrumb() 我们看到函数phptemplate_breadcrumb()可以覆写内置的面包屑函数,那么我们要把这个函数放到哪里呢? 很简单,那就是你主题的template.php文件,在这里你可以覆写Drupal的默认主题函数,拦截和创建传递给模板文件的自定义变量.注意 在做这些练习的时候,不要使用Garland作为当前主题,因为Garland已经有了一个template.php文件.替代的,在这里可以使用Greyscale或者Bluemarine. 为了修改Drupal的面包屑，创建文件sites/all /themes/custom/greyscale/template.ph，并将theme.inc中的theme_breadcrumb()函数复制 并粘贴到该文件里面。记住要包含?php标签。还有对函数要进行重命名，将theme_breadcrumb改为 phptemplate_breadcrumb。接着，导航到“管理站点构建 模块”以重新构建主题注册表，这样Drupal就能够找到你的新函数了。?php/* Return a themed breadcrumb trail.* param $breadcrumb* An array containing the breadcrumb links.* return a string containing the breadcrumb output.*/function phptemplate_breadcrumb($breadcrumb) if (!empty($breadcrumb) return . implode( * , $breadcrumb) .; 当下一次Drupal需要生成面包屑时，它就会首先找到你的函数，并使用它来代替默认的theme_breadcrumb() 函数，这样面包屑中就会包含你的星号，而不再包含默认的双箭头了。很漂亮，不是么？通过theme()函数来管理所有的主题函数调用，如果当前主题覆写了 任何一个theme_ 函数，那么Drupal将使用它们来代替默认的主题函数。开发者，请注意：在你的模块中任何需要输出HTML或者XML的部分都应该使用以 “theme_”开头的主题函数，这样设计者就可以对它们进行覆写了。图 8-5. theme()函数调用时的执行流程覆写模板文件假定你和一个设计者一同工作，你告诉他/她“从代码中找到主题函数并对其进行覆写”，这是不是有点难为人了？幸运的是，有另一种方式，使得设计者能够更容易的修改外观。你可以将匹配的可主题化项目替换为它们自己的模板文件，我将通过大家熟悉的面包屑例子来说明这一点。 在我们开始以前，首先确保没有主题函数对heme_breadcrumb()进行了覆写。所以，如果你在前面的一节中，在你主题的template.php文件里面创建了phptemplate_breadcrumb()函数的话，那么把它注释掉。接着创建文件sites/all/themes/custom/greyscale/breadcrumb.tpl.php。这是面包屑的新模板文件。因为我们想将标签替换为标签，继续前进，向该文件中添加以下内容： 现在设计者就很容易编辑文件了。现在你需要告诉Drupal，在显示面包屑时调用这个模板文件。为了实现这一点，你需要导航到“管理站点构建 模块”，来重新构建主题注册表。在重新构建主题注册表的时候，Drupal将找到你的breadcrumb.tpl.php文件，并将面包屑的可主题化项目映射到该模板文件上。添加和操纵模板变量问题又来了：如果你可以创建你自己的模板文件并控制传递给它们的参数，那么你如何操纵或者添加传递给页面和节点模板文件的变量呢？注意 只有实现为模板文件的可主题化项目，才有变量的聚合和传递一说。如果可主题化项目采用主题函数的实现方式，那么就不需要向其传递变量了。每次加载一个模板文件都需要调用一系列的预处理函数。这些函数负责聚集变量，以将其传递给合适的模板文件。 让我们继续使用面包屑作为我们的例子。首先，让我们修改sites/all/