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模板的重點要素和基本開發過程。
我們來看看這張圖，說的很清晰，什么是好的網站？一個好的網站離不開三個要素，一是用戶體驗，二是可訪問性,三是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/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.comtype="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
?讀取我們設置的語言環境。
<jdoc:include type="head" />
這句話引入了頁面的header部分。header部分通常代碼如下：
<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我們做了一些全局性的設置，代碼如下：
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
使用這個函數，我們就可以實現隱藏不需要的列。
通常有集中方式來實現，我們這里在頁面的頭部進行計算，代碼如下：
<?phpif($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%列寬。
同時，我們把內容部分改為：
<div id="content<?php echo $contentwidth; ?>">
這樣我們就選擇了合適的列寬。
同時，我們在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模板开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SuperMap GIS 倾斜摄影数据优
- 下一篇： Pushmail让邮件随身飞