Joomla! 基本模版解析（新手入門）
基本模版和站點設(shè)計
概述
Mambo 模版系統(tǒng)是內(nèi)容管理系統(tǒng)當(dāng)中最容易學(xué)習(xí)的。
模版位于 /templates目錄。 模版典型的目錄結(jié)構(gòu)為:
/templates
/basic_template
/css
template_css.css
/images
index.php
template_thumbnail.png
templateDetails.xml
這是你創(chuàng)建一個模版需要的最少的文件，文件名必須和代碼里面的名稱保持一致。 注意在 /images目錄中沒有寫出圖像的名稱，這里一般放置任何的你模版需要的圖片, 像背景，banners,等等。讓我們大略看一下這些文件。
index.php: 這是模版布局文件。
template_css.css: 模版的 css 樣式表。
templateDetails.xml: XML 格式的 metadata 文件。
template_thumbnail.png: 模版的縮略圖, 通常大約為 140x90 像素。
基本模版和站點設(shè)計
概述
Mambo 模版系統(tǒng)是內(nèi)容管理系統(tǒng)當(dāng)中最容易學(xué)習(xí)的。
模版位于 /templates目錄。 模版典型的目錄結(jié)構(gòu)為:
/templates
/basic_template
/css
template_css.css
/images
index.php
template_thumbnail.png
templateDetails.xml
這是你創(chuàng)建一個模版需要的最少的文件，文件名必須和代碼里面的名稱保持一致。 注意在 /images目錄中沒有寫出圖像的名稱，這里一般放置任何的你模版需要的圖片, 像背景，banners,等等。讓我們大略看一下這些文件。
index.php: 這是模版布局文件。
template_css.css: 模版的 css 樣式表。
templateDetails.xml: XML 格式的 metadata 文件。
template_thumbnail.png: 模版的縮略圖, 通常大約為 140x90 像素。
布局文件
模版布局文件是一個 PHP 文件，不過大部分是HTML代碼，只有少數(shù)的PHP代碼片段。你不一定精通PHP才能寫一個模版文件，你需要的就是能夠知道該在哪里引用 Mambo的模版引擎。
模版布局文件主要由 HTML代碼組成。 在 HTML 框架里面你放入一些可以引用你的網(wǎng)站的數(shù)據(jù)庫的“窗口”。 通常是幾個小的“窗口”用來放模塊，一個大的“窗口”用來放(類似frontdoor的)組件 。
鼓勵使用 xHTML 語言來寫模版。 雖然大家還在爭論 xHTML是否是未來的主流，但是它很好的符合 XML 標(biāo)準, 而HTML 是一個更加寬松的標(biāo)準。未來 Mambo 的版本將會越來越多的建立在 XML 上，因此現(xiàn)在使用xHTML也許是明智的。
典型的 3欄的布局的index.php 文件一般是:
<?php
1iso = explode( ‘=‘, _ISO ); /** 編碼本地化 **/
2:echo "<?xml version=\"1.0\" encoding=\"$iso[1]\" ?>";
/** ensure this file is being included by a parent file */
3: defined( ‘_VALID_MOS‘ ) or die( ‘Direct Access to this location is not allowed.‘ );
4: ?>
5: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
6: <html xmlns="7: <head>
8: <title><?php echo $mosConfig_sitename; ?></title>
9: <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
10: <?php
11: if ($my->id) {
13: initEditor();
14: }
15: ?>
16: <?php mosShowHead(); ?>
17: <link href="<?php echo $mosConfig_live_site;?>/templates/basic_template/css/template_css.css"
rel="stylesheet" type="text/css" />
18: </head>
19: <body>
20: <table cellspacing="0" cellpadding="5" border="0">
21: <tr>
22: <td colspan="3">
23: <?php echo $mosConfig_sitename; ?><br/>
<?php mosPathWay(); ?> /* 顯示當(dāng)前網(wǎng)站路徑 */
24: </td>
25: </tr>
26: <tr>
27: <td colspan="3">
28: <?php mosLoadModules ( ‘top‘, 1 ); ?>
29: </td>
30: </tr>
31: <tr>
32: <td width="20%" valign="top">
33: <?php mosLoadModules ( ‘left‘ ); ?>
34: </td>
35: <td width="60%" valign="top">
36: <?php mosMainBody(); ?>
37: </td>
38: <td width="20%" valign="top">
39: <?php mosLoadModules ( ‘bottom‘ ); ?>
40: </td>
41 </tr>
42: </table>
43: </body>
44: </html>
讓我們大略看一下主要的功能。假設(shè)你已經(jīng)知道一點有關(guān) HTML頁面制作的知識，像head tags,body tags，tables,等等。
第 1 行: 定義一個有效的 XML 文件。
第 3 行: 避免直接的訪問這一個文件，你的模版必須包含這一行。
第 5-6 行: 為頁面建立 xHTML 標(biāo)準。
第 8 行: 配置文件中的站點名稱，顯示到標(biāo)題中。
第 9 行: _ISO 是一個特定的常量，用來定義網(wǎng)頁的編碼方式，它在你的語言文件定義。
第 10-15 行: $my-> id：如果一個用戶登錄到你的網(wǎng)站，它就是是一個非零的變量。 一個用戶登錄后，WYSIWYG 編輯器就預(yù)先裝載。 你可以,如果你愿意, 總是預(yù)裝載編輯器,但是通常匿名訪客不需要添加內(nèi)容。 這對于你的站點正常瀏覽在減少了一點代碼運行負擔(dān)。
第 16 行: 插入一些 metadata 區(qū)段。
第 17 行: 裝載 CSS 樣式表。 $mosConfig_live_site 是一個站點絕對網(wǎng)址配置變量。
第 23 行: 在一個表格單元顯示站點名字(跨越三欄)。
第 28 行: 載入在 "top" 位置中發(fā)布的任何模塊。 第二個參數(shù)的含義："-1",不依模板CSS的tablemodule定義，而以模塊內(nèi)部的風(fēng)格定義顯示； "0"或無參數(shù)：默認的而已方式（模板CSS） "1", 表示模塊是水平排列。
第 33 行: 載入在 " left " 位置中發(fā)布的任何模塊。 這些模塊將會在一欄中顯示。
第 36 行: 載入組件到你的模版之內(nèi)，組件由URL來定，例如 index.php?option=com_content將顯示內(nèi)容組件到這個區(qū)域中。
第 39 行: 載入在 "right" 位置中被發(fā)布的任何模塊，這些模塊將會在一欄中顯示。
CSS樣式表
TODO
XML 配置文件
TODO
縮略圖
當(dāng)你已經(jīng)完成你的模版, 通過管理后臺中的模版管理來安裝它。 預(yù)覽站點，做一個屏幕截圖，用你喜歡的圖形編輯軟件編輯，只保留瀏覽器中看到的部分。 保持成png格式，大小大概140×90象素，保存到你的模版目錄(/templates/basic_template)。
模版進階
概述
這一個章包括一些高級功能,比方說隱藏模版欄和管理員模版設(shè)計。
隱藏模塊
有時如果沒有指定給某個區(qū)域任何模塊，我們應(yīng)該隱藏這一區(qū)域。可以用 mosCountModules 功能隱藏某些區(qū)域。
<?php if (mosCountModules( "right" )) { ?>
<td>
<?php loadModules( "right" ); ?>
</td>
<?php } ?>
如果 mosCountModules 函數(shù)返回大于 1 的值,表格單元格將會被顯示。對于某些頁面，如果" right" 位置沒有放置任何模塊，那“right”欄將不顯示，這是一個很好的技術(shù)，可以增加特定頁的水平寬度。
使用CSS類后綴
TODO
文件和函數(shù)參考
模版開發(fā)人員可以使用下列函數(shù)。
mosLoadComponents
語法:
mosLoadComponets($name )
裝載一個組件，例如 "橫幅廣告"。
mosCountModules
語法:
mosCountModules($ position_name)
計算在 " position_name" 位置中顯示模塊的個數(shù)。
mosLoadModules
語法:
mosLoadModules($ position_name[,$style])
在當(dāng)前頁顯示所有指定給 " position_name" 位置的模塊。 " style " 參數(shù)可以是:
0=( 默認顯示) 模塊在欄中被顯示。 例子如下:
<!-- Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>
Module output
</td>
</tr>
</table>
<!-- Individual module end -->
1= 模塊水平顯示。 每個模塊在包裝（wrapper）表格的單元格里面顯示。 例子如下:
<!-- Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td align="top">
<!-- Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>
Module output
</td>
</tr>
</table>
<!-- Individual module end -->
</td>
<td align="top">
<!-- ...the next module... -->
</td>
</tr>
</table>
-1= 模塊原始輸出顯示，沒有標(biāo)題。 例子如下
Module 1 OutputModule 2 OutputModule 3 Output
-2= 模塊以 X- Mambo 的格式顯示。 例子如下:
<!-- Individual module -->
<div class="moduletable[suffix]">
<h3>Module Title</h3>
Module output
</div>
<!-- Individual module end -->
注意，在所有的情形中，可選擇的類 " 后綴 " 可以通過模塊參數(shù)來應(yīng)用。
mosShowHead
語法:
<?php mosShowHead;() ?>
包含各種不同的header 標(biāo)簽，包括標(biāo)題標(biāo)簽和一些 meta 標(biāo)簽。
mosMainBody
語法:
<?php mosMainBody;() ?>
顯示由URL的option所決定的組件。
后臺管理模版
現(xiàn)在管理員模版仍然正在編寫。將來的版本中，站點和管理員的模版系統(tǒng)將會合并成同一個API。 然而，下面一些注釋作為叁考放在這里。
模塊支持
你可以在管理后臺模版里面，直接用mosLoadAdminModule載入模塊，或在組（group）中, 向網(wǎng)站模版中一樣，使用mosLoadAdminModules。舉例來說:
<table width="100%" class="menubar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="menubackgr"><?php mosLoadAdminModule( ‘fullmenu‘ );?></td>
<td class="menubackgr" align="right">
<div id="wrapper1">
<?php mosLoadAdminModules( ‘header‘, 2 );?>
</div>
</td>
<td class="menubackgr" align="right">
<a href="index2.php?option=logout" style="color: #333333; font-weight: bold">Logout</a>
<strong><?php echo $my->username;?>
</td>
</tr>
</table>
mosLoadAdminModule 函數(shù)有一個參數(shù), 模塊名加上" mod_" 前綴。 例子表格的第一個單元格載入Full Menu模塊( 也就是,mod_fullmenu)
在第二個表格單元格里，載入所有的被指定給 " header " 的模塊，第二個參數(shù)是風(fēng)格設(shè)定:
0= 順序地顯示模塊輸出
1= 在"Tab " 中顯示每個模塊
2= 每個模塊放在
標(biāo)簽顯示
"header" 模塊的格式完全由css控制。 舉例來說," wrapper1" 風(fēng)格被定義為:
#wrapper1 div {
border: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px 5px 0px 5px;
display: inline;
}
模塊放在簡單的 div 標(biāo)簽中。為了在某一欄顯示模塊，你可以增加一個“寬度屬性”并將“顯示屬性”換成 " inline " 。
下列的模塊對包含在Mambo發(fā)行包里面。
mod_fullmenu
完整的菜單模塊顯示傳統(tǒng)的 DHTML 后臺管理菜單。內(nèi)容部分和組件動態(tài)添加，其他菜單靜態(tài)地定義。
mod_components
組件模塊顯示組件和其子菜單的完整列表。 當(dāng)安裝了許多組件，多于DHTML菜單可以顯示的時候，這個就有用了。
mod_latest
最新模塊，顯示最近添加內(nèi)容條目。
mod_mosmsg
信息模塊，顯示URL傳入的信息。
mod_online
用戶在線模塊，顯示登錄的用戶的數(shù)目。
mod_pathway
路徑模塊，顯示管理員所在位置。
mod_popular
最流行模塊，顯示最熱門的內(nèi)容條目列表。
mod_stats
菜單統(tǒng)計模塊，顯示一些關(guān)于菜單使用的統(tǒng)計。
mod_toolbar
工具欄模塊，顯示圖標(biāo)工具欄。
mod_unread
未讀信息，顯示尚未閱讀的私人信息數(shù)目。
控制面板
管理后臺的控制面板是一個單獨的文件， cpanel.php，在模版里面引用。這是一個獨立的文件，讓你根據(jù)不同站點和用戶的不同需要，定制個性化屏幕布局配置。
控制面板文件不是必須被引用。 那樣的話，控制面板將會只顯示任何在 " cpanel" 位置的管理員模塊。
cpanel.php 文件可像下列的例子一樣的簡單:
<?php
/**
* @version $ Id: cpanel.php,v 1.3 2004/08/12 08:29:21 rcastley Exp $
* @package Mambo_4.5
* @copyright (C) 2000 - 2004 Miro International Pty Ltd
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
* Mambo is Free Software
*/
/** ensure this file is being included by a parent file */
defined( ‘_VALID_MOS‘ ) or die( ‘Direct Access to this location is not allowed.‘ );
?>
<table class="adminform">
<tr>
<td width="100%" valign="top">
<?php mosLoadAdminModules( ‘cpanel‘, 1 ); ?>
</td>
</tr>
</table>
5.編寫安裝文件
安裝文件是個簡單的xml文件，得益于xml的自描述特性，我們很容易就能看懂下面這個安裝文件的含義。
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template">
<name>247portal</name>
<creationDate>01.01.2005 03:12:37</creationDate>
<author>David Cannondale & David Marquardt</author>
<copyright>(c) 2005 </copyright>
<authorEmail>info@mamboteam.com</authorEmail>
<authorUrl>http://www.mamboteam.com</authorUrl>
<version>1.0</version>
<description>This Template-Solution is powered by the famous 247Studios! </description>
<files>
<filename>index. php</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
</files>
<images>
<filename>images/bullet.png</filename>
<filename>images/bb.gif</filename>
<filename>images/back.gif</filename>
<filename>images/center.jpg</filename>
<filename>images/center2.jpg</filename>
<filename>images/header.gif</filename>
<filename>images/left.jpg</filename>
<filename>images/left2.jpg</filename>
<filename>images/ltop.gif</filename>
<filename>images/modul.jpg</filename>
<filename>images/right.jpg</filename>
<filename>images/right2.jpg</filename>
<filename>images/read.gif</filename>
<filename>images/rtop.gif</filename>
<filename>images/shadow.jpg</filename>
<filename>images/space.gif</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
可以看出這個文件定義了一些基本信息和所有需要安裝的文件。其中template_thumbnail.png是縮略圖文件，favicon.ico是IE圖標(biāo)。
6.安裝模板
要想安裝你剛剛寫好的模板，只要將模板目錄以zip格式打包，然后在后臺選擇：站點設(shè)置-〉模板管理，然后新建一個模板，最后將壓縮包上傳即可。
轉(zhuǎn)載請保留出處，謝謝！此帖轉(zhuǎn)自智聯(lián)網(wǎng)信[http://bbs.13925.com/]原帖地址：
http://bbs.13925.com/viewthread.php?tid=20615
