drupal XTemplate主题引擎

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中继续使用。

 

Drupal版本:

创建一个新的XTemplate

为了创建一个新的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模板,但是将采用子目录里面的样式。

 

相关链接: http://drupal.org/node/6495 , Think in Drupal

Drupal版本:

模板基础

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 -->

 相关链接: http://drupal.org/node/6598 ,Think in Drupal

Drupal版本:

头部

头部

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}

消息的文本。

 

 相关链接: http://drupal.org/node/6627 , Think in Drupal

Drupal版本:

如何允许在XTemplate的一级链接中使用PHP代码

注意:这个可用于Drupal 4.6.5;它应该也适用于Drupal4.6.6

XTemplate的一个不足是,当它展示一级链接时,不能够处理里面的PHP.不过,我从php.net的用户评论中,找到两个函数,可以帮助XTemplate引擎解决这个问题:

 

  1. 首先需要将下面的代码拷贝到xtemplate.engine文件(位于/themes/engines/xtemplate)的最底部;恰好位于PHP结束标签的前面:

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);
}
?>

 

  1. XTemplate使用theme_get_setting()来获取一级链接的html,并将其放到页面中.我们可以先把这个html放到一个变量中,提前做些处理工作。为了实现这一点,你需要修改下面的代码(丛28行开始,根据你的drupal版本的不同,可能会有所出入):

  $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代码了。

 

 相关链接: http://drupal.org/node/54861 ,Think in Drupal

 

 

Drupal版本:

现在成了一个drupal第3方模块了

在drupal4.7中,XTemplate已被移出了内核。现在,它成为了一个第3方模块了。

 

XTemplate作为第3方模块仅仅开发了一个4.7版本,当drupal升级到5.x的时候,就停止了维护,正式退出了历史舞台。

 

相关链接:http://drupal.org/node/75054 , Think in Drupal

Drupal版本:

节点部分

节点部分

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 16 February, 2004 - 23:46.

 

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>

 

相关链接: http://drupal.org/node/6754 , Think in Drupal

Drupal版本:

评论

评论部分

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, 04/19/2008 - 11:56.

 

New(新)

用来指示评论是不是最新的. 它的开始和结束标签如下:

<!-- BEGIN: new -->
<!-- END: new -->

 

{new}

向一个评论中添加一个单词“新”

 

Content(内容)

展示评论的内容。

 

{content}

评论的文本。

 

Links(链接)

评论操作的控制链接,比如“回复”,“删除”,“编辑”。它的开始和结束标签如下:

<!-- BEGIN: links -->
<!-- END: links -->

 

{links}

展示控制链接。

 

相关链接: http://drupal.org/node/7233 ,Think in Drupal

Drupal版本:

区块

区块

区块部分包含了左右栏,可用来展示各种各样的导航、特性选项等,比如论坛主题,博客,在线会员,以及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}

区块的内容。

 

 相关链接: http://drupal.org/node/7842 , Think in Drupal

Drupal版本:

页脚

页脚部分

页脚部分出现在每个页面的最底部,通过drupal管理员界面(admin/settings)可以声明它的内容。它的开始和结束标签如下:

<!-- BEGIN: footer -->
<!-- END: footer -->

 

Message(消息)

这个区域用来装饰管理员发布的消息的,方法是通过在消息外面加点html标识字体。它的开始和结束标签如下:

<!-- BEGIN: message -->
<!-- END: message -->

 

 

 

 

{footer_message}

展示"Footer message"字段中定义的实际内容,可在drupal管理员界面(admin/settings)中设置这个字段。

 

{footer}

输出由Drupal模块生成的页脚消息(比如,devel.module的性能统计信息)

相关链接: http://drupal.org/node/8042 , Think in Drupal

Drupal版本:

使用Golive编辑drupal模板文件

设置

为了使用Adobe GoLive来编辑xTemplate模板文件(xtemplate.xtmpl),你需要按照下面步骤先进行设置:

  1.       1,在GoLive菜单中,选择"GoLive",接着选择"Web Settings"
  2.       2,你将会看到web设置窗口,电机"File Mappings"(文件影射)标签
  3.       3,在文件影射窗口打开"text/"目录
  4.       4,在Suffix(后缀名)栏中,往下拉,直到你看到"html".
  5.       5,点击"html"以选中它,然后点击"+"按钮来创建一个拷贝.
  6.       6,现在设置完成了!

 

编辑

当打开一个模板文件时, 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}标签中。

 

相关链接: Think in Drupal

Drupal版本: