打zZ~瞌睡 Menu

Joomla教程(二)—— Joomla模板

前言:了解本节及以后的内容之前,最好先了解一下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模板架构

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之间的关系

模板架构、代码结构和URL之间的关系

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