joomla模板完美开发教程

Joomla模板制作基础教程#01前言课程简介：尽管网上的joomla模板很多，但是由于业务逻辑的不同，很难找到一款完全适合自己的模板。

创建一个joomla并不像你想象的那么难，可以说是零基础的同学，只要按照这个教程一步一步地学习，最后也可以制作一个不错的joomla模板，至少可以知道如何去修改现有的模板。

这个教程翻译自国外的一篇文章（囧，忘了具体是哪一篇了），在翻译的过程中根据国人的阅读习惯对教程进行了一些必要的修改，而且也补充了一些个人的理解。

在这个教程当中，你将学到joomla模板的基础知识，并在此基础上创建你的第一个joomla模板。

我们会一起快速地创建一个本地服务器来安装joomla，然后开始我们的joomla模板制作之旅。

译者简介：Rain（http://rain.gd），Joomla爱好者，在学习joomla的过程中深深地感受到joomla功能的强大，同时也发现国内joomla的学习资源很零散，joomla的中文社区不够活跃，新手在学习joomla的过程中如果遇到什么问题都很难及时地找到合适的解决方案。

就是在这种情况下，joomla粉丝网（）上线了，joomla粉丝网以非常简洁的论坛风格、清晰的版块设置、丰富的资源优势迅速被广大joomla爱好者所认可，现在，这个joomla中文社区逐渐地活跃了起来，每天都有宝贵的资源在这里分享。

所以，如果大家在学习这个课程的过程中遇到什么问题，可以去我的博客给我留言，也可以去joomla粉丝网（）寻求帮助。

另外，为便于大家交流，joomla粉丝网还开通了500人的超级QQ群（152949352）供大家交流，相信只要我们一起努力，就一定可以助推joomla在中国的发展，让更多的人感受到joomla的魅力！相关说明：课程适合对象：joomla新手，老手就可以飘过了。

课程学时：1-2小时课程要求：书中涉及的代码很少，所以希望初学者能够一字字地敲在自己的记事本上，这样对熟悉joomla的模板标签和以后对joomla的使用都是很有帮助的。

学习使用Joomla进行网站开发与管理随着互联网的迅速发展，网站已成为人们获取信息、交流和展示自己的重要渠道。

如今，越来越多的企业和个人开始意识到拥有自己的网站的重要性，于是网站开发和管理的需求也日益增加。

对于那些没有专业编程知识的人来说，学习一些简单易用的网站开发工具成为了首选，而Joomla就是其中一个被广泛应用的开源内容管理系统。

Joomla是一个强大的网站开发框架，拥有丰富的功能和灵活的扩展性。

从安装到配置，再到使用和管理，Joomla都提供了详细的指导文档和丰富的在线社区，使得学习和掌握该系统变得相对容易。

下面将介绍一些学习使用Joomla进行网站开发与管理的基础知识。

首先，学习Joomla前，你需要了解一些基本的网站开发常识，比如HTML、CSS和PHP等。

虽然Joomla提供了用户友好的后台管理界面，但了解这些基本知识仍然有助于你更好地理解和修改网站的布局和风格。

其次，了解Joomla的安装和配置是学习的第一步。

你需要下载最新的Joomla 安装包，并将其解压到你的Web服务器目录下。

通过访问该目录下的安装脚本，你可以根据提示完成Joomla的基本配置，比如数据库连接和网站名称等。

完成这一步后，你就可以通过访问你的网站URL来运行Joomla了。

接下来，你需要熟悉Joomla的后台管理界面。

通过登录后台，你可以访问和管理网站的各种功能和模块。

在后台管理中，你可以添加和编辑文章、创建分类和菜单、安装和管理扩展等等。

Joomla提供了丰富的功能和选项，你可以根据自己的需求来进行配置和调整。

在学习Joomla期间，你还应该了解一些常用的扩展和模板。

扩展是Joomla的强大功能之一，你可以通过安装和配置不同的扩展来为网站增加各种额外的功能。

比如，你可以安装一个图片展示的扩展，让你的网站更加生动和吸引人。

同时，模板也是非常重要的，它决定了网站的整体布局和样式。

Joomla提供了一些默认的模板，你也可以根据需要下载和安装其他的模板。

相关内容-->普及一下PHP的简单知识，，就是我们所熟知的程序基本打印功能，示例即是打印出隐号部分内容，那么上述index.php中的baseurl?>便是打印当前网站的绝对路径，language; ?>的意思便是当前网站的语言设置，如果我们在后台设置的网站前台语言为中文，那么通过浏览器查看源码得到的就是。

回到正题，index.php中，我们创建了top和bottom的两个模块位置，格式：，这里的top和bottom就是我们在templateDetails.xml预设的位置配置，另外还创建了一个非常重要的组件，那就是Joomla的基本组件：文章格式如：，大部分新手忽略了这个从而测试的时候发现不了文章内容。

保存好文件之后，刷新前台，即可看到被设定位frontpage的文章了！如下图，虽然难看了点：Joomla模板制作实战教程-创建各种模块位置2011-09-27 22:22在上一节(Joomla模板制作实战教程【一】-创建一个简单的模板)中我们创建了一个非常简单的模板，包含了默认的文章组件、top和bottom两个模块位置。

虽然看起来比较不养眼，但是我们掌握了Joomla模板的一个基本结构，这节我们要针对一个设计完整的设计稿进行规划。

首先需要解释一下“模块位置”的概念。

之前做的一些开发分享，总是会碰到一些似乎入门的朋友容易把模板和“模块”当成两回事，所以有必要把它们的概念讲清楚，Joomla的模板其实就相当于一个白纸，你需要在上面画上各种具体对象，它才能成为一真正模板，而我这里说的具体对象，不仅仅包括文章内容，它主要各种模块，诸如你看到的一条一条的新闻列表、排列整齐的图片列表、带输入用户名密码的登陆区域。

他们构成了一个真正的模板。

所以当你下载了一个新的纯模板，它安装在Joomla系统之后，是看不到你所看到的模板样子，它需要各种模块去、组件内容（如文章内容）填充这张空白的纸，模块又是组件的另一种表现形式。

joomla1.5模块开发和插件开发详解带实例 这是⼀个模块和插件开发实例详解⽂档,模块实现的是图⽚幻灯⽚⽅式切换,图⽚是⾃带的banner组件管理器来管理,对于图⽚可以只显⽰某⼀个分类下⾯的,切换⽅式可以选择多种,插件就是实现如何过滤⽂章中出现的email,凡是写了email的就⾃动过滤.从分析来看,是没有什么难度的,这⾥主要是开发的步骤,我在这⾥从开头到⼀个开发,打包成可以供所有joomla安装的zip⽂件为⽌,算是⼀个功能完成.　1.建⽴模块⽂件结构,样式如下图的⽂件结构Mod_banner模块⽂件夹,所有模块必须以mod_为前缀.banner就是模块名称Images⽂件夹,⽤来放样式中⽤的图⽚还有模块所需的jquery库,jquery插件,减少⽂件夹数量,就不单独建⽂件夹了.Tmpl 模块模版⽂件夹.Default.php 模版显⽰样式⽂件,必须的⽂件.Index.html 防⽌⽂件直接被调⽤,⽤于安全考虑.Helper.php 功能实现⽂件,⾥⾯主要写功能实现.Index.html 防⽌⽂件被直接调⽤,所有模块⽂件夹,⼦⽂件夹都应该加上这个⽂件.Mod_banner.php 模块⼊⼝⽂件,必须的⽂件Mod_banner.xml 参数配置和打包安装⽂件2.⽂件建⽴好以后,先来写xml这个⽂件吧,内容如下://后边是注释<?xml version="1.0" encoding="utf-8"?><install type="module" version="1.5.0"><name>Banner Change</name>//模块显⽰名称<author>Yoby</author>//作者<creationDate>2012 07</creationDate>//创建⽇期<copyright>Copyright (C) 2012 - 2020 Open Source Matters. All rights reserved.</copyright>//版权<license>/licenses/gpl-2.0.html GNU/GPL</license>//软件协议<authorEmail>logove@</authorEmail>//作者邮箱<authorUrl></authorUrl>//插件连接地址<version>1.5.0</version>//插件版本<description>Banner Change Module !</description>//模块功能描述<files>//⽤来描述模块的所有⽤到的⽂件,在安装的时候根据这个来复制到模块对应路径<filename module="mod_banner">mod_banner.php</filename> //⽂件<filename module="mod_banner">helper.php</filename><filename module="mod_banner">index.html</filename><folder>tmpl</folder> //⽂件夹,⼦⽂件和⽂件夹不⽤再次描述<folder>images</folder></files><params addpath="/administrator/components/com_banners/elements">//模块配置参数,addpath是⽤来加载组件⾥⾯定义的表单元素,这⾥是⼴告的分类<param name="change" type="list" default="0" label="Change Mode">//list列表类型表单元素,这⾥是⼴告切换样式,有3种默认,数字样式,按钮样式<option value="0">Default</option><option value="1">Number</option><option value="2">Button</option></param><param name="changetime" type="text" default="3000" label="Change Time (ms)"/>//⽂本框类型,这⾥是切换时间,微秒,1000为1秒<param name="adnumber" type="text" default="4" label="AD Number"/>//⼴告显⽰数量<param name="catid" type="category" section="com_banner" default="" label="Category" />//⼴告分类,这⾥⽤到了banner组件的⼴告分类<param name="width" type="text" default="468" label="AD Width"/>//显⽰⼴告宽度<param name="height" type="text" default="60" label="AD Height"/>//显⽰⼴告⾼度<param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix"/>//模块显⽰样式附加类</params><params group="advanced"> //⾼级配置,⼀般模块都加上这个配置参数,保持和官⽅⼀样标准<param name="cache" type="list" default="0" label="Caching" description="Select whether to cache the content of this module"> //是否使⽤缓存<option value="1">Use global</option><option value="0">No caching</option></param><param name="cache_time" type="text" default="900" label="Cache Time" description="The time before the module is recached" />//缓存时间</params></install>3.mod_banner.php⽂件和helper.php⽂件编写Mod_banner.php是⼊⼝⽂件,模块就是从这⾥执⾏的,第⼀⾏代码 defined( '_JEXEC' ) or die( 'Restricted access' );这是为了防⽌⽂件被其他程序随便调⽤,出于安全考虑,所有joomla组件插件模块等php⽂件都应该开头写上这⼀⾏代码.第⼆⾏代码 require_once (dirname(__FILE__).DS.'helper.php');加载helper.php功能⽂件,⾥⾯定义了这个模块所实现的功能,主要是数据处理,最后返回数据处理结果.第三⾏ $list = modBannerHelper::getList($params);这⾥是返回helper.php⾥⾯函数 getlist结果,这⾥是⼴告数据不⼀样的模块,这⾥可以写不同的返回结果,最后⼀⾏,require(JModuleHelper::getLayoutPath('mod_banner'));通过助⼿类提供的函数加载模版,必须这样写,参数就是模块名称.每个组件的⼊⼝⽂件⾄少包括第⼀⾏,最后⼀⾏.第⼆⾏只有⽤到助⼿⽂件才需要写.第三⾏可以根据实际功能来写,还可以添加更多代码来实现.Helper.php⽂件是⼀个类,定义格式class modBannerHelper{function custom(){//content}}⾥⾯的⽅法就是⽤来做数据处理或功能的,返回值供模版使⽤.4.default.php,模块模版⽂件,主要就是前台显⽰布局,有些模块把所有的功能处理也写在这⾥,这个⽂件是模块必须的,⼀般混写HTML和PHP代码.5.总结模块开发:A.模块配置在xml⽂件中定义,在helper.php或default.php中调⽤,通过$params->get('custom')读取配置参数在程序中应⽤.B.数据处理中的数据库连接步骤;$db = JFactory::getDBO(); //建⽴数据库连接$query = "select * from #__table"; //SQL查询语句$db->setQuery($query); //执⾏查询$rs = $db->LoadObjectList();//得到结果集对象C.对建⽴好的模块压缩成zip⽂件,就得到了标准模块.6.截图后台参数说明,change module显⽰样式切换,有三种;change time⾃动切换时间,默认3s;ad number设置⼴告数量,对于数字有效;item类别,不选择就是所有⼴告类;Ad width,⼴告宽度,尽量和图⽚宽度⼀样Ad height,⼴告⾼度;Css,这⾥可以⽤⼀个类来些样式⾼级参数是设置缓存和时间的.前台样式图,三种⽂章内容邮箱地址过滤插件开发过程:1.定义插件⽂件,分别是插件⽂件filter.php和安装配置⽂件filter.xml.2.先来写配置⽂件,基本上joomla配置⽂件都有相似的地⽅,内容如下<?xml version="1.0" encoding="utf-8"?><install version="1.5" method="upgrade" type="plugin" group="content">//定义插件为content<name>Filter</name>//插件名字<creationDate>2012-07-31</creationDate>//插件⽇期<author>Yoby</author>//作者<authorEmail>baixy@</authorEmail>//邮箱<authorUrl></authorUrl>//⽹址<copyright>Copyright (C) 2012 Open Source Matters. All rights reserved.</copyright> //版权<license>GUN</license>//软件协议<version>1.0</version>//软件版本<description>This is filter email plugin !</description>//描述<files><filename plugin="filter">filter.php</filename>//安装⽂件,还有其他的都需要列出来</files><params>//配置参数列表,本插件没有⽤到,但是预留⼀个id<param name="exid" type="text" default="" label="ID" description="description" />//#⽂本框</params></install>基本上⼀个配置安装⽂件就完成了.接着是定义插件,内容模式如下:defined('_JEXEC') or die;//防⽌其他程序加载$mainframe->registerEvent('onPrepareContent', 'plgContentFilter');//注册⼀个事件,这⾥的onPrepareContent是输出⽂章之前触发事件function plgContentFilter(&$row, &$params, $page=0) //触发的函数{if (is_object($row)) {//判断是否是对象记录集return plgFilter($row->text, $params);}return plgFilter($row, $params);}function plgFilter(&$text, &$params){$text = preg_replace("/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/",'',$text); //正则替换邮箱为空return true;}3.将这两个⽂件压缩成zip格式,不需要⽂件夹,直接压缩,然后就可以安装了.截图如下后台编辑带有邮箱⽂章前台显⽰⾃动替换掉了邮箱最后附上⽂件树形结构图;内容中代码没有使⽤编辑器,需要代码插件的下载附件吧.包括开发⽂档哦.下载地址:最详细的开发⽂档,例⼦说明⼀切,还有注释,只适合新⼿,⽜⼈绕⾏!by Yoby编辑。

学习使用Joomla扩展进行网站功能定制与开发的步骤第一章：理解Joomla扩展Joomla是一种流行的内容管理系统（CMS），它提供了许多扩展功能，用于扩展和定制网站的功能。

在开始学习Joomla扩展之前，首先需要了解Joomla的基本概念和结构。

Joomla由核心框架和扩展组成，扩展包括组件、模块、插件和模板。

组件用于管理和显示网站内容，模块用于在网站上展示特定的功能，插件用于增强网站的功能，而模板用于定义网站的外观和布局。

第二章：选择适合的扩展类型在进行网站功能定制和开发之前，需要根据具体的需求选择适合的扩展类型。

例如，如果想要添加一个新的功能页面，可以选择开发一个自定义组件；如果只想在某个特定位置显示一些内容，可以选择开发一个模块；如果想要增强某些功能的特定行为，可以选择开发一个插件。

第三章：学习Joomla扩展开发的基本知识在开发Joomla扩展之前，需要了解一些基本的开发知识。

这包括掌握HTML、CSS和PHP等前端和后端开发语言，熟悉Joomla的核心框架和API，以及了解数据库操作等相关知识。

第四章：创建自定义组件创建自定义组件是一种常见的网站功能定制和开发方式。

首先，在Joomla的扩展管理中创建一个新的组件，然后编写组件的代码和模板文件。

在组件的代码中，可以定义数据库表、添加前端和后端的控制器、视图和模型等功能。

同时，还需要对组件的菜单和权限进行配置，以便在后台管理中进行操作。

第五章：开发自定义模块自定义模块是展示特定功能的常用方式。

通过创建一个新的模块，可以在网站的不同位置展示自定义内容。

首先，在Joomla的扩展管理中创建一个新的模块，然后编写模块的代码和模板文件。

通过模块的代码，可以定义模块的输入参数和输出内容，以及实现模块的业务逻辑。

第六章：编写自定义插件自定义插件可以增强网站的功能和特性。

通过创建一个新的插件，可以在特定的事件或动作发生时执行自定义代码。

首先，在Joomla的扩展管理中创建一个新的插件，然后编写插件的代码。

Joomla网站搭建的基本操作指南第一章：介绍Joomla和其优势Joomla是一种开源内容管理系统，用于创建和管理网站的工具。

它是在PHP语言下开发的，具有用户友好的界面和丰富的功能。

Joomla被广泛应用于个人博客、企业网站和电子商务平台等各种类型的网站。

其优势包括灵活性，可扩展性，以及大量的模块和插件可供选择。

第二章：Joomla的安装在开始创建网站之前，我们先来了解如何安装Joomla。

首先，您需要下载Joomla的安装包并将其上传到您的网站主机。

然后，创建一个新的MySQL数据库，并将其相关信息输入到Joomla的安装向导中。

随后，按照向导的指示完成安装。

完成后，您将获得一个Joomla的管理员账户，可以用来管理您的网站。

第三章：Joomla的基本设置一旦安装完成，您需要进行一些基本设置来适应您的网站需求。

您可以设置网站的名称、描述和Logo等信息。

此外，您还可更改网站的默认语言和时区。

要进行这些设置，只需登录到Joomla的后台管理界面，转到全局配置部分，并按照您的需求逐一调整。

第四章：Joomla的模板选择与编辑Joomla提供了大量的模板供您选择，您可以根据自己的喜好和网站主题进行选择。

从Joomla官方网站或第三方网站下载所需模板，并将其上传到Joomla的模板目录中。

然后，在后台管理界面中，转到模板管理部分，选择您上传的模板并进行编辑。

您可以调整布局、颜色和字体等，以使其与您的品牌形象一致。

第五章：Joomla的内容管理Joomla的核心功能之一是内容管理。

您可以创建各种类型的内容，包括文章、图片、视频和音频等。

在后台管理界面中，您可以创建新的文章，并设置其标题、文本和元数据等信息。

此外，您还可以为文章添加标签和分类，以便更好地组织和检索。

第六章：Joomla的扩展功能Joomla的强大之处在于其丰富的模块和插件。

它们可以为您的网站增加各种功能，如社交分享、网站地图和网上支付等。

本节标题：实现组件配置添加配置参数Joomla 框架允许每个组件存储相应的参数 （allows the use of parameters stored in each component）。

创建如下文件：admin/config.xml<?xml version="1.0" encoding="utf-8"?> <config> <fieldset name="greetings" label="COM_HELLOWORLD_CONFIG_GREETING_SETTINGS_LABEL" description="COM_HELLOWORLD_CONFIG_GREETING_SETTINGS_DESC" > <field name="show_category" type="radio" label="COM_HELLOWORLD_HELLOWORLD_FIELD_SHOW_CATEGORY_LABEL" description="COM_HELLOWORLD_HELLOWORLD_FIELD_SHOW_CATEGORY_DE SC" default="0" > <option value="0">JHIDE</option> <option value="1">JSHOW</option> </field> </fieldset> </config>com_config 组件会读取这个文件。

现在我们仅仅定义了一个参数：分类标题是否在顶端显示 设置参数的最佳方式是在工具栏中添加一个“首选项”按钮。

Joomla模板制作教程在这个教程里,我们将一步步的制作一个具体的JOOMLA模板,JOOMLA是一个强大的开放代码的CMS(内容管理系统),并且她有着广泛的在线社团的支持.这里强调,我们将不使用table(表单);而是使用cascading style sheets (CSS) 建立模板.这种方式的最终目的是为了更加适应World Wide Web Consortium (W3C) 的标准.这也促进其更快的被装载load(不知是指浏览器还是搜索引擎)和更容易被搜索引擎收录.在后面的说明中我们再详细的讨论.本指导手册包括下面的章节:* 什么是JOOMLA模板? 解释怎样执行JOOMLA模板和比较没有内容的普通模板和CMS(内容管理系统)的模板有什么区别.* 本地编辑模板的过程.主要解释设计的过程与静态的web页面有什么不同* W3C标准和无表单设计.主要讨论在JOOMLA中进行无table(表单)设计和W3C标准有什么关系.* JOOMLA模板的组成.JOOMLA的模板文件组成和模板中那些过程被执行.* 使用cascading style sheets (CSS)布局.主要讨论如何使用CSS布局来取代table布局. * 默认JOOMLA样式表.介绍一些基本的JOOMLA的CSS应用.怎么调用强大的JOOMLA 内核.* Modules组件.怎样布置你的组件和一些技巧.* Menus菜单.使用CSS建立一些简单的类似于JS编出来的菜单.* Hiding Columns(隐藏列表).怎样控制Columns和隐藏一些没有内容的Columns.* 总结* 附录.一些有用的链接和资源.第一节:模板组成为了理解JOOMLA模板的目录结构, 我们将着眼于一个空白的JOOMLA模板. 不同的文件和文件夹组成了JOOMLA的一个具体模板. 这些文件必须被放置在/templates 的JOOMLA安装目录下. 比如,我们安装了两个模板,我们的目录结构看上去就是这样的:/templates/JS_Smoothportal/templates/JS_Synergy大家注意模板的名称必须就是/templates 目录下文件夹的名称,在这个例子中就是JS_Smoothportal 和JS_Synergy. 很显然,这些名字最好是能反应出模板的风格或者出处. 在一个具体模板的目录下,有以下关键文件:/JS_Smoothportal/templateDetails.xml/JS_Smoothportal/index.php这两个文件的文件名必须定义的和JOOMLA核心脚本预定义的完全相同.* templateDetails.xml(注意字母‖D‖大写) 一个XML格式的文件告诉JOOMLA核心在使用当前模板时的文件清单. 这里也描述了作者;文件名称;copyright信息;甚至包括模板使用的图片文件的清单. 最后一次使用该文件也就是我们在管理后台对该模板进行安装的时候.* index.php这个文件也是最重要的文件. 它对整站进行布局并且告诉JOOMLA内核何处放置组件和模块.它往往是一种PHP与(X)HTML的‖混合体‖.绝大多数的模板也使用了一些‖附加文件‖. 一般会像下面的定义(尽管JOOMLA内核没有要求):/JS_Smoothportal/template_thumbnail.png/JS_Smoothportal/css/template_css.css/JS_Smoothportal/images/ logo.png* template_thumbnail.png当前模板的浏览器截图(通常使用140*90像素尺寸). 安装模板完毕以后,这张图片会以‖缩略图‖的形式在后台模板管理器中展示.* css/template_css.css模板的CSS文件. 文件夹的路径是可以选择的,但是你必须对它进行指定. 注意文件名和路径是在index.php中指定的. 你可以取一个你喜欢的名字. 通常文件名反映使用状况, 我们在后面阐述这种命名方法在多个CSS文件使用时的优点.* images/logo.png在模板里面有很多图片文件. 一般的我们把这些图片归理至一个文件夹,而这个例子中我们只有一个文件logo.png你可以用管理后台安装zip格式的上传好的文件,也可以手动的在服务器上copy文件,但是你必须把他们放置在/templates目录下.templateDetails.xml格式templateDetails.xml 必须包括模板使用的所有文件. 它也包括了作者和版权信息等内容.在后台的模板管理器这些信息将会被展示,下面是一个XML文件的例子:<mosinstall type=‖template‖ version=‖1.0.x‖><name>YourTemplate</name><creationDate>March 06</creationDate><author>Barrie North</author><copyright>GNU/GPL</copyright><authorEmail> compassdesigns@这个E-mail 地址已经被防止灌水恶意程序保护，您需要激活Java Script 才能观看This e-mail address is being protected from spam bots, you need JavaScript enabled to view it </authorEmail><authorUrl></authorUrl><version>1.0</version><description> An example template that shows a basic xml details file </description><files><filename>index.php</filename><filename>js/ie.js</filename><filename>template_thumbnail.png</filename></files><images><filename>images/header.png</filename><filename>images/background.png</filename><filename>template_thumbnail.png</filename></images><css> <filename>css/base.css</filename><filename>css/norightcol.css</filename><filename>css/template_css.css</filename></css></mosinstall>让我们来解释这些行的意义:* mosinstall这个命令参数是安装程式的指令. 参数type=‖template‖ 告诉安装程序我们安装的是一个模板* name:定义你模板的名称. 这个名称会在安装模板的时候以目录夹名的形式被安装在模板目录下. 因此这个name不能包括文件系统不能处理的字符, 比如空格. 如果是手动安装, 你就必须在JOOMLA模板目录下手动创建一个与这个name一致的目录夹.* creationDate:模板建立的日期. 自由填写比如你可以填写May 2005, 08-June-1978, 01/01/2004 etc.* author:这个模板设计者的名称- 比如你的名字* copyright:版权信息的内容. 这里Licensing Primer for Developers & Designers 可以找到JOOMLA 相关的内容.* authorEmail:作者邮件信息Email.* authorURL:作者站点* version:模板版本* files:―files‖ 部分声明的是这个模板包括的PHP文件或者缩略图文件. 每个文件被列出在<filename>与</filename>之间,包括完整的路径. 它也可以包括一些附加文件, 这里的例子我们看到的是一个次模板使用的一个JS文件.* images:所有的图片文件在这个部分被列出. 所有图片文件在你模板目录下的完整路径将包含在<filename>与</filename>之间. 比如: 如果你的模板目录是‘YourTemplate‘,所有的图片文件在‘images‘下,它是在‘YourTemplate‘下的目录,那么有效的路径就是:<filename>images/my_image.jpg</filename>* css:样式表被显示与此部分. 同样也在<filename>与</filename>之间定义,这个定义对于多样式表将非常重要,我们将在下面的内容里讨论.The index.php究竟是那些内容在index.php文件中呢?它应该是一个关于网站次模板的布局外观的(X)HTML和PHP的混合体首先我们看到是下面一段有效模板的文档定义,文档类型的表述在这段顶部定义,这段代码在所有的页面文件首部都会出现,在例子模板的index.php顶部,我们看到下列代码:<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd‖><html xmlns=‖/1999/xhtml‖lang=‖<?php echo _LANGUAGE; ?>‖ xml:lang=‖<?php echo _LANGUAGE; ?>‖>一个具体页面要被浏览器呈现,文档类型描述―DOCTYPE‖是最基础的部分,特别的,如何让浏览器解读CSS. 为了给你一个直观的解释上面有这样一段:[W3C关于‖doctypes‖就是:] ―written by geeks for geeks. And when I say geeks, I don‘t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She‘s Got Mail.™‖(他妈的这句真拗口,字面意思:小丑写给小丑.我说的小丑,不是说像你我一样专业的网站,我是指一些除你我以外类似一个老太太收到了一封电子邮件—–anthax)总之,有几种文档类型你可以使用. 首先, doctype定义告诉浏览器如何解读页面.这里单词‖strict‖(严格的) and ―transitional‖(过度的)开始获取浮动范围(float:left and float:right 通常). 实质上,自从WWW诞生以来,不同浏览器对CSS都有不同的支持. 比如, IE浏览器不明白―min-width‖ 命令是设置一个最小页面宽度. 另外一方面你必须对CSS进行―hacks‖ .strict(严格的)的意思就是html(or xhtml)必须严格按照标准规范执行.而transitional(过渡的)意思就是默许一些和标准不同的语法.上面的设置可能会把事情搞复杂,比如存在一些‖双关‖模式语法,如果‖doctype‖定义的不合适或者错误了,浏览器不能解读,就会进入‖双关‖模式,尝试所谓的‖逆向兼容‖,类似于IE,浏览器会在版本较低时‖伪装页面‖.很不幸,大家偶尔也会在‖双关模式‖上发生错误,有下面两种情况:使用doctype 声明straight (严格) 模式来自W3C, 结尾标识为:DTD/xhtml1-strict.dtd除了这是一个WC3 server的链接. 你必须在上面的声明加上完整的路径.* Microsoft set up IE6 so you could have valid pages, but be in quirks mode. This happens by having an ―xml prolog‖ put before the doctype.<?xml version=‖1.0″ encoding=‖iso-8859-1″?>IE6.0的‖双关模式‖非常重要. 本指导手册都是为IE6+设计的, 我们必须确信它运行于标准模式下这将让我们后期的修改工作最小化.XML智能语言几乎没有竞争, 我们将关注JOOMLA的最新版本在此方面的变化.让网页符合标准, 当你看见‖valid xhtml‖ 标记出现并不是意味这复杂的代码和难以理解的标签. 它只是告诉你doctype类型, 是的,不用考虑太多,标准化你的站点,这取决与你怎样去做.一些有用的链接:* /css/quirksmode.html* /stories/doctype* /QA/2002/04/Web-Quality* /index.php/topic,7537.0.html* /index.php/topic,6048.0.html还有其他什么内容在index.php里面?让我们来看看头部的结构, 我们尽量将其简化, 但是一个完成的站点模板index.php中必须包含一些内容. 通常header里面是这样的:<?ph p defined( ‗_VALID_MOS‘ ) or die( ‗Direct Access to this location is not allowed.‘ ); ?> <!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd‖><html xmlns=‖/1999/xhtml‖ lang=‖<?php echo _LANGUAGE; ?>‖xml:lang=‖<?php echo _LANGUAGE; ?>‖<head><meta http-equiv=‖Content-Type‖ content=‖text/html; <?php echo _ISO; ?>‖ /><?phpif ($my->id) { initEditor(); } ?><?php mosShowHead(); ?><script type=‖text/javascript‖> </script><!–/web/css/fouc.asp–><link href=‖templates/<?php echo $cur_template; ?>/css/template_css.css‖rel=‖stylesheet‖ type=‖text/css‖ media=‖screen‖ /></head>这些都是什么意思呢?<?php defined( ‗_VALID_MOS‘ ) or die( ‗Direct Access to this location is not allowed.‘ ); ?>这里是判断文件是否可以被访问.<?php defined( ‗_VALID_MOS‘ ) or die( ‗Direct Access to this location is not allowed.‘ ); ?> <!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.d td‖><html xmlns=‖/1999/xhtml‖ lang=‖<?php echo _LANGUAGE; ?>‖ xml:lang=‖<?php echo _LANGUAGE; ?>‖<head>在上面这段. ―<?php echo _LANGUAGE; ?>‖ 设定了整站的语言.<meta http-equiv=‖Content-Type‖ content=‖text/html; <?php echo _ISO; ?>‖ />设定使用的字符集, _ISO 是一个我们用来定义编码字符集的特定常量.<?php if ($my->id) { initEditor(); } ?>当一个用户登录你的网站,判断变量my是否‖非零‖. 如果一个注册用户登录,那么一个默认的‖所见即所得‖编辑器被自动装载,当然是在你的允许设置下,你也可以事先就装载编辑器, 但是非法的或者一般游客是没有必要的. .<?php mosShowHead(); ?>Header信息是全局配置的集合. 它包括了下面的标签(默认安装):* <title>A Complete Guide to Creating a Joomla Template </title>* <meta name=‖description‖ content=‖Installing Joomla, doctype and the blank joomla template‖ />* <meta name=‖keywords‖ content=‖installing joomla, joomla doctype, blank joomla tempate‖ />* <meta name=‖Generator‖ content=‖Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved.‖ />* <meta name=‖robots‖ content=‖index, follow‖ />* <link rel=‖shortcut icon‖ xhref=‖images/favicon.ico‖ /><script type=‖text/javascript‖> </script>To stop a bug, that being a flash of un-styled content. Details courtesy of Blue Robot. Note this can be any script file, so if we add one, we can remove this line.<link href=‖templates/<?php echo $cur_template; ?>/css/template_css.css‖rel=‖stylesheet‖ type=‖text/css‖ media=‖screen‖ />这行是模板CSS样式文件的链接. PHP 代码<?php echo $cur_template; ?> 返回当前模板名称. 这种用变量传递模板名称的方法很灵活,不用在你手工设置模板的时候还要再来修改具体的模板名称.你也将看到, 在temmplate_css.css 文件里, 我们将使用@import 来处理Netscape 4 访问时的异常. 使用老版本的浏览器不能打开CSS脚本,如果你要求兼容老版本的浏览器, 我们将要有很多CSS HACKS.一个空白JOOMLA模板的BODY这会非常简单,准备好了么?<body><!– 1 –><?php echo $mosConfig_sitename;?><!– 2 –><?php mospathway()?><!– 3 –><?php mosLoadModules(‘top‘);?><!– 4 –><?php mosLoadModules(‘left‘);?><!– 5 –><?php mosMainBody();?><!– 6 –><?php mosLoadModules(‘right‘);?><!– 7 –><?php include_once( $mosConfig_absolute_path .‘/includes/footer.php‘ );?></body></html>这里是这样一个顺序:1. 站点名称2. pathway3. top module4. left modules5. main content6. right modules7. 默认的footer module最后是尽可能的实现‖语意相关‖. 考虑到不同的‖浏览对象‖, 浏览器;网络蜘蛛;或者是一般浏览者. 这方面的思考是站点‖易接近‖的基础.没有什么比‖语意相关‖更重要. 如果设计者随意的定义自由的模块, 你会有很多麻烦. 关于CMS站点的重要考虑, 模板是管理内容布局的不二选择. 这也是很多设计者努力让其站点‖有效化‖的原因.。

Joomla模板开发作者ZMAX程序人在本节中我们将详细介绍模板的index.php文件。

如果你做过web开发，那么你会有这样的几个问题：1.怎样给一个模板增加css2.怎样给一个模板增减js3.怎样在我的模板中使用JQuery库4.joomla模板是用什么语言开发的5.joomla模板和普通的html文件有什么不同看代码（因为代码太长，故将一个index.php文件分成3部分来讲解）/*** @package Joomla.Site* @subpackage Templates.beez_20* @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.* @license GNU General Public License version 2 or later; see LICENSE.txt*/// No direct access.defined('_JEXEC') or die;jimport('joomla.filesystem.file');// check modules$showLeftColumn = ($this->countModules('position-1') or$this->countModules('position-2') or$this->countModules('position-3'));$showRightColumn = ($this->countModules('position-5') or$this->countModules('position-6') or$this->countModules('position-7'));$showBottomBox =($this->countModules('position-8') or$this->countModules('position-9') or$this->countModules('position-10'));JHtml::_('behavior.framework', true);// get params$color = $this->params->get('templatecolor');$logo = $this->params->get('logo');$navposition = $this->params->get('navposition');$app = JFactory::getApplication();$doc = JFactory::getDocument();$templateparams = $app->getTemplate(true)->params;$doc->addStyleSheet($this->baseurl.'/templates/system/css/system.css' );$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/cs s/position.css', $type = 'text/css', $media = 'screen,projection'); $doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/cs s/layout.css', $type = 'text/css', $media = 'screen,projection'); $doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/cs s/print.css', $type = 'text/css', $media = 'print');$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/po sition/css/topbar.css', $type = 'text/css');$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/po sition/css/head.css', $type = 'text/css');$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/po sition/css/footer.css', $type = 'text/css');$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/po sition/css/mid.css', $type = 'text/css');$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/po sition/css/page.css', $type = 'text/css');/*$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/ position/css/print.css', $type = 'text/css');*/$doc->addStyleSheet($this->baseurl.'/myjs/lightbox/css/lightbox.css', $type = 'text/css');代码解释：第9行代码： defined('_JEXEC') or die 这个是joomla的安全机制。

目录Developing an MVC Component/1.Introduction (18)Notes (18)Requirements (18)Migrating Joomla! 2.5 to Joomla! 3.0: (18)New MVC in Joomla! 3.0 (20)Developing an MVC Component/2.Developing a Basic Component (21)Notes (21)How to add a component to Joomla! (21)Installing the Hello World! Component (23)File Details (24)Component Contents (26)Developing an MVC Component/3.Adding a view to the site part (28)Note (28)Adding a View to Hello World! (28)Updating the Hello World! Component (29)File Details (30)Code Explanation (36)helloworld.php (36)controller.php (37)view.html.php (38)default.php (39)helloworld.xml (39)Component Contents (39)Developing an MVC Component/4.Adding a menu type to the site part (42)Note (42)Adding a Menu Item to Hello World (42)Updating the Hello World! Component (43)File Details (44)Code Explanation (46)default.xml (46)helloworld.xml (47)Component Contents (47)Developing an MVC Component/5.Adding a model to the site part (49)Note (49)Adding a Model to Hello World! (49)Updating the Hello World! Component (50)File Details (50)Code Explanation (56)helloworld.php (56)view.html.php (56)Component Contents (57)Developing an MVC Component/6.Adding a variable request in the menu type (60)Introduction (60)Adding a variable request in the menu type (60)Packaging the component (66)Developing an MVC Component/ing the database (68)Introduction (68)Using the database (68)Adding a new field type (72)Display the chosen message (76)Packaging the component (81)Developing an MVC Component/8.Basic backend (83)Introduction (83)Basic backend (83)Create the general controller (84)Create the view (86)Create the model (91)Packaging the component (93)Developing an MVC Component/9.Adding language management (98)Introduction (98)Adding language translation in the public site (98)Adding language translation when managing the component (99)Adding language translation when managing the menus in the backend (100)Language File Location Options (100)Packaging the component (103)Developing an MVC Component/10.Adding backend actions (109)Introduction (109)Adding a toolbar (109)Adding specific controllers (115)Adding an editing view (118)Adding a model and modifying the existing one (123)Packaging the component (128)Developing an MVC Component/11.Adding decorations to the backend (135)Introduction (135)Adding some icons (135)Modifying the views (136)Adding the filters (148)Modifying the main entry file (153)Adding some strings in the language file (154)Packaging the component (156)Developing an MVC Component/12.Adding verifications (163)Introduction (163)Verifying the form (client side) (163)Verifying the form (server side) (176)Packaging the component (178)Developing an MVC Component/13.Adding categories (185)Introduction (185)Modifying the SQL (186)Modifying the form (187)Modifying the menu type (189)Managing the submenu (192)Getting the associated category titles (200)Updating the Layout (203)Adding some ACL (207)Adding some translation strings (208)Packaging the component (210)Developing an MVC Component/14.Adding configuration (217)Introduction (217)Adding configuration parameters (217)Using configuration parameters as default value (222)Modifying the SQL (225)Modifying the backend (228)Modifying the frontend (231)Adding some translation strings (238)Packaging the component (240)Developing an MVC Component/15.Adding ACL (247)Introduction (247)Adding Access Control (247)Minimal ACL requirements at the component level (248)Add the 2 minimal component level actions to access.xml (248)Add the permissions fieldset to config.xml (249)Add the 'Options' toolbar button when user is authorised for it (250)Restrict the access to the component's backend to authorised usergroups (251)Adding more actions, also at category level and item level (251)Describing the actions you want to control the access to (252)Adding the setting of permissions in the component's Preferences (253)Displaying only the right toolbar buttons (255)Restricting access to the component (265)Add the asset_id column to the database table (266)Restricting access to the messages (268)Setting the permission values in the assets table (275)Showing the setting of permissions on the item level (280)Adding language strings (286)Further reading (288)Packaging the component (289)Developing an MVC Component/16.Adding an install-uninstall-update script file (296)Introduction (296)Creating the extension script file (296)Adding some language keys (300)Packaging the component (302)Developing an MVC Component/17.Adding a front-end form (310)Introduction (310)Functionality (310)Approach (311)Updating the Database (312)Adding a menu item (313)Displaying the new form view (314)Handling the form HTTP POST (326)Configuration Parameters (334)Display the new fields on the Admin list form (337)Updated Language Strings (352)Packaging the Component (357)Developing an MVC Component/18.Adding an Image (364)Functionality (364)Approach (364)Updating the Database (365)Admin Helloworld Edit Form (366)Admin Helloworlds List View (384)Site Helloworld Display (393)Site Helloworld Form (398)Updated Language Strings (414)Packaging the Component (419)Developing an MVC Component/19.Adding a Map (427)Page Under Review! (427)Functionality (427)Approach (427)Updating the Database (428)Admin Helloworld Edit Form (429)Admin Helloworlds List View (434)Site Helloworld Display (444)Map Javascript and CSS code (453)Updated Language Strings (458)Packaging the Component (462)Using Google Maps (469)Developing an MVC Component/1.IntroductionThis is a multiple-article series of tutorials on how to develop a Model-View-Controller Component for Joomla! Version.Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the Articles in this series).∙If you are new to Joomla!, please read Absolute Basics of How a Component Functions.∙This tutorial is adapted from Christophe Demko: Developing a Model-View-Controller Component/2.5o WARNING: this tutorial will not repeat the comments of Demko. To see them, please have a look to the original tutorial for Joomla! 2.5:Developing an MVC Component for Joomla! 2.5 - IntroductionYou need Joomla! 3.0 (with PHP, MySQL and Apache/Microsoft IIS) or greater for this tutorial. I gathered a lot of information and then I started to migrate the component of the new Joomla! 2.5 to 3.0. Below is some important information used for migration. Please see also all the information about migration Upgrading Versions. Use "display_errors On" to help with debugging errors.Remember that you need to add Legacy at any place where you are directly extending JModel, JView or JController. If it is indirect (like through JModelList) you don't have to, it's already taken care of. Other than that and the fact that, as announced long ago, deprecated code has been removed (I'd guess that JParameter is the biggest impact), extensions should only need minor changes ... Although youwill want to look at the output changes that Kyle is working on. Of course, if you are building standalone platform applications, the new MVC and JApplicationWeb/JApplicationCLI are completely the way you should work and the nice thing about the way we have done this is that the new packages are already right there on your server having arrived with the CMS. (Elin in development list)Samples: DS Since we've removed the DS constant in 3.0, we need to replace the uses of the constant in com_media. The most unobtrusive change is to simply replace it with PHP's DIRECTORY_SEPARATOR constant since DS is an alias to that. However, the recommended way to do it is to simply use the slash, i.e. 'components/com_example/models/example.php' instead of'components'.DS.'com_example'.DS.'models'.DS.'example.php'. This is windows safe.(joomlacode)"Version 12.1 of the platform introduced a new format for the model-view-controller paradigm. In principle, the classes JModel, JView and JController are now interfaces and the base abstract classes are now JModelBase, JViewBase and JControllerBase, respectively. In addition, all classes have been simplified, removing a lot of coupling with the Joomla! CMS, that was unnecessary for standalone Joomla! Platform applications." ... Joomla! Platform Manual MVCDeveloping an MVC Component/2.Developing a Basic ComponentThis tutorial is part of the Developing a MVC Component for Joomla! 3.x tutorial. You are encouraged to read the previous parts of the tutorial before reading this.If you have used Joomla! before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.You can follow the steps below to create the Hello World! component, or you can directly download the archiveHere are some slides based on this documents to explain how to create basic to advance Joomla! components.Joomla! Basic Component HelpJoomla! Advance Component HelpThere are also a number of videos which accompany steps in the tutorial, beginning withStep 1, Developing a Basic Component and you can access the slides which are used in the series of video presentations at Slides.Next, inside this directory we need to create some files. Using your preferred file manager, create the following files; as you create the files, add the source code for each file which is found in File Details.Note - You should see a message letting you know if the installation succeeded or failed.You can test this basic function of the component by entering the Hello World! page for the site and administrator portions of your Joomla! website.You can also notice that the Hello World! component is visible in the administrator site of your Joomla installation underthe Components menu.admin/sql/updates/mysql/0.0.1.sql is an empty file allowing to initialise schema version of the com_helloworld component. helloworld.xmlsite/helloworld.phpadmin/helloworld.phpindex.htmlcommon to all foldersAt this point in the tutorial, your component should contain the following files:Developing an MVC Component/3.Adding a view to the site partUpdating the Hello World! ComponentTo update the Hello World! Component in the Joomla! website, please follow the same steps for the original installation.site/helloworld.php (Note that some browsers may not copy and paste highlighted text correctly into a text editor. If you find this, then please try a different browser).site/controller.phpsite/views/helloworld/view.html.phpsite/views/helloworld/tmpl/default.phpindex.html Note - the same code is used for all foldershelloworld.xmlIn case you were curious as to why this works the way it does. helloworld.phpThe controller might decide to redirect the page, usually after a task like 'save' has been completed. This last statement takes care of the actual redirection.The main entry point, helloworld.php, essentially passes control to the controller, which handles performing the task that was specified in the request. Our component specific controller doesn't do anything more than the parent class already does, which is why our controller class is empty.controller.phpWhen no task is given in the request variables, the default task will be executed. It's the display task by default. The JControllerLegacy class has such a task. In our example, it will display a view named HelloWorld.view.html.phpThe view sets up the text to be output and then calls the base display class. JViewLegacy is a base class for a Joomla! View. In our case, this method will display data using the tmpl/default.php file.Caveat: If your view needs to load or otherwise embed individual JavaScript code, do not do that in the view, as the code might not get included when caching is enabled. Load those scripts in the controller instead. See the related issue on the issue tracker.default.phpThis template file will be included by the JViewLegacy class. Therefore, here, $this refers to the HelloWorldViewHelloWorld class. helloworld.xmlUpdates the version number.Tells installer application to add controller.php and the views/directoryAt this point in the tutorial, your component should contain the following files:Developing an MVC Component/4.Adding a menu type to the site partIn this article we will cover how to add a menu item to a basic Joomla! component. For this example we will be continuing our work onthe Hello World! component.There are several ways to update a Joomla! component. As with the last tutorial, we will focus option 2.Updating the Hello World! ComponentTo update the Hello World! Component in the Joomla! website, please follow the same steps for the original installation.After the component has been updated, we will be able to add a Menu Item to it. This will allow us to access our component a menu rather than having to remember what to type into the address bar. We'll do this using the Menu Manager of Joomla!.You should now be able to access the component through the menu that you just created.site/views/helloworld/tmpl/default.xmlhelloworld.xmlIn case you were curious as to why this works the way it does.default.xmlNote - For the moment the strings won't be translated in the administrator interface. We will see in a later article how translation is performed.helloworld.xmlUpdates the version number.At this point in the tutorial, your component should contain the following files:Developing an MVC Component/5.Adding a model to the site partUpdating the Hello World! ComponentTo update the Hello World! Component in the Joomla! website, please follow the same steps for the original installation.site/models/helloworld.php。