Joomla! 1.5 模板开发step by step（六）

推荐文章

·10分钟轻松在线创建Joomla!模块
·Joomla! 1.5 API 中文手册（作者：aivera）
·JA Olivine 最新版本 for Joomla! 1.5.6
· 大家来订阅一下Joomla!安全小组的feed (09-07)
· youjoomla.com发布的一款Joomla!1.5免费模板social bug (09-04)
· 如何删除或者屏蔽Joomla!超管账号 (09-03)
· 生日快乐！Joomla! 三岁了！ (09-03)
· Joomla! 开源天空改版行动正式开始 (08-31)
· 测试all video 在文章内容中插入 (08-26)

在实际阅读本文之前，建议阅读一些关于Joomla!模板的基础知识，请参考：http://www.maycode.com/index.php/hotspot/28-joomla/475-joomla-template.html，如果在阅读中遇到问题，也请现在上述文章中寻找答案。

关于Jdoc的相关资源，请参考http://www.maycode.com/index.php/hotspot/28-joomla/286-joomla-template.html

在index.php中调用模块的语法如下：

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

style是可选的，可选值定义在modules/templates/modules.php（我的版本中在templates/system/html/modules.php，也许原文有误，译者）中。style的可取值有table,horz,xhtml，rounded,none,outline等，具体的表现形式请参考：http://www.maycode.com/index.php/hotspot/28-joomla/333-joomla-template.html。

（原文中给出了这几种风格的源代码，这里就省略了，译者）

你可以看到style取值为xhtml或者rounded时候，源代码更加简洁，更适合CSS，我们也推荐这两种，而且不是必要的时候不要使用table和horz.

打开modules.php文件，你可以看到所有的风格，你设置可以自由的添加自己的风格，以下的代码是xhtml的实现：

function modChrome_xhtml($module, &$params, &$attribs)
{
 if (!empty ($module->content)) : ?>
  <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
  <?php if ($module->showtitle != 0) : ?>
   <h3><?php echo $module->title; ?> »</h3>
  <?php endif; ?>
   <?php echo $module->content; ?>
  </div>
 <?php endif;
}

你可以自由的改变这个风格。（不过如果你想添加自己的风格，应该参考http://docs.joomla.org/Applying_custom_module_chrome，直接修改核心代码总是不爽的，译者）

对于我们的模板制作，我们选择xhtml风格。全部代码如下：

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
 <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>
  <div id="content<?php echo $contentwidth; ?>">
    <div class="inside">
      <div id="pathway">
        <jdoc:include type="module" name="breadcrumbs" />
      </div>
      <jdoc:include type="component" style="xhtml" />
    </div>
  </div>
  <?php if($this->countModules('right')) : ?>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer')) : ?>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="raw" />
    </div>
  </div>
  <?php endif; ?>
</div>
<!--end of wrap-->
</body>

注意，我们不能在<jdoc:include type="component"> 中设置style，因为模块并不支持。

将模块设置为xhtml风格，可以把table的数量减少为14个，接下来我们添加一个foemat控制的CSS.

同样还将添加 <H1> 标签，对于SEO的非常有帮助的。现在我们的CSS代码看起来如下：

/*typography*/

* {
margin:0;
padding:0;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0; 
}
li,dd { 
margin-left:1em;
}
fieldset { 
padding:.5em; 
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px; /*negative padding to pull h3 back out from .moduletable padding*/ }