欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

[手册]Drupal 7 主题模板制作指南

Drupal是一个开源的内容管理系统(CMS) 平台,它是用PHP写成的。主要用于构造提供多种功能和服务的动态网站,这些功能包括用户管理(UserAdministration)、发布工作流 (Publishing Workflow)、讨论、新闻聚合(NewsAggregation)、元数据(Metadata)操作和用于内容共享的XML发布。Drupal有一个优秀的模块化结构,提供了许多模块,包括短消息、个性化书签、网站管理、Blog、日记、电子商务、电子出版、留言簿、Job、网上电影院、论坛、投票 等模块。并且Drupal模块的下载、安装、定制非常方便。

让drupal支持RTL语言

添加对RTL(右到左)语言的支持,涉及到覆写横向的样式,可以通过级联和基于相对的样式表进行命名来实现.对RTL样式表的包含是自动完成的.基于站点语言的设置来决定是否包含RTL样式表.

例如,在核心主题Garland中, "style.css"是主样式表.而对于从右到左的语言,比如阿拉伯语或希伯来语,它将会包含"style-rtl.css".对两个样式表的加载次序是,首先加载主样式,然后加载RTL样式.这允许后者对前者的覆盖,从而在主样式中,不用担心RTL样式表中所需要考虑的特殊性.

这里有一个编码标准,用来管理规则.依赖于横向定位或者纬度的规则,应该带有注释 /*LTR */以指示该属性是特定于从左到右布局的.这包括floats, margins, padding,等等.内置文本应该自动浮动,而主题则通过"page.tpl.php"模板设置文档的语言.

例如 基样式:

[syntaxHighLighter brush="css"]

ul.primary-links {
    margin-top: 1em;
    padding: 0 1em 0 0; /* LTR */
    float: left; /* LTR */
    position: relative;
 }

[/syntaxHighLighter]
相应的RTL样式:
[syntaxHighLighter brush="css"]

ul.primary-links {
    padding: 0 0 0 1em;
    float: right;
 }

[/syntaxHighLighter]
由于和主CSS文件一起使用,这使得可以非常容易的指出在RTL样式中,哪些地方需要修改.
注意,如果你的主体覆写一个模块的样式,那么与之关联的RTL样式将被忽略,除非你明确的对其进行声明.

原文:http://drupal.org/node/222782

译者:葛红儒, Think in Drupal

drupal中的JavaScript & jQuery

jQuery基本

Drupal 6.0到6.2包含的是jQuery 1.2.3。在Drupal 6.3中,已升级到jQuery 1.2.6,到目前为止,这是最新版本了。如果你的站点需要最新的jQuery版本的话,那么你可以使用jQuery升级模块

默认JavaScript文件

与style.css类似,现在也存在一个能被自动加载到主题中的JavaScript文件,即为script.js。这个文件应该放在主题的根目录下面。

JavaScript主题化

对于JavaScript代码,现在有一个主题化机制。与自动加载的script.js一起,它使得主题开发者对于Drupal站点上的脚本事件拥有更多的控制权。通常,人们的JavaScript代码生成标记文本(markup),并将其插入到页面中。然而,在脚本中,可能包含一些应编码进去的HTML,而这些硬编码是不允许被修改的。

模块在Drupal.theme.prototype的命名空间下提供了默认的主题函数。例如,如果我想创建自己的主题函数 powered(为了展示"powered by Drupal"图标),它应该看起来是这样的

[syntaxHighLighter brush="php"]

Drupal.theme.prototype.powered = function(color, height, width) {
    return '<img src="/misc/powered-'+ color +'-'+ height +'x'+ width +'.png" />";
}

[/syntaxHighLighter]
我调用它的方式是
[syntaxHighLighter brush="php"]

$('.footer').append(Drupal.theme('powered', 'black', 135, 42));

[/syntaxHighLighter]
这将在页脚添加一个按钮。

powered-black-135x42

如果我想在我的主题中覆写这个函数,可以使用我主题目录下面的文件来代替/misc,我可以这样:

[syntaxHighLighter brush="php"]

Drupal.theme.prototype.powered = function(color, height, width) {
    return '<img src="/sites/all/themes/powered_images/powered-'+ color +'-'+ height +'x'+ width +'.png" />";
 }

[/syntaxHighLighter]
这个利用了普通JavaScript的优点。前面的函数放在主题里面的一个JavaScript文件中,从而避免修改相关模块的JavaScript文件。

JavaScript主题函数的返回类型可以多种多样。既可以是简单的字符串,也可以是复杂的数据类型,比如对象,数组,和jQuery元素。参考原始的函数,看它返回什么,在你的定制主题函数中就应该返回什么。

仍然需要的:jQuery介绍,如何添加聚合(http://drupal.org/node/119441的补丁)等等。

原文: http://drupal.org/node/171213,

译者: 葛红儒, Think in Drupal,

drupal区块,内容和它们的区域

主题中可用的区块区域是在.info文件中定义的。定义方式为键'regions'+[],[]之间为内部名称,再加“=”,最后跟上外部名称,例如regions[theRegion] = The region label。如果没有定义的话,将会使用下面的默认值。

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

记住,内部名称将自动转化为"page.tpl.php"模板中的区域变量。在前面的例子中,[left]区域将通过$left变量输出所有指定给该区域的区块。PHP变量的命名存在一些限制,所以区域的内部名称也要遵守相同的约束。它只能包含字母数字字符,以及下划线,注意数字不能放 在开始位置。

方括号外面的外部名称,是用在区块管理面的,用来标记区域名,"Administer > Site building > Blocks"。

下面是Garland的区块管理页面 :

block_config_garland

一些注意点:

  • 每个单独区块的显示都可以使用模板文件
  • 添加一个定制区域,就会阻止使用默认的.如果你想继续保留这些默认的区域,你需要手工的将其添加进去.
  • 区域的定义顺序将反映到区块配置页面. 例如Garland使用的为默认区域.注意图中区域的顺序.
  • .info文件中的内容被缓存了。所以对它的修改都不会显示出来。(不要将它与主题注册表混淆了。)为了清空缓存,你可以这样:
    1. 点击位于"Administer > Site configuration > Performance"的清空(Clear)按钮
    2. 如果启用了devel区块的话(devel模块生成的),点击链接"Empty cache"。
    3. 简单的访问主题选择页面"Administer > Site building > Themes"

升级提示:

原文:http://drupal.org/node/171224

译者:葛红儒, Think in Drupal

  • 在Drupal 5以及更低版本中,是使用ThemeName_regions() 或EngineName_regions()声明区域的.而在Drupal6中,这两个方法已不再被推荐使用.
  • 如果你要将你的主题从以前的版本升级到Drupal6,其中用到$sidebar_left 和$sidebar_right的话,需要将其改名为$left and $right.
  • 在以前的版本中, $footer_message区域变量是将页脚区域(footer region)和页脚消息(footer message)混到了一起.(在"Administer > Site configuration > Site information"中设置).而在Drupal6中,这两个变量是分开的,所以你需要单独创建一个$footer变量.

手工的将内容指派给特定drupal区域

使用drupal_set_content可以将内容手工的添加到区域中.例如, drupal_set_content('header', 'Welcome!')将文本'Welcome!'添加到页首区域.下面是一个更有用的例子,构建所有评论的总结并将其放到"right"区域.

将前缀"drop"改为你主题的名字.更多信息参看预处理器

 

[syntaxHighLighter brush="php"]

function drop_preprocess_comment(&$variables) {

    // Setup a few variables.
    $comment = $variables['comment'];
    $title = l(
        $comment->subject,
        comment_node_url(),
        array('fragment' => "comment-$comment->cid")
    );
    $new_marker = $comment->new ? t('new') : '';
    $by_line = t('by') .' '. theme('username', $comment);

    // Form the markup.
    $summary = '<div>';
    $summary .= "<span class=\"title\">$title $new_marker</span>";
    $summary .= "<span class=\"credit\">$by_line</span>";
    $summary .= '</div>';

    // Set the comment into the right region.
    drupal_set_content('right', $summary);
}

[/syntaxHighLighter]
注意通过这个函数设置内容,发生在区块区域回显以前,它是这样调用的template_preprocess_page > theme_blocks > drupal_get_content.

原文:http://drupal.org/node/171224

译者:葛红儒, Think in Drupal

如果喜欢本文,请分享给朋友们