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

drupal维护(maintenance)页的主题化

当drupal站点处于离线模式下时,就会使用维护页.你可以在"Administer > Site configuration > Site maintenance"页面启用这一模式.这一模式也将关闭数据库连接.在默认情况下,不管你是否选用了其它主题,对于这个页面都会使用drupal核心主题Minnelli.为了让维护页使用你的drupal主题,你需要在"settings.php"文件中对其进行设置,你可以在"sites/default" 或者"sites/your.domain.com"目录下找到"settings.php"文件.

在该文件中,通过设置$conf变量,让其使用你drupal主题的内部名称,从而为维护页启用新的drupal主题:

[syntaxHighLighter brush="php"]

<?php
 $conf['maintenance_theme'] = 'themeName';
 ?>

[/syntaxHighLighter]
接着,拷贝你的"page.tpl.php"并将其改名为"maintenance-page.tpl.php",或者拷贝"modules/system/maintenance-page.tpl.php"模板到你的主题目录下面,对maintenance-page.tpl.php文件进行编辑,使其与你站点的其它部分相匹配.然后,将站点设为离线模式,退出登录,来验证所作的修改.考虑到数据库连接失败,你可以尝试关闭你的数据库.对于所有用到数据库的函数,都将会首先使用db_is_active对其进行检查.在模板中也可以使用变量$db_is_active.

为了阻止出现数据库连接的警告信息,你可以再加一个模板文件"maintenance-page-offline.tpl.php",使用你的自定义消息来修改$content变量.该模板文件是基于maintenance-page.tpl.php的一个模板建议,所以你需要将它们放到一块.

在这种模式下,将会包含一个"maintenance.css"文件.它位于"modules/system/maintenance.css".你可以按照样式表一节中的讲解,来覆写这个文件.

注意:

你的drupal站点的初始安装和升级,都依赖于核心主题Minnelli 和Garland.不能因为这些模式对这两个主题进行修改.
在离线模式下,主题注册表没有被缓存起来.

原文：http://drupal.org/node/195435

译者：葛红儒， Think in Drupal

解决drupal主题中的问题

在你构建网站的所有努力中，对于你的用户来说，最重要的就是站点的外观了。为了使你的drupal主题对于每个浏览器，每个模块，用户所选的主题都兼容的话，你需要花费很大的功夫。

首先你需要熟悉基本的CSS概念（Cascading Style Sheets）。关于Css的资源可参看CSS Discuss 或者HTML dog 。在CSS Zen Garden有一篇非常好的概述文章，介绍了Css的强大。

一定要通过XHTML 1.0 Strict验证。

现在有很多品牌的浏览器，而每个品牌的浏览器又有多个版本，而每种浏览器都有特定厂商维护的，所以你很难掌握一个浏览器在特殊的情况下会干些什么。这就带来了不兼容问题。如果你把注意力放到了这些不兼容性上，就会把问题复杂化，也使得你很难获得他人的帮助。只有当你使用通过验证的XHTML和CSS，并且它在符合标准的浏览器上能够正常工作的情况下，你才可以开始调试。人们经常听到设计者抱怨“但是但是但是，如果我让它通过合法性验证以后，那么外观就会再次变得丑陋起来，我不想再干第2遍这样枯燥无味的工作了”。在这种情况下，设计者得到的漂亮的外观，是建立在错误（bug）之上的！而在错误之上再进行调试，是理应被禁止的。

而事实上：一个经过验证、干净的布局在90%的情况下都能正常工作。在剩下的10%中，9%的问题很容易就得到了修复，而只有1%的情况需要更多的努力。真的！

如果你想验证你的整个站点，你可以使用这些工具。

你的页面不可能在所有的地方看起来都一样

另一个需要重点注意的地方是，HTML和CSS的本质。它们意味着在不同的地方有着不同的外观。比如，我的移动手机不能为你显示基于javascript的6栏布局。而且它也不应该能够。Safari 和Konqueror决定不支持表单中的特定样式（出于安全性和桌面兼容性考虑）。大的屏幕将对你的字体重新调整大小，这将破坏你的固定布局。而旧式的显示器则使用的是更大一些的字体大小集。而网络较慢的用户常常看不到图片。或者甚至是CSS。

所以你要记住，你的样式对于浏览器来说仅仅是一个建议，建议它以特定方式显示。而它不是一个命令。

管理drupal主题不兼容性的工具

原文：http://drupal.org/node/37156

译者：葛红儒， Think in Drupal,

我们推荐你使用一个遵从标准的浏览器作为起点，比如Firefox。Firefox允许你对你网页的某些部分进行高亮显示，右击“查看所选区域的源文件”，可以帮你理解你主题使用的CSS类。理解CSS类是如何作用于底层的xhtml的，是理解你主题的关键所在。
使用标准的CSS命名规范。我们推荐为你的CSS类采用这些命名规范。
为你的主题选择一个合法的DOCTYPE类型，并且包含一个DocType Declaration(DTD)。
为了帮助分析你的HTML 和CSS，我们推荐你为Firefox安装Firebug插件。这个工具非常有用，它允许你查看你的HTML和CSS，并实时的对其进行修改，从而评估修改所带来的效果。另一个非常有用的Firefox插件是Web Developer toolbar。它包含了许多方便的功能。
FireFox扩展插件查看格式化源文件，为你展示格式化的，代码着色过的源文件，并为每个元素提供可选的CSS信息。
首先你需要确保你的HTML或者xHTML通过合法性验证，然后才能开始修改你的CSS来修正你的bugs。Firefox 的Web Developer toolbar（web开发者工具栏）内置了一个web验证器。Opera也内置了合法性验证，只需要按下Ctrl+Alt+V就可以了。
一个更高级的工具是Watchfire WebXACT tool，可用于检查代码，分析HTML页面，定位错误。
如果你发现了一个模块输出了非法的XHTML，你需要为该模块提交一个问题（issue），里面附上截图，以说明问题所在。
你可以使用Lynx viewer来查看搜索引擎是如何看待你的站点的。
在IE下面，你站点网页中定位问题，可以参考下面的文章进行解决：Position Everything Internet Explorer Primer（IE中对所有东西的定位，初级读本）。
在Quirks mode（奇特模式）中，你可以找到许多问题的解答。

解决drupal主题中的问题(1)

跨浏览器兼容性(FireFox, Internet Explorer, Opera, Safari)

很难在所有的浏览器下检查你的主题。这里有一些工具，能够帮助你在多个浏览器下检查你的主题。

Browser Shots是免费的，但是获取截图需要花费一些功夫。
BrowserCam是收费的，有24小时的试用期。

在Windows上，你可以使用Internet Explorer，还可以下载Firefox 或者Opera。在Linux上，你可以使用Konqueror，一个基于KHTML的浏览器，而Safari用在MacOS上，Opera, Firefox可在Linux上使用，而IE也可运行在WINE。在Mac OSX上，你可以使用Safari，下载Firefox 或者Opera。

颜色和图形问题

如果你想尝试选择颜色的话，你可以使用颜色方案（Color schemes）。
如果在你的日志中生成了未能找到favicon的错误，你可以使用这两个工具来创建一个favicon，favicon from pics 和 favicon generator（生成器）
要检查对色盲用户的影响，参看Vischeck

选择一个基主题

如果你要选择一个主题作为起点的话，对于基于CSS的主题来说，Zen 或 Foundation是不错的选择。如果你想使用表格来管理布局的话，可以使用BlueMarine。

特定于模块的CSS

一些Drupal模块自带了一个默认的CSS文件。你应该使用一个工具，比如开发者的工具栏，来检查模块的CSS是否对你的元素起作用，以及所引起的问题。当你安装一个新的模块时，你可以到模块所在的文件夹中看一看，它是不是包含了一个CSS文件。

你主题中的实际调试问题

对主题的调试没有简单的方案可行。如果你遇到了问题，那么你最好选用简单的基主题，或者尽可能的选择一个接近你最终目标的能够工作的主题。学习你主题中的CSS类，对于理解在哪里修改CSS至关重要。通过IRC可以找到其他的主题开发者，你可以把你做过的写成文当，简明教程。把你的主题提交到Drupal.org，这样他人可以对你的工作进行检查并提出反馈意见。和PHP程序员交朋友，他们能够帮你理解底层的PHP主题模块是如何工作的，这对你的工作也很有帮助。考虑相互帮助，以提高自己的技能。

本页的作者为来自于CivicSpace Labs和Theodore Serbinski的Kieran Lal, 和Trae McCombs。如果你想贡献自己的力量，或者让Drupal的主题制作更简单的话，可以加入主题邮件列表，或者直接联系Kieran。

基本的drupal主题帮助

drupal主题目标

对你站点drupal主题的改进,可以帮助你完成许多目标.特别是,对drupal主题的改进可以帮你完成以下业务目标:

为你的站点带来流量
帮你增加销售量
为站点用户提供更多的信息
帮助站点用户相互协作.

本文的目的是,帮助你实现下列的主题开发目标:

小的设计修改不会带来浏览器兼容性问题
在你的drupal主题上实现设计者的wireframes.
选择一个基主题以进行定制
基于一个已存在的主题构建一个新的主题

改进Drupal中的主题帮助

在最近的一个Drupal管理员用户体验的调查显示,制作主题是最难的一个Drupal管理任务.我们做了一系列的采访,更好的了解到了主题制作者在开发主题时,需要完成的目标和任务.

基本Drupal主题任务

无论你使用的是什么样的主题,下面的这些基本的主题任务,都是你必须掌握的.

Find and open a Cascading Style Sheet(CSS) file for your theme
为你的主题查找和打开一个CSS文件
Copy and paste CSS code
复制和粘贴CSS代码
Learn the CSS attributes in your theme
在你的主题中学习CSS属性

我们推荐你使用Firefox,再装上两个扩展插件,开发者工具栏和查看格式化源文件.我们还建议你使用标准的CSS ID名,与Andy Clarke 和 Eric Meyer建议的一样.

修改颜色
使用另一主题的一部分.例如,将CivicSpace管理主题拷贝到你的站点主题里面.
如何修改一个已有主题的布局.比如,修改列数,页首和页脚的位置,主体的可变性与静止性.

困难的主drupal题任务

我们给出了一些需要详细解释的困难的主题任务.一些任务既是基本的任务也是困难的任务,我们需要为其花费更多的墨水,以解释这些任务的难点.

CSS布局开发
找出一个好的基主题作为起点

我们在项目模块(project module)添加了分类功能,这样就允许了对主题所进行的分类.

修改已有drupal主题
学习CSS类和IDs

我们推荐你使用Firefox,再装上两个扩展插件,开发者工具栏和查看格式化源文件.我们还建议你使用Eric Meyer的标准CSS类名.

如何为一个类添加内边距(padding)或者外边距(margins)
从一个drupal主题中删除文本和图片.比如,删除“submitted by”，这可能是也可能不是主题问题。
如何修改表单的默认输出，通常情况下都是非常困难的
当模块生成的XHTML与drupal主题相冲突时，如何进行调整

应该向该模块提交一个问题。里面要包含一个展示冲突页面的图片，以及它在一个基本主题下是如何显示的。从模块中摘出相应的XHTML代码片断，并指出期望的XHTML应该是什么样的。

使用PHP变量
禁止对容器使用固定的宽度
对于一些复杂的或者灵活的设计，比如fullheight，需要大量的工作来实现max-width 和min-width。
当插入一个设计者想要的图形效果时，要保证在IE下面也能正常工作。
IE和Firefox的兼容性问题
从头编写一个drupal主题

原文：http://drupal.org/node/39451

译者：葛红儒， Think in Drupal,

drupal主题编码习惯

主题作者应该仔细的编写干净、结构良好的代码，这和其它项目上的程序员一样。这样做，可以使代码更容易阅读、理解和维护。虽然不同的组织有着不同的习惯，但是最好大家都遵从Drupal标准，这样有利于协作工作或者需求帮助。

缩进采用2个空格；而不是一个tab键
HTML标签的开始和结束部分的缩进一定要匹配。
PHP 和HTML的缩进要区分开来

不是这样：
[syntaxHighLighter brush="php"]

...
<?php if ($header): ?>
<div id="header">
<?php print $header; ?>
</div>
<?php endif; ?>
...

[/syntaxHighLighter]

应该这样：
[syntaxHighLighter brush="php"]

...
<?php if ($header): ?>
    <div id="header">
        <?php print $header; ?>
    </div>
<?php endif; ?>
...

[/syntaxHighLighter]
这样，良好的缩进，使得一眼就能够找到匹配的开始和结束标签了。

最好在HTML中使用PHP，而不是在PHP中使用HTML。例如，

不应这样：
[syntaxHighLighter brush="php"]

<?php
if (!$page) {
    print "<h2><a href=\"$node_url\" title=\"$title\">$title</a></h2>";
}

if ($submitted) {
    print "<span class=\"submitted\">$submitted</span>";
}
?>

[/syntaxHighLighter]
应该这样：
[syntaxHighLighter brush="php"]

<?php if (!$page): ?>
    <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>

<?php if ($submitted): ?>
    <span><?php print $submitted ?></span>
<?php endif; ?>

[/syntaxHighLighter]
毕竟，PHP是一个嵌入到HTML中的脚本语言-----而不是其它方式(HTML嵌入到PHP中)。

原文：http://drupal.org/node/1965

译者：葛红儒， Think in Drupal,

欢迎莅临阿Q的项目

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

drupal维护(maintenance)页的主题化

解决drupal主题中的问题

解决drupal主题中的问题(1)

基本的drupal主题帮助

drupal主题编码习惯

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

WordPress之新增用户角色，赋予权限和修改默认用户角色的名称

WordPress使用阿里云OSS作为媒体库保存图片

WordPress可以用手机号注册吗？

[WordPress]settings_errors详解

[WordPress]嘿，帮忙处理错误信息(class WP_Error)！

[WordPress]文章形式(Post Formats)

[WordPress]用戶角色(Role)及其功能权限(Capability)

[手冊]WordPress插件API：Hooks(钩子程序)

欢迎莅临阿Q的项目

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