JA文档中文翻译 - JA模板框架指南 - Purity II 默认布局详解 - VII II X - Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

JA文档中文翻译 - JA模板框架指南 - Purity II 默认布局详解

Joomla文档中文翻译 - JA模板框架指南 Saturday, 06 February 2010 12:28

在前面一篇JA文档中，我们对Purity II模板的布局结构做了大致的了解；今天我们来看看Purity II的默认布局文件。

在P板的layouts文件夹中，有两个默认布局文件：

default.php：很多用户使用这个文件来开发自己的模板布局。
default-joomla.php：和 default.php类似，但是使用自己的一套block设定(相应的文件存放在layouts/blocks/joomla文件夹中)。

下面图中所示的就是Purity II的默认布局，和在线演示中的页面是相同的。中间是 default.php文件里的一小部分代码，它们分别对应着布局中的左、右侧边栏；正如前面一篇文档中提到的，默认布局中，左侧边栏的样式为普通矩形，右侧边栏为圆角矩形。

接下来我们对default.php文件进行进一步的围观：

第十六行附近：

$this->_basewidth = 20;

这行代码使用百分比来根据当前窗口的尺寸设定列的宽度。

接下来的代码：

$positions = array (
  'left1'          =>'left',
  'left2'          =>'',
  'left-mass-top'      =>'',
  'left-mass-bottom'    =>'',
  'right1'        =>'right',
  'right2'        =>'',
  'right-mass-top'    =>'',
  'right-mass-bottom'    =>'',
  'content-mass-top'    =>'',
  'content-mass-bottom'  =>'',
  'content-top'      =>'',
  'content-bottom'    =>'',
  'inset1'        =>'',
  'inset2'        =>''
);

用来定义默认布局中的block位置。其中左侧边栏区块(left)拥有两个二级单位：left1和left2；blocks文件夹中的left.php 文件使用该区块位置进行输出；右侧边栏(right)同理。

需要注意的是，在这里将left2指向left并不会造成实际输出样式发生变化，除非模块使用了不同的class名称并在CSS中进行了单独的样式设置。

参考“JA文档中文翻译 - JA模板框架指南 - Purity II的布局结构”一文中的默认布局区块位置示意图，我们继续：

left-mass-top：位于左侧边栏区块(包括left1和left2)的上方。
left-mass-bottom：位于左侧边栏区块的下方。
right-mass-top：位于右侧边栏区块(包括right1和right2)的下方。
right-mass-bottom：位于右侧边栏区块的下方。
content-mass-top：位于主要内容区块(main)的上方；在默认状况下，主要内容区块的文件main.php包含在所有的布局中，所以不需要特定的区块位置定义。
content-mass-bottom：位于主要内容区块(main)的下方。
content-top，content-bottom，inset1和inset2是一些备用区块位置。

default.php文件的45行附近：

<head>
<?php $this->loadBlock('head') ?>
</head>

这行代码用来加载head.php区块文件，通过它来调用模板页面所需的JavaScript和CSS文件。对于自己创建的自定义模板布局，通过 head.php调用的那些文件不是必需的；换句话说，head.php文件中调用的样式表及JS文件只是针对P板默认的输出样式及行为定义，对于自己的模板，可以将head.php中调用的样式表及JS文件替换为自己所需的。

接下来的代码：

<body id="bd" class="fs<?php echo $this->getParam(JA_TOOL_FONT);?> 
<?php echo $this->browser();?>">

负责根据管理后台的相关设置来定义页面中默认的字号。

接下来，在55行附近：

  <!-- HEADER -->
  <?php $this->loadBlock('header') ?>
  <!-- //HEADER -->
 
  <!-- MAIN NAVIGATION -->
  <?php $this->loadBlock('mainnav') ?>
  <!-- //MAIN NAVIGATION -->
 
  <?php $this->loadBlock('topsl') ?>

这些代码用来调用header.php、mainnav.php和topsl.php区块文件。

接下来：

  <!-- MAIN CONTAINER -->
  <div id="ja-container" class="wrap <?php echo $this->getColumnWidth('cls_w'); ?>">
  <div class="main clearfix">
 
    <div id="ja-mainbody" style="width:<?php echo $this->getColumnWidth('mw') ?>%">
      <?php $this->loadBlock('main') ?>
      <?php $this->loadBlock('left') ?>
    </div>
 
    <?php $this->loadBlock('right') ?>
 
  </div>
  </div>
  <!-- //MAIN CONTAINER -->

这是页面的主要部分了，用来调用主要内容区块(main.php)、左侧边栏区块(left)和右侧边栏区块(right)。

最后一部分：

  <?php $this->loadBlock('botsl') ?>
 
  <!-- FOOTER -->
  <?php $this->loadBlock('footer') ?>
  <!-- //FOOTER -->
 
</div>
 
<jdoc:include type="modules" name="debug" />
 
<?php if ($this->isIE6()) : ?>
  <?php $this->loadBlock('ie6/ie6warning') ?>
<?php endif; ?>