创建新的Joomla布局

版本2.5+的替代布局特性介绍。

Joomla1.5版本使用模板覆盖系统引入了覆盖核心布局的概念。Joomla2.5版本引入了一组特性，使站点管理员能够更多地控制文章、联系人、新闻提要和Web链接的显示。可供选择的布局有五种:

1. 模块
2. 组件
3. 类别
4. 菜单项
5. JLayouts

替代布局与模板覆盖功能类似，但允许您有更多的选择和控制。下面讨论每种类型。

模块可供选择的布局

为模块创建另一个布局类似于为模块创建模板覆盖。在这两种情况下,创建一个名为templates/<your template>/html/<module name>例如，一个“mod_login”模板覆盖或替代的beez5布局模板的文件夹将<templates/beez5/html/mod_login/

模板覆盖和另一个布局之间有两个重要的区别。第一个是文件名。对于模板覆盖，您将调用该文件default.php匹配核心文件名。对于另一个布局，使用不同的名称。唯一的规则是文件名不应该有任何下划线。这允许您拥有包含多个文件的复杂布局。要调用的初始文件是没有下划线的，并且从这个初始文件中调用的任何其他文件都将以这个名称下划线。例如，您可以调用最初的文件mynewlogin.php要求mynewlogin_1.php

第二个重要的区别是，与模板覆盖文件不同，当模块使用该模板显示模块时，它会自动被调用，另一个布局文件只有在模块管理器中作为参数选择时才会调用。在版本2.5和之后的版本中，有一个新的参数被称为替代布局，如下所示。

此参数将列出您在此模块的模板文件夹中放置的任何文件(没有下划线)。您还可以使用模板的系统语言文件来翻译文件名。例如，如果你添加了这条线。

TPL_BEEZ5_MOD_LOGIN_LAYOUT_NOLOGIN="Alt Login Layout"

到文件en-GB.tpl_beez5.sys.ini，它将转换文件名nologin.php“Alt登录布局”。

重要的是要理解，如果在模块管理器屏幕中指定，模块的另一个布局文件将被用于该模块，而不考虑使用什么模板来显示模块所显示的页面。因此，管理员有责任确保在显示该模块的任何模板中，布局文件都能正常工作。

插件备选布局(覆盖插件)

是的，可以覆盖插件输出。它非常有用，特别是对于内容插件。然而，只有当插件准备好允许覆盖时，你才能做到这一点。

Joomla提供了一个覆盖插件的机制，但是这个功能不受所有插件的支持。

现在是Joomla 3.X的唯一插件。允许重写的核心是Pagenavigation内容插件，它在内容组件的文章视图中显示前面/下一篇文章链接。可能会有第三方开发者的其他插件允许它，更多的核心插件将在未来被覆盖。

您将会知道插件是什么时候被覆盖的，因为它有一个/tmpl/文件夹。

(开发人员注意:插件使用JPluginHelper::getLayoutPath())

插件覆盖的例子

要在“beez3”模板中覆盖Pagenavigation内容插件的输出，创建一个名为templates/beez3/html/plg_content_pagenavigation/的文件，复制原始布局文件(plugins/content/pagenavigation/tmpl/default.php)这个新文件夹。

现在您可以更改这个布局文件来覆盖插件输出。

需要注意的是，要构建覆盖布局，您需要在这条路径中创建它:

templates/TEMPLATE-NAME/html/plg_PLUGIN-GROUP_PLUGIN-NAME/

例子:templates/beez3/html/plg_content_pagenavigation/

插件组是插件所属的组，它是插件所在的第一个文件夹的名称。

组件选择布局

组件备选布局类似于上面讨论的模块布局。同样，文件被放置在放置模板覆盖文件的同一文件夹中。例如，为模板“beez5”创建一篇文章的替代布局，你可以在文件夹里放一个文件templates/beez5/html/com_content/article/。与模块布局一样，该文件不能被命名为与核心文件相同，也不能包含以名字命名的下划线。此外，在此文件夹中不应该有相同名称的XML文件。(我们将在菜单项下讨论XML文件。)

您可以在组件的选项窗口中设置组件布局的全局值。例如，在Article Manager选项窗口中，有一个用于替代布局的参数，如下所示:

这将创建一个全局值，单个组件(文章、联系人、新闻提要和Web链接)可以继承。

与模块布局一样，组件布局在单独的组件编辑屏幕中显示为参数选项。例如，对于一篇文章，文章选项组中的参数显示如下所示。

与其他参数一样，使用全局设置将使用选项参数的设置。组件的默认设置将使用组件的默认布局。您为不同模板创建的替代布局在每个模板标题下显示。

可以转换文件名，如下:

TPL_BEEZ5_COM_CONTENT_ARTICLE_LAYOUT_MYLAYOUT="Title Only No XML"

将翻译一个名为“mylayout”的文件。php 仅非XML标题。

一个布局可以有多个文件。初始文件必须以没有下划线的方式命名，而且任何其他文件都必须有下划线。

组件替代布局可以与文章、联系人或新闻提要一起使用。Web链接没有单一组件的布局，因此没有可供Web链接使用的替代布局。

组件备选布局只在满足两个条件时使用:(1)它们在组件参数中指定;并且(2)此特定组件没有菜单项。例如，如果您有一个或多个类型“单篇文章”的菜单项设置为给定的文章，那么该文章的替代布局将不会被使用。相反，将使用菜单项中指定的布局。这与组件参数工作的一般方式是一致的，其中最具体的(在本例中是单条款菜单项)覆盖了不太具体的(在本例中是文章参数)。

类别选择布局

类别备选布局与组件布局相同。指定布局文件的规则是相同的。唯一的区别是文件夹是类别文件夹，而不是组件文件夹。例如，beez5的一个联系人类别的替代布局将进入该文件夹。templates/beez5/html/com_contact/category

您可以在全局中设置类别布局，在每个组件的选项屏幕中。下面是联系人管理器选项屏幕的示例:

当您在下面所示的基本选项下添加或编辑类别管理器中的类别时，将出现类别替代布局。

类别备选布局可用于文章、联系人、新闻提要和Web链接。

只与组件布局,分类布局将显示如果)指定的类别在全局或类别参数和专门为这一类没有菜单项(例如,列表联系人分类,新闻类别,列出网页链接在一个类别,类别列表,类别的博客)。

如果为这个特定类别设置了一个菜单项，则将使用该布局而不是其他类别布局。

深入到博客或列表

对于文章，我们有两个核心布局:博客和列表。这两个选项都显示在“From Component”标题下，在文章类别的布局参数中。因此，与其他布局选项一样，您现在可以在全局(在文章管理器选项中显示)或编辑单个文章类别时选择博客或列表。

这意味着，与其他布局选项一样，您可以控制文章类别链接是否向下延伸到博客或列表布局。需要理解的是，与其他布局参数一样，这个选项只会在没有类别的单类别菜单项时生效。

选择菜单项

备选菜单项与其他菜单项有一个重要的区别。要创建一个菜单项备选布局，您必须包含一个与初始布局文件匹配的XML文件。例如，为了在beez5模板中创建一个名为“myarticle”的替代菜单项，您可以在其中创建两个文件templates/beez5/html/com_content/article文件夹叫myarticle.php和myarticle.xml。如果您想要包含更多的布局文件，您可以在文件名中添加下划线。

XML文件使用与核心菜单项XML文件相同的格式。这不仅允许您为这个菜单项创建一个定制的布局，而且还允许您创建自定义参数。例如，您可以隐藏一些参数或添加新的参数。

当您在菜单管理器中选择菜单项类型时，将出现替代菜单项，如下所示。

替代菜单项的使用和工作方式与标准菜单项相同。由于它们已经基于定制的布局，所以模板覆盖并不适用于其他菜单项。

如上所述，菜单项布局优先于组件或类别替代布局。

 在XML文件中使用以下标记来完成替代菜单项的转换。格式是"TPL_"<template name>_<component>_<view>_<menu item name>_<tag type>例如，下面的这些行将转换名为“catmenuitem”的替代菜单项的标题、选项和描述。

TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_TITLE="Beez5 Custom Category Layout"
TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_OPTION="Beez5 Custom"
TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_DESC="Description for beez5 custom category layout."

这些字符串必须加到language/en-GB/en-GB.tpl_beez5.sys.ini

catmenuitem.xml的开头是

<?xml version="1.0" encoding="utf-8"?>
<metadata>
   <layout title="TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_TITLE" option="TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_OPTION">
      <help
         key = "JHELP_MENUS_MENU_ITEM_ARTICLE_SINGLE_ARTICLE"
      />
      <message>
         <![CDATA[TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_DESC]]>
      </message>
   </layout>

控制可选菜单项的模板

正如上面所讨论的，XML文件的存在使另一种布局成为菜单项。XML文件的格式与核心菜单项XML文件的格式相同。使用这个XML文件，您可以添加您希望为该菜单项包含的参数。它们可以与核心菜单项相同，也可以省略核心参数或添加新参数。注意，如果添加了新的参数，这些参数可以在布局文件中使用，但不会在核心模型或视图文件中使用。

还可以覆盖核心参数的参数设置。其中一个例子是控制哪些模板可以显示另一个菜单项布局。在某些情况下，您可能希望允许使用任何模板显示自定义菜单项。在其他情况下，您可能希望将菜单项的布局限制为一个特定的模板。在这种情况下，您只需将以下参数添加到菜单项的XML文件中:

<fields>
  <field
    name=''"template_style_id"''
    type=''"templatestyle"''
    label=''"COM_MENUS_ITEM_FIELD_TEMPLATE_LABEL"''
    description=''"COM_MENUS_ITEM_FIELD_TEMPLATE_DESC"''
    filter=''"int"''
    template=''"beez5"''
    class=''"inputbox"''>
  </field>
 </fields>

这将覆盖核心template_style_id参数。在本例中，设置与“beez5”相同的模板将限制用户只选择“beez5”模板的模板样式。

JLayout布局覆盖 

Jlayout是Joomla的一个强大功能!Jlayout可以粗略地定义为微布局。它们是Joomla个人元素的微型布局页面。例如，read more按钮，intro图像，完整的图像，都是通过自己的JLayout控制的元素的例子。

如果我们深入到类别博客布局视图中，您将会找到调用文章标题、内部图像、介绍文本以及页面其他相关部分的代码。这就是使用JLayout调用元素时的样子。

<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>

这个特殊的代码调用了Joomla中的文章标题!类别的博客。

为了帮助您理解这个特定元素的文件位置，它将有助于理解在游戏中有一个命名约定。看着joomla.content.blog_style_default_item_title他可以用/'s来替换，以理解目录结构。所有的jlayout最初都是在JOOMLAROOT/layout中找到的。使用命名约定，我们可以看到该文件将位于JOOMLAROOT/layouts/joomla/content/blog_style_default_item_title.php

让我们来看一个例子。对于这个示例，我们将把intro图像移到标题上方，如果需要，还可以在其周围添加一些额外的结构。

您不应该直接编辑JLayout文件，因为在任何核心升级期间，修改都将被覆盖。更新JLayout的正确方法是找到要覆盖的元素(比如intro_image)，并将文件复制到模板中。然后，您应该复制您想要覆盖的元素的文件夹结构，它存在于Joomla的布局文件夹中父目录templates/YOUR_TEMPLATE/html/。您只需要复制您需要避免站点的文件，并将引发问题的可能性降到最低。

一个关于intro_image的示例将在以下内容中找到:JOOMLAROOT/layouts/joomla/content/intro_image.php

复制的文件将是：templates/YOUR_TEMPLATE/html/layouts/joomla/content/intro_image.php

作为一个简单的例子，让我们为intro映像添加一个响应性的图像类。首先，打开我们刚刚放入的复制的JLayout文件templates/YOUR_TEMPLATE/html/layouts/joomla/content/intro_image.php。

查看以下路线

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image">

让我们添加响应图像类img-responsive现有的类。

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image img-responsive">

好的，我们已经添加了我们的类。让我们保存并关闭文件。确保它被上传到我们的网站。现在，如果我们刷新页面，我们将看到在我们的intro图像上的类img响应。您刚刚使用了JLayout，考虑了您可以使用JLayouts做的所有其他伟大的事情吗?

创建只出现在某些页面上的新JLayout

您还可以创建新的JLayout文件。它们不需要基于现有的元素。只需将它们添加到YOUR_TEMPLATE/html/layouts/上面的目录和Joomla将能够找到他们。然后需要在代码中引用新的JLayout。为了简单起见，在本例中，我复制了一个现有的元素，并创建了自己的版本。

首先，我将为博客布局(而不是JLayout覆盖)执行一个标准的HTML模板覆盖。您可以在这个页面上找到如何做这个的方法。做一个模板覆盖会增加一些文件到我的templates/YOUR_TEMPLATE/html文件夹中。我将创建一个新的JLayout，我只想在我的博客视图中使用它。如果我只是为intro_image编辑JLayout，它会影响所有的intro_images，但我只想修改我的Category Blog视图intro_images。

我要使用的文件是templates/YOUR_TEMPLATE/html/com_content/category/blog_item.php。在这个文件中，我找到了这条线索<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>调用JLayout元素。该特定代码用于intro_image元素。

为了简单起见，我复制了这个文件JOOMLAROOT/layouts/joomla/content/intro_image.php我把它放在templates/YOUR_TEMPLATE/html/layouts/joomla/content/我重命名intro_image_blog.php

现在打开模板覆盖文件templates/YOUR_TEMPLATE/html/com_content/category/blog_item.php.我找到了<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>.我移除它，重新定位标题上方的JLayout，然后使用我刚刚创建的JLayouttemplates/YOUR_TEMPLATE/html/layouts/joomla/content/intro_image_blog.php

现在我的新JLayout正在被使用，它已经被定位在标题之上。我现在可以做进一步的修改，比如添加一个响应性的图像类，如果需要的话，变化只会在Category Blog视图中反映出来。