前言:了解本节及以后的内容之前,最好先了解一下MVC架构。
现在我们来介绍一下Joomla的模板结构,介绍之前我们先将Joomla的友好URL关掉,有助于我们理解Joomla的渲染逻辑。
1. 关闭友好URL
进入后台 > System > Global Configuration,修改SEO Settings > Search Engine Friendly URLs为No,到前台检查页面,我们发现URL变成了参数的形式。
http://joomla.liubing/index.php?option=com_content&view=category&id=64&Itemid=411
2. 模板文件结构
我们先来看一下Joomla的模板结构,再来讲上面URL中各个参数的意思。Joomla启用的模板可以在后台Extension > Template Manager中管理,打开这个管理界面我们可以看到Joomla的模板列表,Location表示是前台(site)和后台(Administrator)模板,Default代表当前使用的是哪个模板。如现在后台使用的是isis – Default,前台使用的是protostar – Default模板,其他参数我们后续讲解。
打开文件目录JOOMLAROOT > templates > protostar,可以看到如下文件
# 目录
css/ # 模板使用的css文件
html/ # 各部分(包括组件、模块、分页)使用的模板
images/ # 模板使用的图片文件
img/ # 模板使用的图片文件(逻辑上看,这两个图片文件夹没有什么区别,暂不深究)
js/ # 模板使用的javascript文件
language/ # 模板使用的语言文件
less/ # less文件夹,供css使用
# 文件
index.php # 模板首页文件,保存模板的结构
error.php # 错误文件,用于程序错误时显示
favicon.ico # favicon文件
component.php # 这个文件与index.php功能类似,只是只显示组件内容,而不包括其他模块
templateDetails.xml # 模板配置文件,调整模板参数或安装模板时用到
template_preview.png # 模板预览图
template_thumbnail.png # 模板预览缩略图
3. 模板架构
在Joomla中,一个页面内只能有一个主要内容(组件:component),其他均属于模块(module),如下图所示

Joomla模板架构
4. 从代码分析模板架构
打开index.php,除了简单的HTML和php外,我们还能看到以下几类语句
jdoc:include type="head"
jdoc:include type="modules" name="position-1" style="none"
jdoc:include type="message"
jdoc:include type="component"
这些是Joomla引入内容的方式,Joomla模板引擎会解析这些语句,抓取对应的内容渲染到模板中,组成一个页面。type指明要包含的内容的类型
head # 页面头文件(包括css/javascript/meta标签),注意这里不是指网站内容的头部
modules # 模块
message # 提示消息
component # 组件
从代码中也可以看出,页面里只有一个component,同时有许多个modules。事实上message也是一个module,只是是一个比较特殊的module。
5. 从URL分析模板内容
在Joomla的URL中,重要的信息通常包含两部分:组件信息、菜单ID(当然以后会遇到更多的情况,这里我们只重点介绍组件和菜单),如第一点我们看到的URL
option=com_content # 该页面内要使用的组件,后台对应到Components中,文件使用JOOMLAROOT > components中的文件
view=category # 组件内要使用的view
id=64 # view对应的ID
Itemid=411 # 该页面对应的菜单ID
所以第一点提到的URl的意思是告诉Joomla:当前页面是要显示一个文章分类页面,分类ID是64,对应的菜单ID是411,打开后台Menus > All Modules,就可以看到菜单ID为411的菜单Content Modules。
6. 模板架构、代码结构和URL之间的关系
下面我们用一张图把模板架构、代码结构和URL之间的关系表示出来,帮助大家理解。

模板架构、代码结构和URL之间的关系
7. 菜单ID非常重要
可能你会有疑问:每个页面要显示什么模块是怎么定义的呢?
在Joomla的每个URL中,都应该有菜单ID,它不仅仅只是一个菜单信息,而且,哪个页面要显示哪些模块就是通过这个菜单ID来判断的。下次我们准备讲一下各部分的渲染方法。