升级你的drupal主题

Drupal版本:

将drupal 6.x主题升级到drupal 7.x上

Drupal7.x主题变动概述

  1. 区块的CSS ID更加人性化,语义更丰富
  2. 一级和二级链接现在成了主菜单和次级菜单
  3.  

区块的CSS ID更加人性化,语义更丰富

Drupal内核中定义的CSS ID,许多都已经被修改了,这使得它们的语义更加明确:

Block(区块)

旧 CSS ID (Drupal 6)

新 CSS ID (Drupal 7)

Recent blog posts(最新博客)

block-blog-0

block-blog-recent

Book navigation(书籍导航)

block-book-0

block-book-navigation

Recent comments(最新评论)

block-comment-0

block-comment-recent

Active forum topics(热门帖子)

block-forum-0

block-forum-active

New forum topics(最新论坛帖子)

block-forum-1

block-forum-new

Language switcher(语言切换器)

block-locale-0

block-locale-language-switcher

Syndicate

block-node-0

block-node-syndicate

Most recent poll(最新投票)

block-poll-0

block-poll-recent

Author information(作者信息)

block-profile-0

block-profile-author-information

Search form(搜索表单)

block-search-0

block-search-form

Popular content(热门文章)

block-statistics-0

block-statistics-popular

Powered by Drupal(Drupal支持)

block-system-0

block-system-powered-by

User login(用户登录)

block-user-0

block-user-login

Navigation(导航)

block-user-1

block-user-navigation

Who's new(新进会员)

block-user-2

block-user-new

Who's online(在线会员)

block-user-3

block-user-online

 

例如,一个Drupal 6 的CSS样式如下:

/* Make the text in the user login block bigger. */
#block-user-0 {
  font-size: 1.5em;
}

should become (in Drupal 7):

那么在Drupal 7中,应该变为:

/* Make the text in the user login block bigger. */
#block-user-login {
  font-size: 1.5em;
}

 

一级和二级链接现在成了主菜单和次级菜单

一级和二级链接现在改名为了主菜单和次级菜单。对于使用到一级和二级链接的主题,在新的版本中,应该采用新的变量名:

 

Drupal 6.x

  <div id="menu">
    <?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' => 'links', 'id' => 'subnavlist')); ?><?php } ?>
    <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>
  </div>

Drupal 7.x

  <div id="menu">
    <?php if (isset($secondary_menu)) { ?><?php print theme('links', $secondary_menu, array('class' => 'links', 'id' => 'subnavlist')); ?><?php } ?>
    <?php if (isset($main_menu)) { ?><?php print theme('links', $main_menu, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>
  </div>

 

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

Drupal版本:

将drupal 5.x主题升级到drupal6.x

对于Drupal6,有一个新的主题开发指南可用。

对于模块开发者,可参看该页:模块开发指南里面的使用主题层

Drupal 6.x主题变动概述

  1. 1,drupal主题现在也有了.info文件
  2. 2,drupal主题注册表
  3. 3,通过模板文件主题化
  4. 4,drupal模板管理
  5. 5,新的模板文件(.tpl.php)
  6. 6,新的模板命名建议
  7. 7,定义区块区域
  8. 8,区块区域变量名的改变
  9. 9,自定义主题设置
  10. 10,新的$signature变量
  11. 11,$body_classes变量
  12. 12,$language现在是一个对象了
  13. 13,drupal主题可以覆写内核或者模块定义的CSS文件
  14. 14,对RTL CSS的支持
  15.  15,“Submitted by user on date/time”这个也可以主题化了
  16. 16,jQuery升级到了1.2.3
  17. 17,默认的JavaScript文件
  18. 18,JavaScript主题化

 

 

drupal主题现在也有了.info文件

在Drupal5.x中,模块中包含了.info文件,用来存储该模块的原数据(比如,名称,描述,版本,依赖性,等等)。从Drupal6.x开始,主题也包含了.info file。更多信息可参看为主题编写.info文件一文

 

例如themeName.info(只列出部分信息):

name = Theme Name
description = One sentence description of theme.
core = 6.x
engine = phptemplate

 

drupal主题注册表

现在所有的函数都需要注册。在Drupal 5中,是不需要注册的。在Drupal 6.x中,新引入了hook_theme()函数,用来注册所有的可主题化的输出。PHPTemplate引擎负责注册,所以大多数时候,你都不需要手工注册。

  • 有个例外。那些没有默认主题实现的表单,将不会被注册。
  • 关于表单主题化的更多细节,可参看主题化手册中的例子
  • 非常重要的一点!每当你向你主题中添加一个新的主题函数或者模板时,必须清空注册表缓存!

 

 

通过模板文件主题化

在Drupal 5.x中,可以使用themeEngine_hook() 或者themeName_hook()来覆写默认的主题函数。你可以直接在template.php文件使用标识文本(markup),并将结果数据返回。

 

你还有另一种选择,就是使用_phptemplate_callback(),这样就允许主题函数使用单独的模板文件了(.tpl.php)。启用回调函数以后还允许钩子使用下面的方式操纵变量。

下面的代码在6.x中已不再被支持了:

<?php
function _phptemplate_variables($hook, $variables) {
  switch ($hook) {
    case 'page':
      // process variables for page hook.
    break;
    case 'node':
     // process variables for node hook.
    break;
  }
  return $variables;
}
?>

在Drupal 6.x中,已不再支持_phptemplate_callback()了。它已经被整合到theme()函数中了。一旦函数注册为了一个模板,那么就会使用该模板文件。_phptemplate_variables()也不再被支持了。为了在Drupal 6.x中添加额外的变量,可参看预处理文档

如果以普通函数来注册的话,这种方式就和drupal5.x中使用"themeEngine_hook()" 或者"themeName_hook()"来覆写一样了。

 

PHPTemplate自动的将钩子注册为一个普通函数或者一个模板。为了将函数注册为一个模板,你需要根据钩子名,创建一个".tpl.php"文件。例如,假如钩子为menu_tree,那么你drupal主题中的模板文件名就应该为menu-tree.tpl.php.注意,下划线改为了连字符。清空注册表,现在就可以了。

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

Drupal版本:

将drupal 5.x主题升级到6.x(1)

模板管理

现在,可以将模板文件放到主题下面的子目录中,这样管理起来就更方便了。PHPTemplate引擎将查找主题目录下的所有文件,并将它们的位置登记器来。对于文件夹的嵌套深度则没有限制。

 

新的模板文件(.tpl.php)

在drupal5.x中,phptemplate.engine实现了下面的模板(在drupal题引擎文件夹下):

  • page.tpl.php
  • node.tpl.php
  • comment.tpl.php
  • block.tpl.php
  • box.tpl.php

在Drupal6.x中,模板的应用更加广泛,现在默认模板文件更多了,而将来这个数量还会增加。Drupal5.x的PHPTemplate中的模板也被移走了。对于这些模板的用法,以及可用变量,你可以参看模板文件中的注释,里面有详细的说明。

 

为了覆写这些模板,你所要做的就是将它们拷贝到你的主题文件夹下,并清空主题注册表。

 

参看主题化手册中的新模板的完整列表

 

一些很少使用的默认内核函数,由于模板能够起到同样的功能,所以这些函数被取消了。例如,theme_page就不存在了。这影响到了所有转化为模板的可主题化的输出。由于这种改变,是用另一种方式实现同样的功能,所有原有的实现(默认函数)就没有必要继续保留下来了。这一改变对用户没有任何影响。比如,现在你仍然可以使用theme('page'),虽然theme_page被取消了。这里所改变的仅仅是默认的实现。

 

新的模板命名建议

模板建议,对于page.tpl.php,是基于路径的;node.tpl.php是基于节点类型的;block.tpl.php是基于区域和模块的。对于前面提到的模板,同样也提供了相应的建议。

参看主题化手册中的新模板建议的完整列表

 

定义区块区域

hook_regions已不再被支持了。现在可通过.info文件来定义区域。更多细节可参看手册页面

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

 

区块区域变量名的修改

边栏和页脚区块区域的变量名改变了。

在Drupal5.x中,page.tpl.php内部的"left", "right" 和"footer"区域所使用的变量为$sidebar_left, $sidebar_right 和 $footer_message。这种用法源于Drupal4.6及更早版本。

 

为了更加清晰直接,现在这三个区域的变量名分别为$left, $right 和$footer,这和其它区域保持了一致。$footer_message仍然可以使用,但它仅仅用于站点信息管理界面的的脚本信息。

 

自定义主题设置

主题作者制作的主题,现在更方便被站点管理员定制了。

在Drupal的管理界面,每个主题在admin/build/themes/settings/themeName下面都有自己的配置页面。这个页面中包含了一个表单,里面有标准的“Logo image settings” 和“Shortcut icon settings”等等。为了向这个表单添加其它的设置,在主题目录下面简单的创建一个theme-settings.php文件,并向其中添加一个themeName_settings() 或者themeEngineName_settings()函数。这个函数应该使用表单API来创建表单组件。

更多信息可参看主题开发指南手册的定制主题设置一文

 

新的$signature变量

在Drupal6总,签名是动态的,这意味着当查看一个评论时才展示它们,而签名不再是评论本身的一部分了。因此,在comment.tpl.php中需要加一个$signature变量。

在Drupal5.x中:

<div class="content">
  <?php print $content; ?>
</div>

在Drupal6.x中:

<div class="content">
  <?php print $content ?>
  <?php if ($signature): ?>
    <div class="user-signature clear-block">
      <?php print $signature ?>
    </div>
  <?php endif; ?>
</div>

注意:为了避免为旧的帖子展示两次签名,你可以这样:

<div class="content">
  <?php print $content ?>
  <?php if ($signature && $comment->cid > 1234): // Change "1234" to the last comment ID used before upgrading to Drupal 6 ?>
    <div class="user-signature clear-block">
      <?php print $signature ?>
    </div>
  <?php endif; ?>
</div>

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

Drupal版本:

将drupal 5.x主题升级到6.x(2)

$body_classes变量

在page.tpl.php中,可通过下面的方式得到布局的状态:

在Drupal5.x中,<?php print $layout; ?>将根据当前所用的边栏输出左栏(left),右栏(right),或者全部(both)。

在Drupal6.x中,还可以使用$body_classes。<?php print $body_classes; ?>将会输出类似下面的东西:

front logged-in node-type-page no-sidebars

它提供了如上面所示的CSS类。更多信息可参看:
http://drupal.org/node/171906

 

$language现在是一个对象了

PHPTemplate主题中的$language变量现在已不再是一个简单的保存当前浏览页面语言代码的字符串了,现在它是一个对象,包含了当前语言的多个属性。现在你可以为你的主题实现从右到左的兼容,这样你的主题就可以应用到从右到左的语言中了(比如希伯来语,其中http://www.drupal.org.il/就是一个很好的例子)

 

$language具有属性$language->language,用于当前语言的代码,而$language->direction则是一个整数(0(LANGUAGE_LTR)表示从左向右,1(LANGUAGE_RTL)表示从右向左)。如果你所关心的仅仅是升级你的主题,只需要将$language改为$language->language就可以了。

 

主题可以覆写内核或者模块定义的CSS文件了

通过使用drupal_add_css(),来添加一个同名的样式表,主题就可以替换模块定义的CSS文件了。这允许主题在需要的时候,覆写整个CSS文件,而不是特定的CSS选择器。

 

例如,如果将下面的代码放到Garland的template.php文件中,那么themes/garland/system-menus.css将会取代modules/system/system-menus.css:

<?php
drupal_add_css(path_to_theme() .'/system-menus.css', 'theme');
?>

 

支持RTL CSS覆写文件

 

为了更好的支持从右到左的语言,对于每个使用drupal_add_css()添加到页面模板的CSS文件来说,都可以拥有一个与之对应的从右到左的CSS文件。例如,style.css,在同一个目录下面,还可以包含一个style-rtl.css文件。style-rtl.css包含的就是对style.css中样式的覆写,这里只包含从右到左样式的覆写。Drupal内核为内置的模块和主题都包含了这样的RTL CSS文件。按照习惯,在原始CSS文件中要被覆写的CSS规则后面需要加上一个/* LTR */注释,这样当维护者需要修改CSS文件时,他就会注意到RTL CSS也需要修改。只有当前语言为RTL时,才会加载这些CSS文件。

摘自modules/system/defaults.css文件的一段:

th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
}

 

摘自modules/system/defaults-rtl.css文件的一段:

th {
  text-align: right;
  padding-right: inherit;
  padding-left: 1em;
}

 

 “Submitted by user on date/time”可被主题化

节点和评论的"submitted"元素成为了一个可以主题化的元素。这意味着你可以覆写要包含的信息,以及它的外观。

你可以添加自定义的id/class,你可以包含或多或少的信息,甚至根据节点或者评论类型的不同使用不同的外观。

实例,可参看garland主题的template.php文件。

 

jQuery升级到1.2.3

Drupal包含的jQuery JavaScript库已被升级到1.2.3版

 

默认的JavaScript文件

与style.css类似,可以将script.js自动添加到主题的页面模板中。这个文件应放在主题的根目录下面。通过.info文件,可以修改这个文件名,以及添加更多的这类文件。

 

JavaScript主题化

现在在JavaScript代码中引入了一个主题化机制。和script.js的自动加载一起,这使得主题开发者在Drupal网页的脚本事件领域拥有了更大的灵活性。通常,JavaScript代码生成的HTML都是直接插入到页面中的。然而,这些HTML代码通常是硬编码到脚本中的,它不允许对插入的代码进行修改。

 

模块在Drupal.theme.prototype命名空间下提供了默认的主题函数。而主题应该直接将覆写函数放在Drupal.theme命名空间下。脚本将调用Drupal.theme('function_name', ...),由这个函数来决定决定究竟是采用主题提供的函数还是默认的函数。

 

JavaScript的主题函数,在返回类型上,是完全自由的。它可以是简单的字符串,也可以是复杂的数据类型,比如一个大对象,里面包含几个小的jQuery对象,而小对象里面又包含着DOM元素。自定义主题函数的返回类型,应该和默认主题函数保持一致。

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

Drupal版本:

将Drupal4.7.x主题升级到5.x

相关的Drupal 5.0 API 变化
下面列出的是Drupal 5.0中与主题有关的API接口变化,如果你的主题中用到了下面的函数,都要进行相应的更新才能在5.0下正常工作:

$primary_links 与 $secondary_links 变量现在返回了结构化的链接
新增 drupal_add_css() 函数,用来添加CSS文件
新的 $feed_icon, 显示聚合图标
新的clearing类
theme_links() 改为返回链接列表
新增 drupal_add_js() 函数,用来添加javascript脚本
_phptemplate_callback 函数签名改变了
id='pager' 现在为 class='pager'
theme_form_element 的参数修改了。
详情请参看:http://drupalchina.org/node/1679

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

Drupal版本: