XTemplate主题系统使用模板来控制网页的布局和样式.它将逻辑(PHP)、结构(XHTML/HTML)、和样式(CSS)独立开来,对于设计者来说,只需要使用XHTML/HTML和CSS就可以创建或者修改模板了,而不用担心PHP代码。
XTemplate模板就是一些目录,这里面包含了模板用到的所有的XHTML/HTML,CSS,图片和JavaScript文件。模板位于Drupal安装目录下面的themes目录里:
/themes/
一旦将一个模板放到themes目录下,XTemplate就会自动找到它,并将它展示到后台管理的主题选择页面:
administer -> themes
Drupal发布时带了两个XTemplate模板Bluemarine 和Pushbutton。
尽管XTemplate现在还是内核的一部分,但是将来它将被移出内核了,这有多个原因。这并不意味着XTemplate就不再开发了,它将作为一个第3方引擎,可在drupal中继续使用。
为了创建一个新的XTemplate,你需要在Drupal的/themes/目录下面创建一个子目录.
而子目录的名字,就会作为你的新模板的名字,对于
/themes/rembrant
一旦你在这个目录创建一个模板的话, "rembrant"模板就会出现在主题选择页面.
创建一个新模板的最简单的方式就是,拷贝一个已存在的模板,比如默认的Pushbutton,然后对拷贝的文件进行修改.
在一个模板目录下面,唯一必须的文件就是xtemplate.xtmpl,它是一个规则的HTML或者XHTML文件,里面包含了一些XTemplate标签,在一个页面展示时,drupal会使用内容来替换这些标签。你可以使用多种编辑器来编辑xtemplate.xtmpl文件,比如DreamWeaver, GoLive, BBEdit或者其它你使用的HTML/XHTML编辑器。
所有的其它文件都是可选的,在xtemplate.xtmpl文件中存在这些文件的链接。其中可以包括CSS、图片、JavaScript文件,这些文件也都应该放在模板目录下面,这样便于Drupal的维护和迁移。
注意,如果你将你的样式表命名为style.css的话,drupal将会自动加载它,而你就不需要为它添加一个@import 或者 <link />语句了。如果在你的模板目录下面还有一个子目录,里面包含了一个style.css文件的话,那么这个子目录将成为一个新的主题,它将使用父目录中的XHTML模板,但是将采用子目录里面的样式。
xTemplate是这样生成网页的,使用从数据库中取出的内容,替换xtemplate.xtmpl模板文件中的占位标签,从而生成相应的页面的.
有两种类型的模板占位标签, section标签,和项目(item)标签
Section(片断)标签
Section标签用来处理网页的结构,标记页面的区域,实际就是XHTML/HTML注释标签,样子如下所示:
<!-- BEGIN: title -->
<!-- END: title -->
一些section标签标记的是内容,而它的结构可以重复.例如评论部分可以重复多次,这取决于一个页面的评论数量
<!-- BEGIN: comment -->
<!-- END: comment -->
Section标签还可以嵌套,这样一个section标签,可以包含其它的section标签:
<!-- BEGIN: node -->
<!-- BEGIN: title -->
<!-- END: title -->
<!-- END: node -->
项目标签
项目标签实际上是内容项的展位符,可以页面的标题,作者,或者是页面的主内容.项标签是这样的:
{title}
{submitted}
{content}
项标签外面需要使用section标签,例如:
<!-- BEGIN: node -->
{title}
<!-- END: node -->
前面的{title}标签,是页面的主标题,而下面的{title}标签则是页面评论的标题.
<!-- BEGIN: comment -->
{title}
<!-- END: comment -->
头部
xTemplate头部的开始和结束标签如下:
<!-- BEGIN: header -->
<!-- END: header -->
不要将这里的头部与XHTML/HTML的<head>元素混淆了.头部里面不但包含了<head>元素,它还包含了网页的顶部---设计者通常称之为“页首”,它里面通常包含一个带有站点logo和导航链接的横幅。
Prolog(序言)
WC3建议,所有的XHTML文档都应该以一个XML Prolog(序言)开始,用来声明文档的编码,例如:
<?xml version="1.0" encoding="utf-8"?>
不幸的是,许多浏览器对XML序言的支持有限,页面或者完全显示不了,或者显示的不正确。因此推荐大家不用XML序言,换种方式,可以在你模板的<head>中的Content-Type元素里声明编码。
DOCTYPE
DOCTYPE元素告诉浏览器两件事情,1,文档所使用的XML语言,2,该语言的DTD(文档类型声明)所在的位置。
下面是一个DOCTYPE元素的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在DOCTYPE或者XML序言前面,不应该有任何东西了。不过可以加上xTemplate的<!-- BEGIN: header -->标签,因为在页面发送给浏览器以前,Drupal将把这个标签删除掉,但是记住这个标签和DOCTYPE或者XML序言之间,不能有空格或者换行符,否则的话,你可能会得到意想不到的结果。
关于DOCTYPE元素的更多细节,以及你要使用哪个版本,参看:为你的站点使用正确的DOCTYPE!作者Jeffrey Zeldman
{head_title}
<title>元素的内容。用作浏览器的视窗标题,也作为搜索引擎里面的页面标题。
{head}
向里面填充以下内容:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://example.com/" />
<style type="text/css" media="all">
@import url(misc/drupal.css);
</style>
{styles}
声明当前的样式:
<style type="text/css" media="all">@import "themes/bluemarine/style.css";</style>
通过添加这个标签,你的 模板就可以利用Drupal主题系统的样式切换功能了。注意,如果你有一个默认的样式表的话,它的名字应为style.css并且和你的xtemplate.xtmpl文件位于同一个目录下面。
{onload_attributes}
<body>标签的页面属性。
{logo}
Logo部分的开始和结束标签如下:
<!-- BEGIN: logo -->
<!-- END: logo -->
站点logo的文件名,可以在Drupal主题管理界面中进行配置。(该项的展示是可选的)
{site_name}
站名部分的开始和结束标签如下:
<!-- BEGIN: site_name -->
<!-- END: site_name -->
当前的站名,可在drupal管理界面:administer->settings中进行配置。
(该项的展示是可选的)
{site_slogan}
站点标语部分的开始和结束标签如下:
<!-- BEGIN: site_slogan -->
<!-- END: site_slogan -->
当前的站点标语,可在drupal管理界面:administer->settings中进行配置。(该项是可选的)。
{secondary_links} {primary_links}
在Drupal主题管理界面中,通过设置"Secondary links"(二级链接) 和"Primary links"(一级链接),你就为这两个标签设置了内容。如果管理员没有声明任何"Primary links"(一级链接)的话,Drupal将根据当前启用的模块来自动生成一组链接。
管理员可以使用这些标签来输入指向站点主区域的链接,包括站点的标题,站点消息,图片或者其它需要的东西。
Search Box (搜索框)
搜索框的开始和结束标签如下:
<!-- BEGIN: search_box -->
<!-- END: search_box -->
{search_url}
表单action: "search"
{search_description}
搜索框中的替代文本说明,比如“输入你要搜索的词语”。
{search_button_text}
搜索提交按钮上的值:“搜索”。
Mission(使命)
Mission的开始和结束标签如下:
<!-- BEGIN: mission -->
<!-- END: mission -->
{mission}
站点使命,仅出现在首页,可在drupal管理界面:administer->settings中进行设置。
Title(标题)
标题的开始和结束标签如下:
<!-- BEGIN: title -->
<!-- END: title -->
{title}
节点的标题
Tabs(标签集)
标签集的开始和结束标签如下:
<!-- BEGIN: tabs -->
<!-- END: tabs -->
{tabs}
当前页面的Drupal“本地任务”标签。
{breadcrumb}
页面的面包屑,是从首页通往当前页面的路径。
Help(帮助)
帮助的开始和结束标签如下:
<!-- BEGIN: help -->
<!-- END: help -->
{help}
包含了用于特定页面的任何帮助信息。
Message(消息)
消息的开始和结束标签如下:
<!-- BEGIN: message -->
<!-- END: message -->
当用户完成了某项操作,Drupal确认其操作结果时,就会显示消息,例如,更新或者删除一个页面后,都会在顶部出现几行消息。
{message}
消息的文本。
注意:这个可用于Drupal 4.6.5;它应该也适用于Drupal4.6.6
XTemplate的一个不足是,当它展示一级链接时,不能够处理里面的PHP.不过,我从php.net的用户评论中,找到两个函数,可以帮助XTemplate引擎解决这个问题:
function eval_mixed_helper($arr){
return ("echo stripslashes(\"".addslashes($arr[1])."\");");
}
function eval_mixed($string){
$string = "<? ?>".$string."<? ?>";
$string = preg_replace("/<\?=\s+(.*?)\s+\?>/", "<? echo $1; ?>", $string);
$string = str_replace('?>', '', str_replace( array(' <?php', '<?'), ', preg_replace_callback( "/\?> ((.|\n)*?)<\?(php)?/","eval_mixed_helper",$string) ) );
return eval($string);
}
?>
$xtemplate->template->assign(array(
"language" => $GLOBALS['locale'],
"head_title" => implode(' | ', $head_title),
"head" => drupal_get_html_head(),
"styles" => theme_get_styles(),
"onload_attributes" => theme_onload_attribute(),
"primary_links" => theme_get_setting('primary_links'),
"secondary_links" => theme_get_setting('secondary_links')
));
替换为下面的代码:
// allow for php in the primary links
ob_start();
eval_mixed(theme_get_setting('primary_links'));
$primary_link_eval = ob_get_clean();
$xtemplate->template->assign(array(
"language" => $GLOBALS['locale'],
"head_title" => implode(' | ', $head_title),
"head" => drupal_get_html_head(),
"styles" => theme_get_styles(),
"onload_attributes" => theme_onload_attribute(),
"primary_links" => $primary_link_eval,
"secondary_links" => theme_get_setting('secondary_links')
));
?></li>
现在,就可以在你的一级链接中添加php代码了。
在drupal4.7中,XTemplate已被移出了内核。现在,它成为了一个第3方模块了。
XTemplate作为第3方模块仅仅开发了一个4.7版本,当drupal升级到5.x的时候,就停止了维护,正式退出了历史舞台。
节点部分
xtemplate.xtmpl中的节点部分包含了页面的主内容,它的开始和结束标签如下:
<!-- BEGIN: node -->
<!-- END: node -->
{sticky}
如果节点被"stickied"(粘贴)到了列表的顶部(比如页面的teaser总是展示在首页的顶部),那么将css class(类)设为"node sticky"。如果节点没有被设为sticky的话,那么css class(类)设为"node "。
Picture 头像
头像就是代表节点作者的小图片,它将链接到作者的个人介绍页面上去。头像的开始和结束标签如下:
<!-- BEGIN: picture -->
<!-- END: picture -->
{picture}
比如可以输出以下内容:
<a href="user/1" title="View user profile.">
<img src="http://www.yoursite/files/pictures/picture-1.gif" alt="Username's picture" /></a>
Title(标题)
节点的标题,它的开始和结束标签如下:
<!-- BEGIN: title -->
<!-- END: title -->
在节点页面,标题的输出为:
<h1 class="title">Node Title</h1>
在drupal首页,每个节点标题的输出为:
<h2 class="title"><a href="node/31">Node Title</a></h2>
{link}
输出指向节点的链接,例如上面的"node/31"。
{title}
输出节点标题的文本,例如,上面的"Node Title"就是一个很好的例子。
{submitted}
节点的作者,发表时间等等,输出为:
Submitted by <a href="user/1" title="View user profile.">Username</a> on
Taxonomy(分类)
节点所属的分类的链接,可以包含多个分类,它的开始和结束标签如下:
<!-- BEGIN: taxonomy -->
<!-- END: taxonomy -->
{taxonomy}
输出一个节点所属的分类术语(term):
<a href="taxonomy/term/30">Taxonomy Term</a>
{content}
节点的主内容。
Links(链接)
节点的一些可选项比如:"printer-friendly version"(适合打印的版本), "add new comment"(添加新评论),以及用户对节点的访问记录。它的开始和结束标签如下:
<!-- BEGIN: links -->
<!-- END: links -->
{links}
输出如下(取决于用户的权限):
<a href="book/print/8" title="Show a printer-friendly version of this book page and its sub-pages.">printer-friendly version</a> | <a href="comment/reply/8#comment" title="Share your thoughts and opinions related to this posting.">add new comment</a> | <a href="admin/statistics/log/node/8">662 reads</a>
评论部分
xtemplate.xtmpl的评论部分包含了与节点相连的所有评论.它的开始和结束标签如下:
<!-- BEGIN: comment -->
<!-- END: comment -->
这部分仅为节点创建一个评论部分,当有多个评论时,将会自动重复调用这部分模板.
Avatar(头像)
头像包含了一个小图片,用来代表节点评论者,图片将链接到评论者的个人介绍页面. 它的开始和结束标签如下:
<!-- BEGIN: avatar -->
<!-- END: avatar -->
{avatar}
输出如下所示:
<div class="avatar">
<a href="user/1" title="View user profile.">
<img src="http://www.drupal.site/files/avatars/avatar-1.jpg" alt="username's avatar" />
</a>
</div>
Title(标题)
评论点标题. 它的开始和结束标签如下:
<!-- BEGIN: title -->
<!-- END: title -->
{link}
如果需要的话,可以在评论标题上加个指向评论的链接.在特定的一些drupal站点的评论视图中,会用到它.
{title}
评论标题的文本.
Submitted(提交信息)
{submitted}
用来展示评论者的名字,链接到他们的个人页面,以及评论发布的日期时间.下面是个输出样例:
Submitted by <a href="user/10" title="View user profile.">username</a> on Mon,
New(新)
用来指示评论是不是最新的. 它的开始和结束标签如下:
<!-- BEGIN: new -->
<!-- END: new -->
{new}
向一个评论中添加一个单词“新”
Content(内容)
展示评论的内容。
{content}
评论的文本。
Links(链接)
评论操作的控制链接,比如“回复”,“删除”,“编辑”。它的开始和结束标签如下:
<!-- BEGIN: links -->
<!-- END: links -->
{links}
展示控制链接。
区块
区块部分包含了左右栏,可用来展示各种各样的导航、特性选项等,比如论坛主题,博客,在线会员,以及RSS种子链接。通过配置,可以将区块放在页面的左栏或者右栏,或者两个都放。它的开始和结束标签为:
<!-- BEGIN: blocks -->
<!-- END: blocks -->
{blocks}
可以通过drupal的管理员界面(admin/system/block),来配置这里展示的内容。
Block(区块)
单个区块定义了每个区块的结构,注意这里没有's', block/blocks.
<!-- BEGIN: block -->
<!-- END: block -->
{module}
被展示区块所属的drupal模块的名字,这将添加到CSS class 和ID中去,可用于定制区块的外观
{delta}
区块在模块中的序列号,如果一个drupal模块生成多个区块的话,那么每个区块都有一个唯一的ID
{title}
区块的标题
{content}
区块的内容。
页脚部分
页脚部分出现在每个页面的最底部,通过drupal管理员界面(admin/settings)可以声明它的内容。它的开始和结束标签如下:
<!-- BEGIN: footer -->
<!-- END: footer -->
Message(消息)
这个区域用来装饰管理员发布的消息的,方法是通过在消息外面加点html标识字体。它的开始和结束标签如下:
<!-- BEGIN: message -->
<!-- END: message -->
{footer_message}
展示"Footer message"字段中定义的实际内容,可在drupal管理员界面(admin/settings)中设置这个字段。
{footer}
输出由Drupal模块生成的页脚消息(比如,devel.module的性能统计信息)
设置
为了使用Adobe GoLive来编辑xTemplate模板文件(xtemplate.xtmpl),你需要按照下面步骤先进行设置:
编辑
当打开一个模板文件时, GoLive将会询问你要使用哪种编码,此时选择"UTF-8".
如果你打开一个模板后,只能看到"body onload-attributes"的话,你需要进入源代码模式,并将"{onload_attributes}"从<body{onload_attributes}>中删除.
记住,当编辑完成以后,把"{onload-attributes}"重新加上来.
在xtemplate.xtmpl中,你可能希望临时的添加下面一行:
<link type="text/css" rel="stylesheet" href="style.css" />
记住,在完成编辑以后,一定要把这一行删掉.如果你忘了的话,那么drupal就不能为你的主题切换样式了。如果style.css存在的话,drupal会将其自动加载到{styles}标签中。