因为是边阅读边翻译,完成要好几天,我也不能保证每天都有时间发新的上来,不过我会陆续把书中有关模板的内容翻译出来发到这里------不要催我,我还要干别的事.
自做MAMBO模板
利用已经安装的模板，我们在上面根据自己的需要来修改
下面以
mambo安装时自带的waterandstone 模板为例来说明。这个模板是针对1024宽度的。
一. 模板文件的结构
网站模板文件位于网站根目录下的templates目录中.浏览到这个目录,复制waterandstone目录,重新命名为personal.这样你就得到了新的模板文件personal.
在后台网站---模板管理---网站模板中,你会看到两个waterandstone模板.这是因为刚才我们复制的模板是复制waterandstone的,我们仅仅改了模板的存储目录
名,为了让模板的名称显示个性化,我们要在模板文件所在目录下的templateDetails.xml文件.用记事本或其他文本编辑器打开,看到以下内容
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="4.5.3">
<name>personal</name>
<creationDate>26/11/05</creationDate>
<author>guofeng</author>
<copyright>GNU/GPL</copyright>
<authorEmail>
ahguof@yahoo.com.cn</authorEmail>
<authorUrl>
http://xyws.bbs.com</authorUrl>
<version>1.1</version>
<description>The Water and Stone Grey Template optimized for 1024px width resolution for use with any type of website with easy customization</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/bg_body.jpg</filename>
<filename>images/bg_header.jpg</filename>
<filename>images/bg_inside.jpg</filename>
<filename>images/bg_leftcol.jpg</filename>
<filename>images/bg_mainlevel.gif</filename>
<filename>images/bg_mainlevel_right.gif</filename>
<filename>images/bg_module.jpg</filename>
<filename>images/bg_module_contenttop.jpg</filename>
<filename>images/bg_pagenav.jpg</filename>
<filename>images/bg_spacer.gif</filename>
<filename>images/bg_topright.jpg</filename>
<filename>images/img_header.jpg</filename>
<filename>images/indent1.png</filename>
<filename>images/indent2.png</filename>
<filename>images/indent3.png</filename>
<filename>images/indent4.png</filename>
<filename>images/indent5.png</filename>
<filename>images/indent6.png</filename>
<filename>images/logo.gif</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
上面的是已经改过了的,分别对应后台管理部分显示的信息如下
名称 <name>personal</name>
日期 <creationDate>26/11/05</creationDate>
作者 <author>guofeng</author>
<copyright>GNU/GPL</copyright>
<authorEmail>
ahguof@yahoo.com.cn</authorEmail>
作者网址 <authorUrl>
http://xyws.bbs.com</authorUrl>
版本 <version>1.1</version>
后台出现的缩略图是模板目录下的template_thumbnail.png文件.
接下来的部分是模板包括的所有其他文件和用到的图片(images 目录下).核心是模板目录下的index.php和css目录下的template_css.css文件.
我们的有关布局和页面风格化的工作几乎都围绕这两个文件展开.
二.修改index.php
首先分析index.php文件,我们称他是模板核心文件,该文件是个xhtml文件.
<?php
defined( '_VALID_MOS' ) or
die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language
file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
文件以阻止直接访问本文件开头,然后约定页面字符编码,接着从<head> </head>部分获取META信息,meta信息由mosShowHead()
PHP函数产生.规定
模板的CSS路径.代码如下
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
?>
<meta http-equiv="Content-Type"
content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/waterandstone/css/template_css.css"
rel="stylesheet" type="text/css"/>
</head>
注意其中的
<link href="<?php echo $mosConfig_live_site;?>/templates/waterandstone/css/template_css.css"
rel="stylesheet" type="text/css"/>
继续往下,还有象这样的语句.
<a href="index.php">
<img src="<?php echo $mosConfig_live_site; ?>
/templates/waterandstone_green/images/logo.gif"
alt="logo image" border="0" align="top" />
</a>
这其实指向的是原来复制的waterandstone_green模板目录中的CSS文件.查找文件中的所有waterandstone字符,把waterandstone替换成我们自己的
目录名personal.
继续往下,到下面才是规定前台页面显示的开始
<body class="waterbody">
<div align="center">
<div id="container">
<div id="containerbg">
从上面开始,文件大多是HTML元素,还有一些象下面<?php ?>中的PHP代码
<!-- start left column. -->
<div id="leftcol">
<?php mosLoadModules('left'); ?>
</div>
<div id="leftcolmenu">
<?php mosLoadModules('user1'); ?>
</div>
<!-- end left column. -->
文件中还有部分 象<!-- -->这样的注释.这个让你明白代码都在干些什么.上面节选的代码片段就是页面左侧栏,包含在<div>和</div>之间.并且指
定id属性为leftcol,CSS样式表通过这个id属性把与它对应的页面元素风格化.深入的再考察下这个div元素,函数mosLoadModules('left')输出的恰好
是div元素的值.
你几乎可以猜出mosLoadModules('left')起什么作用----他把mambo中所有置于left位置的模块统统显示出来.
再往下看,你还可以看到其他的php函数.如
<?php
if (mosCountModules('user2') >= 1 OR
mosCountModules('user3') >= 1 ) {
?>
...
<?php mosPathWay(); ?>
...
<?php mosMainBody(); ?>
从函数名就可以明显看出他们要做什么.mosCountModules()函数返回指定位置的模块数.当真正包含模块时指定的位置才被用来显示包含的模块,否
则指定区域会留空,亦及页面会忽略这个指定的位置.
mosPathWay()函数显示出当前浏览页面的路径,诸如
Home--Blog-Getting Started--Welcome to Mambo
页面的主体区域是由mosMainBody()函数来实现显示的.
页面显示的逻辑判断
有一点你要注意的是,前台页面从模板文件index.php的<body>标签开始显示,在这个模板文件中几乎没有逻辑上的判断.这里只有两个 if 判断语句,
他们只是用于检查指定位置是否真的有包含模块在这里显示.模板index.php中没有什么逻辑的东西要你添加进来,你是通过模块管理和菜单管理在后台管
理中指定很多有关网站前台页面显示和程序运行的规则的-----在哪个页面哪个位置显示哪些模块,根据
用户类型限定具体的菜单项是否显示,等等.
另外,选择不同的页面应用不同的模板是另一个有关页面显示逻辑判断的层面,要实现这样的效果,需要你对mambo的内部工作非常熟悉.
