Joomla! 基本模版解析（新手入门）

Joomla! 基本模版解析（新手入门）
基本模版和站点设计
概述
Mambo 模版系统是内容管理系统当中最容易学习的。
模版位于 /templates目录。模版典型的目录结构为:
/templates
/basic_template
/css
template_css.css
/images
index.php
template_thumbnail.png
templateDetails.xml
这是你创建一个模版需要的最少的文件，文件名必须和代码里面的名称保持一致。注意在 /images目录中没有写出图像的名称，这里一般放置任何的你模版需要的图片, 像背景，banners,等等。让我们大略看一下这些文件。
index.php: 这是模版布局文件。
template_css.css: 模版的 css 样式表。
templateDetails.xml: XML 格式的 metadata 文件。
template_thumbnail.png: 模版的缩略图, 通常大约为 140x90 像素。
基本模版和站点设计
概述
Mambo 模版系统是内容管理系统当中最容易学习的。
模版位于 /templates目录。模版典型的目录结构为:
/templates
/basic_template
/css
template_css.css
/images
index.php
template_thumbnail.png
templateDetails.xml
这是你创建一个模版需要的最少的文件，文件名必须和代码里面的名称保持一致。注意在 /images目录中没有写出图像的名称，这里一般放置任何的你模版需要的图片, 像背景，banners,等等。让我们大略看一下这些文件。
index.php: 这是模版布局文件。
template_css.css: 模版的 css 样式表。
templateDetails.xml: XML 格式的 metadata 文件。
template_thumbnail.png: 模版的缩略图, 通常大约为 140x90 像素。
布局文件
模版布局文件是一个 PHP 文件，不过大部分是HTML代码，只有少数的PHP代码片段。你不一定精通PHP才能写一个模版文件，你需要的就是能够知道该在哪里引用 Mambo的模版引擎。
模版布局文件主要由 HTML代码组成。在 HTML 框架里面你放入一些可以引用你的网站的数据库的“窗口”。通常是几个小的“窗口”用来放模块，一个大的“窗口”用来放(类似frontdoor的)组件。
鼓励使用 xHTML 语言来写模版。虽然大家还在争论 xHTML是否是未来的主流，但是它很好的符合 XML 标准, 而HTML 是一个更加宽松的标准。未来 Mambo 的版本将会越来越多的建立在 XML 上，因此现在使用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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6: <html xmlns="http://www.w3.org/1999/xhtml">
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(); ?> /* 显示当前网站路径 */
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>
让我们大略看一下主要的功能。假设你已经知道一点有关 HTML页面制作的知识，像head tags,body tags，tables,等等。
第 1 行: 定义一个有效的 XML 文件。
第 3 行: 避免直接的访问这一个文件，你的模版必须包含这一行。
第 5-6 行: 为页面建立 xHTML 标准。
第 8 行: 配置文件中的站点名称，显示到标题中。
第 9 行: _ISO 是一个特定的常量，用来定义网页的编码方式，它在你的语言文件定义。
第 10-15 行: $my-> id：如果一个用户登录到你的网站，它就是是一个非零的变量。一个用户登录后，WYSIWYG 编辑器就预先装载。你可以,如果你愿意, 总是预装载编辑器,但是通常匿名访客不需要添加内容。这对于你的站点正常浏览在减少了一点代码运行负担。
第 16 行: 插入一些 metadata 区段。
第 17 行: 装载 CSS 样式表。 $mosConfig_live_site 是一个站点绝对网址配置变量。
第 23 行: 在一个表格单元显示站点名字(跨越三栏)。
第 28 行: 载入在 "top" 位置中发布的任何模块。第二个参数的含义："-1",不依模板CSS的tablemodule定义，而以模块内部的风格定义显示；　　"0"或无参数：默认的而已方式（模板CSS）　　"1", 表示模块是水平排列。
第 33 行: 载入在 " left " 位置中发布的任何模块。这些模块将会在一栏中显示。
第 36 行: 载入组件到你的模版之内，组件由URL来定，例如 index.php?option=com_content将显示内容组件到这个区域中。
第 39 行: 载入在 "right" 位置中被发布的任何模块，这些模块将会在一栏中显示。
CSS样式表
TODO
XML 配置文件
TODO
缩略图
当你已经完成你的模版, 通过管理后台中的模版管理来安装它。预览站点，做一个屏幕截图，用你喜欢的图形编辑软件编辑，只保留浏览器中看到的部分。保持成png格式，大小大概140×90象素，保存到你的模版目录(/templates/basic_template)。
模版进阶
概述
这一个章包括一些高级功能,比方说隐藏模版栏和管理员模版设计。
隐藏模块
有时如果没有指定给某个区域任何模块，我们应该隐藏这一区域。可以用 mosCountModules 功能隐藏某些区域。
<?php if (mosCountModules( "right" )) { ?>
<td>
<?php loadModules( "right" ); ?>
</td>
<?php } ?>
如果 mosCountModules 函数返回大于 1 的值,表格单元格将会被显示。对于某些页面，如果" right" 位置没有放置任何模块，那“right”栏将不显示，这是一个很好的技术，可以增加特定页的水平宽度。
使用CSS类后缀
TODO
文件和函数参考
模版开发人员可以使用下列函数。
mosLoadComponents
语法:
mosLoadComponets($name )
装载一个组件，例如 "横幅广告"。
mosCountModules
语法:
mosCountModules($ position_name)
计算在 " position_name" 位置中显示模块的个数。
mosLoadModules
语法:
mosLoadModules($ position_name[,$style])
在当前页显示所有指定给 " position_name" 位置的模块。 " style " 参数可以是:
0=( 默认显示) 模块在栏中被显示。例子如下:

<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>
Module output
</td>
</tr>
</table>

1= 模块水平显示。每个模块在包装（wrapper）表格的单元格里面显示。例子如下:

<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td align="top">

<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>
Module output
</td>
</tr>
</table>

</td>
<td align="top">

</td>
</tr>
</table>
-1= 模块原始输出显示，没有标题。例子如下
Module 1 OutputModule 2 OutputModule 3 Output
-2= 模块以 X- Mambo 的格式显示。例子如下:

<div class="moduletable[suffix]">
<h3>Module Title</h3>
Module output
</div>

注意，在所有的情形中，可选择的类 " 后缀 " 可以通过模块参数来应用。
mosShowHead
语法:
<?php mosShowHead;() ?>
包含各种不同的header 标签，包括标题标签和一些 meta 标签。
mosMainBody
语法:
<?php mosMainBody;() ?>
显示由URL的option所决定的组件。
后台管理模版
现在管理员模版仍然正在编写。将来的版本中，站点和管理员的模版系统将会合并成同一个API。然而，下面一些注释作为叁考放在这里。
模块支持
你可以在管理后台模版里面，直接用mosLoadAdminModule载入模块，或在组（group）中, 向网站模版中一样，使用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 函数有一个参数, 模块名加上" mod_" 前缀。例子表格的第一个单元格载入Full Menu模块( 也就是,mod_fullmenu)
在第二个表格单元格里，载入所有的被指定给 " header " 的模块，第二个参数是风格设定:
0= 顺序地显示模块输出
1= 在"Tab " 中显示每个模块
2= 每个模块放在
标签显示
"header" 模块的格式完全由css控制。举例来说," wrapper1" 风格被定义为:
#wrapper1 div {
border: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px 5px 0px 5px;
display: inline;
}
模块放在简单的 div 标签中。为了在某一栏显示模块，你可以增加一个“宽度属性”并将“显示属性”换成 " inline " 。
下列的模块对包含在Mambo发行包里面。
mod_fullmenu
完整的菜单模块显示传统的 DHTML 后台管理菜单。内容部分和组件动态添加，其他菜单静态地定义。
mod_components
组件模块显示组件和其子菜单的完整列表。当安装了许多组件，多于DHTML菜单可以显示的时候，这个就有用了。
mod_latest
最新模块，显示最近添加内容条目。
mod_mosmsg
信息模块，显示URL传入的信息。
mod_online
用户在线模块，显示登录的用户的数目。
mod_pathway
路径模块，显示管理员所在位置。
mod_popular
最流行模块，显示最热门的内容条目列表。
mod_stats
菜单统计模块，显示一些关于菜单使用的统计。
mod_toolbar
工具栏模块，显示图标工具栏。
mod_unread
未读信息，显示尚未阅读的私人信息数目。
控制面板
管理后台的控制面板是一个单独的文件， cpanel.php，在模版里面引用。这是一个独立的文件，让你根据不同站点和用户的不同需要，定制个性化屏幕布局配置。
控制面板文件不是必须被引用。那样的话，控制面板将会只显示任何在 " 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图标。
6.安装模板
要想安装你刚刚写好的模板，只要将模板目录以zip格式打包，然后在后台选择：站点设置-〉模板管理，然后新建一个模板，最后将压缩包上传即可。
转载请保留出处，谢谢！此帖转自智联网信[http://bbs.13925.com/]原帖地址：http://bbs.13925.com/viewthread.php?tid=20615

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。