Joomla模板入门教程.docx

Joomla 模板教程（认真看，入门和理解joomla很重要） 目 录页码 1. 怎样在templateDetails.xml文件中为模板添加语言文件声明 52. 怎样在模板中自定义模块结构(module chrome) 63. 原生模块结构(module chrome)类型及对应的HTML输出 84. 什么是模块结构(module chrome)? 95. 什么是jdoc声明 126. 什么是模块位(module positions) 137. 怎样计算判断指定模块位中的模块数量 158. 怎样同时判断多个模块位中的模块数量 159. 怎样替换默认模板(rhuk_milkyway)的logo 1710. templateDetails.xml文件详解 1811. 模板参数详解 - 什么是模板参数 2212. 模板参数详解 - 怎样定义模板参数 2313. 模板参数详解 - Joomla标准参数类型 2514. 模板参数详解 - Calendar参数类型 2615. 模板参数详解 - Category参数类型 2716. 模板参数详解 - Editors参数类型 2917. 模板参数详解 - Filelist参数类型 2918. 模板参数详解 - Folderlist参数类型 3119. 模板参数详解 - Helpsites参数类型 3220. 模板参数详解 - Hidden参数类型 3321. 模板参数详解 - Imagelist参数类型 3422. 模板参数详解 - Languages参数类型 3523. 模板参数详解 - List参数类型 3624. 模板参数详解 - Menu参数类型 3725. 模板参数详解 - Menuitem参数类型 3726. 模板参数详解 - Password参数类型 3827. 模板参数详解 - Radio参数类型 3928. 模板参数详解 - Section参数类型 4029. 模板参数详解 - Spacer参数类型 4130. 模板参数详解 - Text参数类型 4231. 模板参数详解 - Textarea参数类型 4232. 模板参数详解 - Timezones参数类型 4333. 模板参数详解 - Usergroup参数类型 4434. 模板参数详解 - 模板参数的保存方式 4535. 模板参数详解 - 怎样获取并使用模板参数值 4636. 模板参数详解 - 怎样创建自定义模板参数类型 I 4737. 模板参数详解 - 怎样创建自定义模板参数类型 II 4838. 模板参数详解 - 怎样创建自定义模板参数类型 III 4939. 模板参数详解 - 正则表达式的使用 I 5140. 模板参数详解 - 正则表达式的使用 II 5241. 模板参数详解 - 正则表达式的使用 III 5342. 模板输出覆盖 5443. 模板输出覆盖 - 什么是MVC 5544. 模板输出覆盖 - 模板与布局 5545. 模板输出覆盖 - 自定义模板 5646. 模板输出覆盖 - 组件输出类型 5747. 模板输出覆盖 - 布局(Layout) 5948. 模板输出覆盖 - 复制与创建布局文件 6049. 模板输出覆盖 - 怎样覆盖嵌套的布局 6150. 模板输出覆盖 - 模块布局的输出覆盖 6251. 模板输出覆盖 - 模块结构(module chrome) 6352. 模板输出覆盖 - 页码导航(Pagination) 6553. 模板输出覆盖 - 小结归纳 6654. 怎样创建基本的Joomla模板 I 6755. 怎样创建基本的Joomla模板 II 6856. 怎样创建基本的Joomla模板 III 7057. 怎样创建基本的Joomla模板 IV 721. 怎样在templateDetails.xml文件中为模板添加语言文件声明 要使我们的Joomla模板更加国际化，更利于传播与分享，我们必须确保templateDetails.xml文件中的一些关键要素被正确的翻译(至英文)，并列出相关语言定义文件。翻译templateDetails.xml文件templateDetails.xml文件中的一些要素会在站点管理后台的模板管理(Template Manager)中被使用到，它们必须被正确的翻译成英文，例如： name: 模板的名称，如“Beez”。 description: 模板的描述。这些信息同样会在模板安装的过程中向用户显示。向templateDetails.xml中添加语言定义文件所有的语言文件必须在templateDetails.xml文件中被声明，方法是通过添加标签将语言定义文件包括进来。有些语言文件用于站点前台，有些用于管理后台，对于这两种语言文件我们需要分别添加。在下面的示例中，我们将两个英语文件和两个德语文件(分别用于前后台)一起添加到Beez模板中： . en-GB.tpl_beez.ini de-DE.tpl_beez.ini . en-GB.tpl_beez.ini de-DE.tpl_beez.ini 为管理后台添加的语言文件声明需要放在标签中，因为用于前后台的语言文件的文件名是相同的，所以不可以在相同的路径中进行声明。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Amending the templateDetails.xml file2. 怎样在模板中自定义模块结构(module chrome) 要在Joomla模板中增加自定义化的模块结构(module chrome)，我们需要在模板路径里的html文件夹中创建一个modules.php文件。例如：Joomla根路径/templates/模板名/html/modules.php在这个文件中，我们需要创建一个名为modChrome_STYLE的函数，其中STYLE部分为自定义的模块结构名称。如下所示，这个函数需要三个参数，$module，&$params和&$attribs通过这个函数，我们可以为我们的自定义模块添加任何可用的模块属性。下面几个模块属性是我们需要重点了解的： $module-showtitle，$module-content和$module-title。$module-showtitle是一个布尔变量，值可以为“true”(当模块标题被设置为显示时)和“false”(当模块标题被设置为隐藏时)。$module-content和$module-title分别负责返回模块内容与模块标题文字。下面是一段实例，我们通过判断$module-showtitle的值来确定是否输出模块标题。showtitle) echo .$module-title .; ?modChrome_STYLE函数的参数$params负责读取模块参数(Module parameters)。例如，我们可以在管理后台的模块管理中为某个模块添加后缀class名，这个class名就会存储在该模块的moduleclass_sfx参数中；如果我们需要在模块结构中创建包含这个class的，那么可以使用类似下面这样的代码：div class=get( moduleclass_sfx ); ? 自定义模块属性我们可以通过声明来为模块结构添加更多额外的自定义属性。这些自定义属性可以是我们所需的任何形式，它们会被存储在modChrome_STYLE函数的第三个参数$attibs中。下面的代码展示了一个比较完整的modChrome_custom函数：?php function modChrome_custom( $module, &$params, &$attribs ) if (isset( $attribsheaderLevel ) $headerLevel = $attribsheaderLevel; else $headerLevel = 3; if (isset( $attribsbackground ) $background = $attribsbackground; else $background = blue; echo get( moduleclass_sfx ) . ; if ($module-showtitle) echo .$module-title .; echo ; echo $module-content; echo ; echo ; ?接下来我们可以通过向传递所需的参数来为模块设置背景色和标题级别(h1,h2,h3.)；如果不做设置，那么根据modChrome_custom函数中的定义，背景色默认为蓝色，标题级别为h3。设置方法参照下图：另外，这个帖子中讲到了很多关于向模块结构传递参数的问题，可以作为参考。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Applying custom module chrome3. 原生模块结构(module chrome)类型及对应的HTML输出 前面一篇Joomla文档译文中描述了怎样在模板中自定义模块结构(module chrome)，今天继续有关模块结构的话题，来看看Joomla原生的几种模块类型以及它们各自对应的HTML输出。我们可以在声明中添加样式属性style=stylename来控制Joomla模块的HTML输出模式，其中stylename对应着不同的模式名称：None模块样式的默认值，即不做任何样式定义，没有任何额外的样式被添加。Table整个模块会被一个不定宽度的，class名称为.moduletable的包裹起来，模块标题通过输出。Horz没有任何额外的样式被添加，输出与Table模式相同，但的宽度被设定为100%XHTML整个模块会被一个class名称为.moduletable的包裹起来，模块标题通过输出。Rounded整个模块会被4个嵌套包裹，用以生成圆角样式；最外层的class为.module。模块标题通过输出。Outline模块由一个class名称为.mod-preview-wrapper的包裹，外面再包裹一层class为.mod-preview的；一个与.mod-preview-wrapper同级的class为mod-preview-info的用来显示当前模块的位置名称。(这种模式通常用于在开发调试过程中将各模块位置及名称直接在页面上以轮廓的形式显示出来。)以上。在明天的Joomla文档译文中我们一起进一步详细了解下每种模块结构的输出范例。(这里：Joomla文档中文翻译 - 什么是模块结构) 如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Core module chrome CSS4. 什么是模块结构(module chrome)? 前面两篇Joomla文档译文分别描述了“怎样在模板中自定义模块结构”和“原生模块结构类型及对应的HTML输出”；今天我们回头来看看什么是模块结构(module chrome)；逻辑上有些混乱，我也确实没有预先为待翻译的文档做排序；作为知识补完与强化吧。什么是模块结构(module chrome)?模块结构可以让模板设计者们根据需求来控制模块以不同的方式进行输出显示。本质上说，模块结构由多个预先定义好的HTML输出模式组成，例如不同的容器标签、输出顺序或嵌套关系等，基于这些不同的结构模式，我们可以通过CSS来控制模块的具体样式。最常见一种模块结构就是圆角模式(rounded)，其输出结构可以使我们很方便的为模块设置圆角背景。除了“圆角”以外，还有一些其他的的结构模式，它们由声明中的style属性来决定。例如，下面的声明可以在模板的index.php文件中向user1模块位置插入模块，并且将模块的结构模式定义为“custom”：现在，所有user1位置中的模块都会以同一种模块结构来输出，换句话说，如果你希望在同一列中的两个模块拥有不同的模块结构，那么必须将它们置于不同的模块位置中，例如user1和user2。标准的Joomla 1.5中预设了6个原生模块结构，但是Joomla模板系统的灵活性决定了我们可以不必局限于这6个结构模式中，我们可以依照需求自由创建各种风格的模块结构。下图展示了6个预设模块结构的style名称、HTML输出以及在页面中的实际样式：通过上面的示例我们可以看出，不同的模块结构所输出的前台样式未必有很大区别这取决于模板使用的CSS样式表。例如“none”和“horz”两种模式的前台默认输出几乎一致，但它们的HTML代码却有很大不同。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: What is module chrome?5. 什么是jdoc声明 今次又是一篇知识补完，就着前面几篇关于Module Chrome的文档，现将jodc的单篇也排到这里。jdoc声明是Joomla模板的一个方法(method)，用来在页面中输出指定的内容。典型的jdoc声明看上去是这样的： 。不同类型(type)的jdoc声明负责不同的内容输出。Component这个声明要放在模板的中，并且只能出现一次；它负责输出当前页面的主要内容(main content)。Head这个声明要放在模板的中，并且只能出现一次；它负责输出当前页面的样式表链接、脚本链接、meta信息等内容。Installation这个类型的jdoc声明只用于Joomla的安装器模板(Installer template)中，与Component类型相似，它只负责输出安装过程中页面上的主要内容。Messagemessage声明要放在模板的中，并且只能出现一次,用于输出操作过程中的系统提示信息或出错信息。Modulemodule类型的jdoc声明会根据其name属性输出对应的模块，但该模块内容是否会呈现在页面上则取决于用户是否发布激活了该模块；我们可以为其设定style属性来控制模块输出模式；可参见“Joomla文档中文翻译 - 原生模块结构(module chrome)类型及对应的HTML输出”。Modulesmodules类型的jdoc声明用来在当前位置调用某个模板位置(template position)的所有模块；所有的模板位置都需要预先在templatedetails.xml文件中定义。我们同样可以为其设定style属性来控制模块的输出模式。下面是是一些Joomla模板中常见的modules类型的jdoc声明：另外，关于模块输出，可以参见“Joomla文档中文翻译 - 怎样在模板中自定义模块结构(module chrome)”以了解更多模块输出自定义方面的信息。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: jdoc statements6. 什么是模块位(module positions) 模块位是模板中用来容纳模块的容器，它们定义了模块在模板中的位置，用以告诉Joomla将模块的输出内容放置在哪些指定的地方。模板设计者们对模块位有充分的控制权，他们可以基于Joomla默认的模块位在不同的模板中创造出各种变化。例如，名为“left”的模板位可以被放置在模板的左侧边栏容器中，但根据设计者的需求，它同样可以被设计放置到页面的其他位置；所以当一个模块被分配到“left”模板位后，它只会显示在“left”模块位所处的任何可能的位置，而并非一定在左侧边栏。templateDetails.xmltemplateDetails.xml文件包含了模板所有的安装及核心信息，包括该模板所要用到的模块位信息；模块位信息需要通过列表来声明，下面是一个范例： top left right bottom banner syndicate footer user1 user2 user3 user4 上面的声明中都是一些常用模板位，但无论是模板位的名称还是位置样式都由设计者来决定；设计者可以根据需求在这个列表中任意添加在模板中需要用到的模块位。在模板中使用模块位Joomla模板通过使用声明来调用和显示模块，一个典型的jdoc声明的形式如下：关于jdoc声明的使用，可以参见“Joomla文档中文翻译 - 什么是jdoc声明”了解更多的信息。模板位可视化我们可以很方便的在站点的前台页面中查看当前模板用到的模块位，只需要在当前页面的URL后面输入查询参数“tp=1”，例如：/index.php?tp=1 如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Module positions7. 怎样计算判断指定模块位中的模块数量 我们可以在Joomla模板中使用countModules方法来判断一个指定模块位(module positions)中的模块数量。关于“模块位”，可以参见“Joomla文档中文翻译 - 什么是模块位”。我们通常使用这种方法来判断某个模块位中是否存在至少一个已启用的模块，如果存在，则在页面中输出HTML容器并通过jdoc声明(关于“jdoc声明”，可以参见“Joomla文档中文翻译 - 什么是jdoc声明”)将模块包含在其中。这种做法可以有效的避免当没有模块内容的时候在页面中输出空的HTML标签，同时这也是实现“合并列”的技术之一。下面的示例代码用来判断“user1”模块位中是否存在已启用的模块，如果存在，则输出容器并将“user1”模块位中的模块内容输出到这个容器中。countModules( user1 ) : ? 我们将在下一篇文档中来看看怎样同时判断多个模块位中的模块数量。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Counting modules in a given module position8. 怎样同时判断多个模块位中的模块数量 上一篇文档介绍了怎样计算判断指定模块位中的模块数量，今天我们来看看怎样同时判断多个模块位中的模块数量。我们依然使用countModules函数来做判断，与对单一模块中的模块数量进行判断的情况有所区别，现在我们需要为countModules函数提供多于一个的模块位名称作为参数。例如，我们可以通过下面这行代码来计算“user1”和“user2”两个模块位中的模块总数：$this-countModules( user1 + user2 );这里我们需要注意运算符的使用，上面的代码中我们通过“+”来计算这两个模块位中的模块总数，如果将“+”替换为“and”，那么函数将判断这两个模块位是否各自至少包含一个模块(“+”对模块数量做加法运算，而“and”是“与”、“&”的概念)；代码如下：$this-countModules( user1 and user2 );注意上面代码中的“and”需要包含在引号里面，一个常见的错误就是将代码误写成下面的样子：$this-countModules( user1 and user2 );另外一点需要注意的是，无论使用user1 + user2还是user1 and user2，在“+”和“and”的两侧都要保留一个空格。实例一根据设计需求，我们要把user1和user2两个模块位都放置在这个列中；当这两个模块位都没有被分配模块时，我们希望HTML代码中不要输出这个空容器。实现这个需求的代码如下：countModules( user1 or user2 ) : ? 实例二设计需求是user1和user2两个模块位需要并排放在这个容器中，并且被一个分隔符分开；如果只有一个模块位被分配了模块，分隔符就不需要显示出来；如果两个模 块位都没有被分配模块，那么整个容器不需要被输出。实现这个需求的代码如下：countModules( user1 or user2 ) : ? countModules( user1 ) : ? countModules( user1 and user2 ) : ? countModules( user2 ) : ? 第一行代码的原理与实例一相同，用来判断整个容器是否需要被输出；接下来的三个判断中，第一个和第三个分别判断user1和user2是否被分配模块，中间一段代码用来判断如果user1和user2中同时有模块输出，则显示分隔符容器。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Counting modules in multiple module positions9. 怎样替换默认模板(rhuk_milkyway)的logo 创建我们自己的logo图片；原logo为8位png格式的图片，因为需要保留透明的部分以适应模板头部的渐变，我们也可以将自己的logo图片制作为透明背景并保存成同样的格式。将新logo上传至Joomla根路径/templates/rhuk_milkyway/images文件夹。进入站点管理后台-扩展-模板管理。点击rhuk_milkyway模板名称，进入该模板的编辑页面。点击“编辑CSS(Edit CSS)”。选择template.css文件并点击“编辑(edit)”。找到div#logo的样式代码，看上去大致是这样的：div#logo position: absolute; left: 0; top: 0; float: left; width: 298px; height: 75px; background: url(./images/mw_joomla_logo.png) 0 0 no-repeat; margin-left: 30px; margin-top: 25px;我们需要将background属性中的图片替换为我们之前上传的新logo，也就是将url(./images/mw_joomla_logo.png)中最后的图片文件名替换为我们新logo的文件名。保存，搞定。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: How to replace the Joomla logo10. templateDetails.xml文件详解 templateDetails.xml文件向模板管理器(Template Manager)提供了很多关于模板的重要meta数据(meta-data，元数据)，用于模板的安装及维护。通常，这些数据通过文本缩进的方式来体现出不同的区块，方便阅读和识别。基本信息在站点管理后台的模板管理中，我们可以看到一个可用的模板列表，它包含了每个模板的基本信息；所有这些信息都是通过 templateDetails.xml文件提供的。下面是一个模板管理页面的截图，其中，等红字标明的信息名称即对应着下面xml文件代码中的相关标签。 rhuk_milkyway 11/20/06 Andy Miller This e-mail address is being protected from spambots. You need JavaScript enabled to view it GNU/GPL 1.0.2 TPL_RHUK_MILKYWAY文件结构模板所用到的每个文件都要在templateDetails.xml中列出，每个文件名都要包括其相对于模板根路径的完整路径信息。Joomla的模板安装器会在安装储存模板文件的时候用到这些信息。下面的文件结构声明示例取自rhuk_milkyway模板的templateDetails.xml文件。 index.php templateDetails.xml template_thumbnail.png params.ini images/arrow.png images/indent1.png 一种比较推荐的更加完整的文件结构声明是这样的(包括images和css文件夹的路径)： index.php component.php templateDetails.xml template_thumbnail.png params.ini images/ css/ 语言有些模板会包含语言文件，用来自定义页面中的一些静态文本。下面的示例中包含两个语言文件，其中第一个用于前台页面，第二个(包含在标签中的)用于管理后台页面。 en-GB.tpl_beez.ini en-GB.tpl_beez.ini 模块位关于模块位，请参考“Joomla文档中文翻译 - 什么是模块位(module positions)”；下面是一个典型的模块位声明： breadcrumb left right top user1 user2 user3 user4 footer debug syndicate 模板参数很多模板会向管理后台的模板管理器提供一些可供设置的参数，例如rhuk_milkyway模板允许我们设置边框颜色、背景色及模板宽度等，如下图：templateDetails.xml文件中下面这段代码就是用来向模板管理器提供Color Variation可选参数的(上图红框中的第一个下拉列表)： Blue Red Green Orange Black White 在接下来的几天，我们将继续深入了解各种类型的模板参数。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: What is the purpose of the templateDetails.xml file11. 模板参数详解 - 什么是模板参数 模板系统一直是Joomla的一个强大的特色功能，但在Joomla 1.5之前，其灵活性并非很强。例如，一套模板若要包含几种不同的色彩风格，必须针对不同的色彩提供若干套单独的模板以供用户选择。一些模板提供者自己创造了用来针对一套模板进行色彩方案修改的方法，但是这些方法并没有标准化，并且需要用户方面大量的手动操作，甚至需要安装相应的组件才可以控制。随着Joomla 1.5的模板参数功能的到来，这些糟糕的状况得以改变。准确的说，模板参数实质上是一种扩展参数，因为它的机制原理和其他扩展(组件、模块，插件)的参数是相同的。在接下来的一系列文档中，我们将学习怎样在设计开发模板的过程中创建和使用参数。对于每个类型的模板参数我们都会展开详解，我们还可以学到如何创建自定义参数类型来适应我们独特的开发需求；有关在模板中使用正则表达式的一些方法也会被涵盖进来。模板参数简介到站点管理后台的“扩展-模板管理(Extensions-Template Manager)”中,在模板列表里点击“rhuk_milkyway”，在接下来的模板编辑页面中右侧的“参数(Parameters”设置组里，有一些下拉列表，例如“更换颜色”、“更换背景”等，如下图。这些就是典型的模板参数，用来控制模板的色彩配置方案。模板参数允许管理员对模板的样式和行为进行控制；但只有模板设计者才能决定模板中需要哪些参数以控制哪些样式和行为。下面三个方面笼统的概括了设计者在添加参数时需要做的事情:在templateDetails.xml文件中通过声明参数(可参考“Joomla文档中文翻译 - templateDetails.xml文件详解”)。向params.ini文件中增加相应修改；params.ini文件用来保存当前模板所用到的参数设置。向模板的php文件中增加相应的代码来获取参数值并做出相应的行为调整。在接下来的一篇文档中，我们将详细了解怎样在templateDetails.xml文件中声明模板参数。如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Tutorial:Template parameters12. 模板参数详解 - 怎样定义模板参数 templateDetails.xml文件位于Joomla模板的根路径中，例如在Joomla自带的Beez模板中，该文件路径应该是这样的：Joomla根路径/templates