joomla模板开发

在这篇文章中，我们将制作一个具体的JOOMLA模板，并且我们摒弃传统的table的方式，而采用div+css的方式建立Joomla!模板，这将更加符合w3c组织的标准，同时有利于搜索引擎收录。

在这篇文章中，我们主要涉及到以下这些方面：

什么是JOOMLA模板?
本地编辑模板的过程.
W3C标准和无表单设计.
JOOMLA模板的组成.
使用cascading style sheets (CSS)布局.
怎样布置你的组件和一些技巧.
Menus菜单.使用CSS建立一些简单的类似于JS编出来的菜单.
怎样控制Columns和隐藏一些没有内容的Columns.

什么是JOOMLA的模板? 通过Joomla!模板你能做什么？

JOOMLA模板是整个网站的外观基础设计,JOOMLA模板负责传递JOOMLA核心数据的展示. 下面我们来看一个例子:

这张图 B 标签展示一个了全新JOOMLA安装后的界面.但当你插入具体内容的时候模板被赋予了一种样式,这个样式继承了JOOMLA模板中定义的链接样式,菜单, 导航,文本尺寸,颜色等内容.使用类似JOOMLA这样的CMS(内容管理器)的模板能够实现完全的与内容分离。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

老外的原文实在太冗长了，其实原文的第三章就是说的工具选择，dreamweaver+photoshop，等等，我估计咱们就没老外那么钱多，还是哪里能省点就省点吧。

第四章主要是说模板开发的原则：最主要就是采用css+div ，地球人都知道啦，现在哪个大的站点不是css+div的，好处么做个人站点的基本都知道。另外就是一些xhtml的标签要语义相关等的要求，这里不赘述了。

我们来看看这张图，说的很清晰，什么是好的网站？一个好的网站离不开三个要素，一是用户体验，二是可访问性,三是SEO，三者能有效结合才是一个好的站点。所以在Joomla! 模板开发上要遵守的基本原则其实就是这三个原则，这也是w3c的标准。

下一篇文章，我们来重点说说Joomla! 1.5模板的重点要素和基本开发过程。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

模板的构成

每个模板都包含一系列的文件和图片，放在Joomla! 系统的 /templates/目录下，如下所示我们安装了两个模板，一是element,一是voodoo，要注意的是模板的名称与目录的名称一致。

/templates/element
/templates/voodo

在一个模板目录中，必须有关键文件：

/element/templateDetails.xml
/element/index.php

这两个文件的名称和位置要完全遵守规则，以便Joomla!系统调用。

templateDetails.xml

这是XML格式文件，主要用来通知Joomla!系统加载这个模板的时候有那些文件，同时也描述了作者、版权信息等等;还有模板使用的图片文件的清单. 同时这个文件也是安装文件.

index.php
这是最重要的文件.它通知JOOMLA系统如何布局组件和模块.它是一种PHP与(X)HTML的"混合体".大多数模板还使用其他的一些文件，通常以如下方式命名和放置：

/element/template_thumbnail.png
/element/css/template_css.css
/element/images/logo.png

接下来，让我们注意看看各个文件：

/element/template_thumbnail.png

当前模板的浏览器截图(通常使用140*90像素尺寸).安装模板完毕以后,这张图片会以"缩略图"的形式在后台模板管理器中展示.

/element/css/template_css.css

模板的CSS文件

/element/images/logo.png

通常模板开发人员会将土坯昂都放在images目录下，这里我们只有一个文件logo.png。

templateDetails.xml格式

templateDetails.xml 必须包括模板使用的所有文件. 它也包括了作者和版权信息等内容. 在后台的模板管理器这些信息将会被展示,下面是一个XML文件的例子:

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>TemplateTutorial15</name>
<version>1.0</version>
<creationDate>December 06</creationDate>
<author>Barrie North</author>
<authorEmail>
type="text/javascript" language="JavaScript">
/n compassdesigns@gmail.com
type="text/javascript" language="JavaScript">

</authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<copyright>GPL</copyright>
<description><![CDATA[three column template]]></description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somefile.js</filename>
<filename>images/threecol-1.jpg</filename>
<filename>images/threecol-2.jpg</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<params>
<param name="showComponent" type="radio" default="1" label="Show Component" description="Show/Hide the component output">
<option value="0">No</option>
<option value="1">Yes</option>
</param>
</params>
</install>

让我们来解释这些行的意义:

<install version="1.5" type="template">
XML文档是后台installer的指示，参数 type="template" 告诉安装程序安装的是一个模板。

<name>TemplateTutorial15</name>
模板的名称，因为名称用来创建目录，所以不能有不符合目录要求的字符。

<creationDate>December 06</creationDate>
模板建立的日期.

<author>Barrie North</author>
模板开发人员

<copyright>GPL</copyright>
版权信息

<authorEmail> type="text/javascript" language="JavaScript"> /n compassdesigns@gmail.com type="text/javascript" language="JavaScript"> </authorEmail>
开发人员的邮件地址

<authorUrl>www.compassdesigns.net</authorUrl>
作者站点

<version>1.0</version>
版本信息

<files>
这部分声明模板包括的PHP文件和图片文件. 每个文件被列出在<filename>与</filename>之间。

index.php
index.php是(X)HTML和PHP的混合体，它决定了网站的外观呈现。

我们首先来看页面头部的DOCTYPE定义，DOCTYPE决定了浏览器如何页面，特别是如何解释CSS。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

具体的DOCTYPE选择这里不翻译了，请看docs.joomla.org上的：

http://docs.joomla.org/Recommended_DocTypes
http://docs.joomla.org/References_about_DocTypes

<?php echo $this->language; ?>

读取我们设置的语言环境。

<jdoc:include type="head" />

这句话引入了页面的header部分。header部分通常代码如下：

<base href="/http://www.maycode.com/
" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Joomla! 1.5 template tutorial </title>
<link href="/index.php?format=feed&type=rss" _fcksavedurl=""/index.php?format=feed&type=rss"" mce_href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" mce_href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/templates/ja_purity/favicon.ico" mce_href="/templates/ja_purity/favicon.ico" rel="shortcut icon" type="image/x-icon" />

这里包含了几个meta标签。

<?php echo $this->template;?>/css/template_css.css 这句话引入了模板CSS文件。

一个空白JOOMLA模板

<body>
<?php echo $mainframe->getCfg(’sitename’);?>
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
</body>
</html>

尽管这个模板完成了，可是看起来并不是令人激动。这个模板定义了如下部分：

站点名称
顶部区域
左边区域
正文部分（组件）
右部区域

现在模板看来如下：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

现在我们创建三栏式的JOOMLA模板，而且这个三栏布局弹性的。页面宽度一直是一个问题,大约17%的浏览者使用800*600的分辨率. 79%的人使用1024*768以上或者更高的分辨率，采用弹性布局可以避免页面在1024分辨率下显得过窄，同时在更小的分辨率先也能正常浏览。

通常,设计者喜欢用table来进行布局,表格可以方便的使用"百分比"模式进行栏宽度设置,但是这种方法有下列弊端:

与CSS布局相比table布局有很多"额外代码".
搜索引擎也不易接受.
代码通常是CSS布局的双倍尺寸
还有图像占位 "spacer gifs"在使用table时也是问题.
采用table布局不容易维护。

即使一些大的网站也存在tables布局的问题，比如disney.co.uk website.

现在我们来开始CSS布局吧，如果你是CSS的初学者你最好看下 "beginners guide to CSS". 这里推荐:

Kevin Hale’s - An Overview of Current CSS Layout Techniques
htmldog’s CSS Beginner’s Guide
Mulder’s Stylesheets Tutorial
yourhtmlsource.com

来看看template_css.css,基本上全部的CSS代码都集中在这个文件中，而所有的内容都防止在#wrap的div内。大约占据视觉宽度的80%。我们要实现的效果如下图：

小贴士：
CSS 缩写
通常有可能对某些CSS代码进行 "缩写"，从而减少代码量. 我们来看一个关于 padding 和 margin 的例子
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
可以这样写:
margin: 5px 10px;
每种样式定义几乎都可以"缩写". 当你完成样式表, 用"缩写"去替换掉比较复杂的书写格式,比如标准格式关于font:
font: font-size |font-style | font-variant | font-weight | line-height | font-family
这里有个例子:
font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em;
变成这样:
font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

http://home.no.net/
这里是相关资料的链接 An Introduction to CSS shorthand properties 关于语法.

左/中/右三栏都被给出了它们自己的元素. 每部分都向左靠并形成"100%"屏幕宽度. clear:both 页脚的div跨越三栏,实现100%宽度.

为了使布局美观, 让每部分内容周围有一定的空间, 我们需要加入一些"栏空间", 被称为"gutter". 很不幸,这里会发生一个问题. 由于IE没有正确的解析border(box框架，有兴趣的可以看看相关的书籍，译者)，我们这里采用在区域之间再加上一个div来解决区域之间的空隙问题. 下面是代码：

<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>

添加inside类:
.inside {padding:10px;}

这种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法. 这样的方式带来两个优点, 代码短和容易控制. 然而,这并不是所谓的合理的代码顺序. 我们必须使用一些类似于 "nested float"的高级CSS技巧.合理代码顺序有助于搜索引起收录，而目前的布局显然重要的组件的内容会最后出现。虽然这优点复杂，compassdesigns.com有一个文件来说明如何创建这样的文件，这里不再详细说明了。

默认的Joomla CSS

到目前为止，我们的CSS都是关于布局的，这样的页面看起来是一点也不生动漂亮，接下来，我们加入一个格式CSS代码。先来添加两个定义，代码如下：

body {
text-align:center; /*center hack*/
}
#wrap {
min-width:760px;
max-width:960px;
width: auto !important; /*IE6 hack*/
width:960px; /*IE6 hack*/
margin:0 auto; /*center hack*/
text-align:left; /*center hack*/
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden; }
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
#sidebar-2 {float:left;width:20%; overflow:hidden;}
#footer {clear:both;}
.inside {padding:10px;}

首先我们使用一些小技巧，保持页面居中。这主要是由于IE6,IE7的问题。（具体还是参考CSS文档吧，译者）

小贴士：
我们定义column的宽度是百分比，而他们的容器div是固定宽度的，这可能看起来很奇怪，其实这是有好处的，一是更加灵活的弹性布局，如果我们要改变宽度，我们仅仅需要改动一个数值。

接下来的CSS我们做了一些全局性的设置，代码如下：

/*typography*/

* {
margin:0;
padding: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;
}
body {
font-size:76.1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3em;
}
#header {
background:#0099FF;
}
#footer {
background:#0099FF;
}
#main-body {
background: #CC0000;
}
#sidebar-2 {
background:#009933;
}
#content {
background: #999999;
}
#sidebar {
background: #009933;
}

每元素都被设定为"0"margin 和 "0" padding ,然后所有的块被定义了底部边距. 你可以在这里找到关于全局定义的相关内容clagnut and left-justified.

字体大小被设置成76.1%. 这也是为了在不同浏览器访问时自适应屏幕分辨率. 字体的单位都设置成 em. 字高 line-height:1.3em 设定更便于阅读. 这意味着页面可以适应不同访问者的不同页面分辨率. 这里有详细的讨论:
An experiment in typography at The Noodle Incident (Owen Briggs)

最后我们加入背景颜色设定,得到下图的显示效果.

请注意边栏并没有达到它们的底部. 我们看到左右栏各有一个红色和白色的空白区域. 如果我们设定整个模板的背景色是白色. 如果你想要三栏的背景色都填满，那么要使用背景图片垂直堆砌。这种技术被称为"Faux Columns" ，Douglas Bowman and Eric Meyer创造的.

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

尽管Joomla!可以通过模板重构核心输出的任何内容，然后渲染器仍然可能在内容中输出部分table,这些CSS对于模板开发者来说也是相当重要的。根据一些社区的研究，这些CSS标记清单如下：

.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper
关于这张清单请注意.

我们看到的很多设计有其自定义的CSS布局设计. 一些定义的是有优先顺序的.

比如:

a {color:blue;} a:link {color:red;}

.contentheading {color:blue;}
div.contentheading {color:red;}
链接的颜色和 .contentheading 的颜色将是红色的, 定义是特殊的(as .contentheading 是包含在一个 <div> 里面的)

在我们的模板例子中, 你常常会看到一些特殊的规则. 比如一个class 出现于 table. 下面是例子:

.moduletable table.moduletable
.moduletable 是一个包含组件的<div>的名字. table.moduletable 将应用一个样式到 table 类型是 ="moduletable" on it.
.moduletable 将应用自己的样式而不考虑 class 里面的定义.
a.contentpagetitle:link .contentpagetitle a:link
a.contentpagetitle:将应用样式只要有 a .contentpagetitle 标记的class 链接上.
.contentpagetitle a:link 会应用所有的INSIDE .contentpagetitle 链接.
这并不难理解, 这常常使绝大多数的样式应用比较容易,你也不希望看到有很多的特例.

一些有价值的链接:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.meyerweb.com/eric/css/link-specificity.html
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

此刻我们的模板使用了很多 table, 实际上12个这会导致页面访问慢. 为了减少 table 我们在使用 jdoc:include调用模块的时候要使用 $style参数。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

在实际阅读本文之前，建议阅读一些关于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*/ }

现在页面的效果看起来如下：

这一章中我们主要说了如何设置模块，下一章我们来看看菜单处理。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

前文我们曾经说过，页面中table可以减少到12个，现在页面中还有14个table,接下来我们来处理菜单，从而达到减少table的目的，剩下的12个table，如果不改变核心代码的话，是无法减少的。

我们要将菜单的风格设为 flat。（要在管理员界面的module manager中，对mainmenu模块修改，通常设置为flat,译者），现在页面中就只有12个table了。

接下来我们修改关于菜单的格式控制，添加代码如下：

/*Menu Styling*/

.moduletablemenu{
padding:0;
color: #333;
margin-bottom:1em;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
border-bottom:1px solid #fff;
}
.moduletablemenu ul{
list-style: none;
margin: 0;
padding: 0;
}
.moduletablemenu li{
border-bottom: 1px solid #ccc;
margin: 0;
}
.moduletablemenu li a{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #333;
border-right: 10px solid #9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body .moduletablemenu li a {
width: auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

现在整个页面的效果如下图：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

到目前为止，我们的模板采用三列结构布局，而不管这一列中是否有内容。对于一个CMS网站来说是没有什么益处的，因为这部分内容不发生变化。但是因为需要管理员能够改变模块的位置，所有我们需要能够自动关闭或者折叠起一列来。这就是列隐藏。

在这篇文章中http://www.maycode.com/index.php/hotspot/28-joomla/406-joomla-template.html 我们提到了Joomla! 1.5模板的新特征，请参考。在Joomla! 1.5的模板开发中，我们采用countModules来判断是够某列有模块需要显示。

通常的代码如下：

<?php if($this->countModules(’left’)) : ?>
do something
<?php else : ?>
do something
<?php endif; ?>

countModules支持关系运算以及部分数学运算，以下是例子：

countModules(’left’) //如果left有模块显示，则返回1
countModules(’left and right’) //left和right都有模块显示，返回1
countModules(’left or right’) //left或right之一模块显示，返回1
countModules(’left + right’) //left和right都有模块显示，返回1

使用这个函数，我们就可以实现隐藏不需要的列。

通常有集中方式来实现，我们这里在页面的头部进行计算，代码如下：

<?php
if($this->countModules(’left and right’) == 0) $contentwidth = "100";
if($this->countModules(’left or right’) == 1) $contentwidth = "80";
if($this->countModules(’left and right’) == 1) $contentwidth = "60";
?>

这样，如果左右都没有模块显示，那么我们采用100%列宽，如果左或者右右一列显示，那么我们采用80%列宽，如果都有，那么我们采用60%列宽。

同时，我们把内容部分改为：

这样我们就选择了合适的列宽。

同时，我们在template_css.css文件中添加：

#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}

隐藏空的模块：

同样我们也需要隐藏空的模块，示例代码如下：

<?php if($this->countModules(’left’)) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>

这样，如果左边如果没有模块，那么 id=sidebar 自然也不会出现了。

至此，我们就完成了一个基本模板的开发过程，接下来我们给出一个真是模板的开发过程。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

到目前为止，我们创建一个简单的基本模板，这个模板的创建过程体现了实际模板的整个创建过程的所有环节。

joomla模板开发相关推荐

Joomla模板开发-模版是如何执行的
Joomla模板开发-模版是如何执行的在本节中我们要解决的问题是 joomla的模版是怎样被执行的. joomla模版分两个阶段来执行的.因为模版通常是在document对象中执行的,所以在模版中的 ...
和joomla模板开发死磕(1)
前言最近总是在研究joomla基于EF4模板框架下模板的开发,可是总搞不清几个要素的关联关系.比如:模块.位置.布局.风格.模板.菜单项的关联关系,走通这几个要素成了必须解决的问题.于是,静下心来, ...
第一章 Joomla!扩展开发：概况
第一章 Joomla!扩展开发:概况你以前开发过动态网站但你的朋友告诉你有关Joomla!的事,所以你决定试一试.从食物网上那些出名的厨师中得到灵感后,你想建立一个简单的关于餐厅的网站.这个网站的安 ...
理解Joomla!模板
典型的模板目录结构 Joomla! CMS模板使用目录和文件的结构,但它们可能因模板而异网站模板(可以更改网站外观的模板)可以在 /templates 目录中找到.例如,如果您的模板称为" ...
收集最全的Joomla教材网站和joomla模板网站
http://www.seonote.net/joomla/the-most-complete-collection-of-joomla-sites-and-joomla-templates-webs ...
php网站模板制作教程视频教程,CCTVPHP网页制作教程网joomla模板制作视频教程
在这个教程里,我们将一步步的制作一个具体的JOOMLA模板,JOOMLA是一个强大的开放代码的CMS(内容管理系统),并且她有着广泛的在线社团的支持.这里强调,我们将不使用table(表单);而是使用 ...
如何选择合适的Joomla模板
在当今时代,很难找到没有在线业务的企业!为了建立您的在线形象,您需要一个功能齐全的网站.选择 CMS 后,下一个重要任务是为您的网站选择正确的模板.在为您的企业选择正确的模板时清楚了解模板的功能. 为 ...
Joomla模板下载
Joomla模板六翼有大量的优质Joomla模板,可供购买和下载.我们的每一个模板都是从头开始构建的,以易于使用,非常可定制,并针对最新的浏览器标准进行了优化. 新的Joomla模板定期发布,以现代的 ...
Joomla 模板常用技巧函数收集
在平时开发 Joomla 模板的时候收集了一些极为常见也非常有用的函数,现列出来方便制作 Joomla 模板时查阅,具体内容将不断更新,需要注意的是该页代码在模板中使用时均需嵌套在 <?php ...

joomla模板开发

joomla模板开发相关推荐

最新文章

热门文章