Descartes 的页面模板

我们已经创建了一个主题——Descartes，并添加了一些自定义CSS。现在，我们将修改 Bluemarine 主题提供的一个模板。我们将修改页面模板，让右边栏（右区域）可以浮动。

要做的第一件事，是把 Bluemarine 的页面模板拷贝到我们的 descartes/ 主题目录下：

$ cp drupal/themes/bluemarine/page.tpl.php \
drupal/sites/all/themes/descartes

现在我们有了一份模板拷贝，可以根据我们的需要修改。按照主题继承原则，这个新模板将覆写 Bluemarine 的 page.tpl.php 文件。现在，主题系统将使用Descartes 的 page.tpl.php，并忽略父主题 Bluemarine 的模板。

浏览一下这个模板，我们可以看到前面讨论过的很多变量。没有必要掌握这个模板的全部细节。我们将焦点放在高亮的部分。

<?php
   // $Id: page.tpl.php,v 1.25 2007/09/05 08:42:02 dries Exp $
   ?>
<!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" 
      lang="<?php print $language->language ?>" 
      xml:lang="<?php print $language->language?>">
  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>
    <script type="text/javascript">
      <?php /* Needed to avoid Flash of Unstyle Content in IE */ ?>
    </script>
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" id="header">
      <tr>
	<td id="logo">
	  <?php if ($logo) { ?>
	  <a href="<?php print $base_path ?>"
	     title="<?php print t('Home') ?>">
	    <img src="<?php print $logo?>" alt="<?php print t('Home') ?>" />
	  </a><?php } ?>
	  <?php if ($site_name) { ?>
	  <h1 class='site-name'>
	    <a href="<?php print $base_path ?>" 
	       title="<?php print t('Home') ?>">
	      <?php print $site_name ?></a></h1><?php } ?>
	  <?php if ($site_slogan) { ?><div class='site-slogan'>
	    <?php print $site_slogan ?></div><?php } ?>
	</td>
	<td 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 } ?>
	  <?php print $search_box ?>
	</td>
      </tr>
      <tr>
	<td colspan="2"><div><?php print $header ?></div></td>
      </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0" id="content">
      <tr>
	<?php if ($left) { ?><td id="sidebar-left">
	  <?php print $left ?>
	</td><?php } ?>
	<td valign="top">
	  <?php if ($mission) { ?><div id="mission">
	    <?php print $mission ?></div><?php } ?>
	  <div id="main">
	    <?php print $breadcrumb ?>
	    <h1 class="title"><?php print $title ?></h1>
	    <div class="tabs"><?php print $tabs ?></div>
	    <?php print $help ?>
	    <?php if ($show_messages) { print $messages; } ?>
	    <?php print $content; ?>
	    <?php print $feed_icons; ?>
	  </div>
	</td>
	<?php if ($right) { ?><td id="sidebar-right">
	  <?php print $right ?>
	</td><?php } ?>
      </tr>
    </table>
    <div id="footer">
      <?php print $footer_message ?>
      <?php print $footer ?>
    </div>
    <?php print $closure ?>
  </body>
</html>

上面代码中高亮的表格提供了页面的基本布局。它有三个单元格，都在同一行。每个单元格对于一个区域：left, content, 和 right。

提示：CSS与左、右区域。注意，虽然左、右区域存储在 $left 和 $right 变量中，但相应容器的 ID 命名为 sidebar-right 和 sidebar-left。前面我们开发只用CSS的主题时，曾经为它们添加风格。

原来的布局是三列的表格布局，可是现在我们只要两列：一个用于 right 区域，另一个用于 content 区域。

left 区域将放在一个 <div/> 元素里，放在 content 部分里面，我们将修改new.css 样式表，把这个区域移动到右侧上方。

为了实现这一点，我们将去掉如下所示的第三个 <td/> 元素：

<?php if ($right) { ?><td id="sidebar-right">
  <?php print $right ?>
</td><?php } ?>

注意，只有当 $right 变量有定义时，第三列才显示出来。当我们把 right 区域移动到表格的第二列时，将保持这个特性。

<td valign="top">
  <?php if ($mission) { ?>
  <div id="mission">
    <?php print $mission ?>
  </div>
  <?php } ?>
  <div id="main">
    <?php if ($right) { ?>
    <div id="sidebar-right">
      <?php print $right ?>
    </div>
    <?php } ?>
    <?php print $breadcrumb ?>
    <h1 class="title"><?php print $title ?></h1>
    <div class="tabs"><?php print $tabs ?></div>
    <?php print $help ?>
    <?php if ($show_messages) { print $messages; } ?>
    <?php print $content; ?>
    <?php print $feed_icons; ?>
  </div>
</td>