Kzeng的Drupal主题制作手册

  • warning: realpath() [function.realpath]: open_basedir restriction in effect. File(/tmp) is not within the allowed path(s): (/home1/vhost/vh440606:/home1/vhost/vh440606/temp:/tmp/expl:/tmp/check) in /home1/vhost/vh440606/www/includes/file.inc on line 190.
  • warning: realpath() [function.realpath]: open_basedir restriction in effect. File(/tmp) is not within the allowed path(s): (/home1/vhost/vh440606:/home1/vhost/vh440606/temp:/tmp/expl:/tmp/check) in /home1/vhost/vh440606/www/includes/file.inc on line 190.

Drupal的主题制作手册

版权属于kzeng，原文地址为：http://www.kzeng.info/drupal_theme_design ，请大家经常访问检查手册
的更新。alaya129制作（这只是一个草稿，根据读者的反馈，我会对其进行更新，因为一次写不完，最
好 bookmark 这篇blog，我会不断地更新的。另外，由于越写越长，难免会有错误，欢迎批评指出 by kzeng)


1 必要准备

¡关于CSS的一些知识，这样我们可以避免使用table，从而使你的 drupal站点更加的易于被搜索引擎搜索
到，并且自适应于不同的浏览器。

¡ 一个普通的网页编辑器，在设计阶段，推荐使用最新版本的Dreamweaver ，在调试阶段，可以继续使用
Dreamweaver ，也可以使用一些轻量级的编辑软件，譬如 UltraEdit-32，它也会自动标亮 css 语言。
¡ 一些基本的图形编辑软件，如果你希望修改或是加入一些图片。

2 有用但是不必要的知识

¡关于PHP变量的一些知识；
¡关于PHP的if表达式的一些知识；
¡关于PHP的foreach的表达式

3 蓝图

图一


如图一所示，通常drupal的主题由上、中、下三大部分构成，而中部通常又分为左、中、右三部分。

¡上部：通常这里可以放置你的logo，你站点的名称，与你的口号，有页码时，主链接或是次链接也可以
放置在这个区域；
¡中部：正中央摆放的是主体内容部分，左右通常是两个边栏，你也可以只摆放一个边栏，或者把两个边
栏摆放在同一侧（譬如我现在地主题）；
¡下部：通常是一些辅助性的信息，譬如版权信息，主题的制作人，以及站点是由什么搭建的，当然你也
可以把别的东西放置在这里，譬如主链接，drupal的一款默认主题 pushbutton 就是把主链接另放了一份
在下部，或者，这里也可以加入“返回顶部”的链接。这开始制作drupal的主题前，最好自己先大致构思一
下这个主题的蓝图，将别的主题文件更改为drupal主题时，也需要先大致计划一下，下面我们开始一个实例。

 

4 实例

我们以Zen Garden的一个主题为范例来制作drupal的主题。
图二


这个主题的HTML文件可以在这里看到，它非常的简单，是 css 赋予它漂亮的外观，我们现在需要做的，
就是把这个HTML页面转化为drupal的主题文件，css文件基本不需要做任何地修改。

首先，按照我们上面提到的那样，我们需要有一个蓝图：大致考虑一下如何按照上中下的结构来分解这个
主题还有就是边栏的摆放位置，由于这个主题本身的特殊性，我们可以按照下面的结构图来设计 drupal
的主题。
图三


也就是说我们只打算要一个侧边栏。这也体现了drupal的灵活性，就像搭积木一样：）

5 转换

打开原来的HTML主题，原来文件的文件头(head部分）如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Dave Shea" />
<meta name="keywords" content="design, css, cascading, style, sheets, xhtml,
graphic design, w3c, web standards, visual, display" />
<meta name="description" content="A demonstration of what can be
accomplished visually through CSS-based design." />
<meta name="robots" content="all" />
<title>css Zen Garden: The Beauty in CSS Design</title>
<!-- to correct the unsightly Flash of Unstyled Content.
http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "sample.css";
</style>
</head>

现在我们开始逐一分析。

l 第一部份

¡ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">这部分可以保持不变。

l 第二部分

¡ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >需要转变为：<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print
$language ?>" xml:lang="<?php print $language ?>">注意在原来的HTML文件里，lang是直接定义的，而在drupal主题里，我们需要用变量 $language 来定义。

l 第三部分

¡ <head>
<meta http-equiv="content-type" content="text/html; charset=iso-
8859-1" />
<meta name="author" content="Dave Shea" />
<meta name="keywords" content="design, css, cascading, style,
sheets, xhtml, graphic design, w3c, web standards, visual,
display" />
<meta name="description" content="A demonstration of what can be
accomplished visually through CSS-based design." />
<meta name="robots" content="all" />
<title>css Zen Garden: The Beauty in CSS Design</title>
<!-- to correct the unsightly Flash of Unstyled Content.
http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "sample.css";
</style>
</head>

注意这一部分，所有的<meta />标签都可以删掉，这些meta关键字可
以有专门的模块来设置，譬如node keywords模块。这部分更改为如
下即可：

<head>
<title><?php print $head_title ?></title>
<meta http-equiv="Content-Type" content="text/css" />
<?php print $head ?>
<?php print $styles ?>
</head>

l 第四部分

¡下面就开始转化body部分，也就是主题的主体部分。首先我们要考虑如果摆放“上部”的零件。这里我们打算摆放 logo，site name和 site slogan。以我这里的主题为例，logo就是那个二马二龙的图腾标志；site name就是kzeng's stupid words；site
slogan我这里没有显示出来。

首先， 更改：
<body onload="window.defaultStatus='css Zen Garden: The Beauty inCSS Design';" id="css-zen-garden">为：<body <?php print theme("onload_attribute"); ?>>然后，我们希望把上部所有的零件都放在这个主题的 pageHearder这个 div 中，也就是如下部分的代码：

<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title="Cascading Style
Sheets">CSS</acronym> Design</span></h2>
</div>

注意这个header的部分要比drupal的简单很多，由于我们现在需要往里面放入三个零件，为了方便，我们可以把这个叫pagerheader的div分作三个部分，分别来放置 logo, site_name,和 site_slogan:

开始填料，首先是定义logo

<?php if ($logo) : ?>
<div id="logo"> <a href="<?php print url() ?>" title="Home"><img
src="<?php print($logo) ?>" alt="Home" /></a></div>
<?php endif; ?>

也就是说，如果有logo存在，那么就显示logo和它的div，并指定了logo的路径。site name与site slogan也是一样的，所以在填完以后，我们的“上部”就已经做完了：

<div id="pageHeader">
<?php if ($logo) : ?>
<div id="logo">
<a href="<?php print url() ?>" title="Home"><img src="<?php print
($logo) ?>" alt="Home" /></a>
</div>
<?php endif; ?>
<?php if ($site_name) : ?>
<div id='site_name'><a href="<?php print url() ?>" title="Home"><?
php print($site_name) ?></a>
</div>
<?php endif;?>
<?php if ($site_slogan) : ?>
<div id="site_slogan"><?php print($site_slogan) ?>
</div>
<?php endif;?>
</div>

注意这里的三个变量 $logo, $site_name, $site_slogan, 这是我们的积木，而php的if表述则是我们的搭建法则。另外注意，因为原来主题的pageheader的背景是有字的图片，所以给我们的显示带来了问题，在制作的后期我们需要把这个图片修正一下，另外，由于原主题希望使用图片来代替文字，它实际上对文字的display属性做了设置，禁止文字显示（也就是css Zen Garden The Beauty of
CSS Design 这几个字），但是这个不会影响到我们，因为我们已经删除了原来的这些文字的标签，但是在后期，我们会把css中的

#pageHeader h1 span,#pageHeader h2 span,#quickSummary p.p1 {
display: none;
}

删除，因为它和我们的主题没有关系，另外我们可能会定义site_name与site_slogan的显示。