理解Joomla!模板
所有的站点模板(用来改变你网站的外观,就是前台模板)都可以在模板目录找到。例如,如果你的模板名叫"mytemplate",那么它必定在文件夹 "path-to-Joomla!/templates/mytemplate"。
所有的管理员模板 (用来改变站点管理员单元的外观,就是后台模板)能在目录administrator/templates下找到。例如,如果你的管理员模板名叫 "myadmintemplate",它必然放在文件夹 "path-to-Joomla!/administrator/templates/myadmintemplate"。
典型模板目录结构
多数模板至少有四个文件:
- index.php
- 提供模块和组件的显示和位置逻辑。
- template.css
- 处理模板的显示方面,包括边缘,字体,图像边框,列表格式等。
- templateDetails.xml
- 容纳模板的元信息并用于安装和模板管理。
- template_thumbnail.ext - 把 .ext 用图像格式扩展替代 (.jpg, .png, .gif)
- 在模板管理中,当光标停留在模板名字上时通常会显示一个 200x150 像素的图像。这给站点管理员应用模板前提供一个快照视图。
典型的Joomla! 1.5模板包括下列目录:
- css - 包含所有的 .css 文件
- html - 包含核心输出与模组的模板覆写文件
- images - 包含模板使用的所有图像
文件 templateDetails.xml file 容纳各种 模板管理 用于安装和维护的元数据。它有助于识别文件的不同单元。典型地,数据的每个单元缩进以使得文件更可读,但是缩进不是必须的。
基本细节
模板管理一开始显示的是可用模板列表和它们的基本细节。细节都来自于文件templateDetails.xml。
<install version="1.5" type="template"> <name>rhuk_milkyway</name> <creationDate>11/20/06</creationDate> <author>Andy Miller</author> <authorEmail>rhuk@rockettheme.com.com</authorEmail> <authorUrl>http://www.rockettheme.com</authorUrl> <copyright></copyright> <license>GNU/GPL</license> <version>1.0.2</version> <description>TPL_RHUK_MILKYWAY</description>
文件结构
所有和模板有关的文件都要列出。每个文件名包含从模板根开始的完整的路径信息。 管理员安装依照过该信息在安装过程中存储文件。
下面是rhuk_milkyway模板内列出的一小部分文件。
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<filename>images/arrow.png</filename>
<filename>images/indent1.png</filename>
</files>
语言
某些模板可能包括用以翻译模板静态文本的语言文件。下面就显示了两个语言文件。第一个是给用户查看的的转换文本的语言文件,标签内的第二个文件则是针对管理员的。
<languages>
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
<administration>
<languages folder="admin">
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
</administration>
模块位置
模板可用的 模块位置 须定义。
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
参数
模板也许会在模板管理中为管理员提供有关模板显示的选项。例如,模板 rhuk_milkyway就允许管理员改变边框颜色、背景色,并定义显示宽度。
下例显示添加参数和它的值。
<params>
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
<option value="white">White</option>
</param>
</params>
需要更多有关参数的信息,参见:
文件 index.php 是网站的骨架。 Joomla! 提交的每个页面都是由"index.php" 组合来自数据库的内容选择。
模板的index.php文件是代码的混合,既有提交时不会变化的代码,也有在提交前会改变的php代码。 设计过简单html网页的人该很熟悉这些代码:主要是2个部分 - <head> 和 <body>。index.php不同的是使用 php 代码来从数据库插入信息。
这里有个示例:
传统HTML头部:
<head>
<title>My Example Webpage</title>
<meta name="title" content="example" />
<link rel="stylesheet" href="www.example.com/css/css.css" type="text/css" />
</head>
Joomla! 的方式基本一致:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>templates/mytemplate/css/css.css" type="text/css" />
</head>
因而,除了在index.php文件内定义了头部,当中也嵌合了一些针对数据库的php 代码。该方法巧妙在这些脚本会给用户提交相同的代码。如果你查看joomla站点的代码,所有的<?php blah />将被常规html代码所替代。
良好的模板设计
Index.php应当尽量精简,因为每次载入新页面时它都将重复传送。 诸如样式等元素应当由存储在用户缓冲的css文件提交。本教程会讲解创建你的index.php文件的技术。
为何是index.php?
站点的主页历史上是Index.htm。因此当用户导航至 www.example.org, 网站服务器会提交 www.example.org/index.htm。因为 Joomla! 是PHP编写的, index.php 就是自动伺服文件。更进一步,当用户导航至joomla 网站,根目录的index.php 会重定向至当前默认模板的index.php。