Magento2布局文件类型_magento教程_php教程

对于Magento2一个特定的页面，其布局主要被两个重要的布局组件定义：页面布局文件和页面配置文件。

一个页面布局文件定义页面线框，例如，一列布局。技术页面布局是.xml文件，定义html页面<body>区域内的结构。页面布局功能只是容器。所有的页面布局声明应在页面布局声明文件中声明。

页面配置也是一个.xml文件。它定义详细的结构（页面头部，底部等），内容和页面元信息，包括使用的页面布局。页面配置功能包括主元素和块（尤其是类和容器）。

我们还区分了第三类布局文件，通用布局。它们是定义内容和HTML页面组成中<body>区域详细结构的.xml文件。这些文件用于返回Ajax请求，电子邮件，HTML片段等页面。

本文给出了每种布局文件类型的详细描述。

页面布局

页面布局声明页面区域内的线框，如一列布局或者两列布局。

允许的布局指令：

<container>
<referenceContainer>
<move>
<update>

页面布局示例：

<Magento_Theme_module_dir>/view/frontend/page_layout/2columns-left.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="columns">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        </container>
        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
       </container>
    </referenceContainer>
</layout>

页面布局文件常规位置

常规页面布局位置如下：

Module page layouts（模型页面布局）：<module_dir>/view/frontend/page_layout
Theme page layouts:（主题页面布局）：<theme_dir>/<Namespace>_<Module>/page_layout

页面布局声明

要能够使用一个布局为实际的页面进行渲染，你需要在layouts.xml中声明它。

常规布局声明文件可能位于下面位置之一：

Module layout declarations（模型布局声明）：<module_dir>/view/frontend/layouts.xml
Theme layout declaration（主题布局声明）：<theme_dir>/<Namespace>_<Module>/layouts.xml

使用<layout></layout>指令声明布局文件，如下指定：

<layout id="layout_file_name">例如，2columns-left.xml页面布局如下声明：<layout id = "2columns-left"/>
<label translate="true|false">{Label_used_in_Admin}</label>

页面布局声明文件示例：

<Magento_Theme_module_dir>/view/frontend/layouts.xml

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="1column">
        <label translate="true">1 column
    </layout>
    <layout id="2columns-left">
        <label translate="true">2 columns with left bar
    </layout>
    <layout id="2columns-right">
        <label translate="true">2 columns with right bar
    </layout>
    <layout id="3columns">
        <label translate="true">3 columns
   </layout>
</page_layouts>

页面配置

页面配置在一个页面布局文件中定义添加到线框的内容。一个页面配置也包含页面元信息和<head>内容。

页面配置文件常规位置

常规页面配置文件位于下面位置：

Module page configurations（模型页面配置）： <module_dir>/view/frontend/layout
Theme page configurations（主题页面配置）： <theme_dir>/<Namespace>_<Module>/layout

页面配置结构和允许的布局指令

下表描述了页面配置文件的指令。要查看通用布局指令请看《Magento2布局指令》

Element	Attributes	Parent of	Description
`<page></page>`	`layout = {layout}` `xsi:noNamespaceSchemaLocation ="{path_to_schema}"`	`<html>` `<head>` `<body>` `<update>`	Mandatory root element.
`<html></html>`	none	`<attribute>`	Mandatory element.
`<head></head>`	none	`<title>` `<meta>` `<link>` `<css>` `<script>`
`<body></body>`	none	`<block>` `<container>` `<move>` `<attribute>` `<referenceBlock>` `<referenceContainer>` `<action>`
`<attribute>`	`name = {arbitrary_name}` `value = {arbitrary_value}`		Specified for `<html>`, rendered like following: `<html name="value'>`
`<title>`	none	none	Page title
`<meta>`	`content` `charset` `http-equiv` `name` `scheme`	none
`<link>`	`src` `defer` `ie_condition` `charset` `hreflang` `media` `rel` `rev` `sizes` `target` `type`	none
`<css>`	`src` `defer` `ie_condition` `charset` `hreflang` `media` `rel` `rev` `sizes` `target` `type`	none
`<script>`	`src` `defer` `ie_condition` `async` `charset` `type`	none

通用布局

通用布局定义HTML页面<body>区域内的内容和详细结构。

通用布局文件常规位置

常规通用布局文件位于以下位置：

Module generic layouts（模型通用布局）：<module_dir>/view/frontend/layout
Theme generic layouts（主题通用布局）：<theme_dir>/<Namespace>_<Module>/layout

通用布局结构和允许的布局指令

下表描述了页面配置文件的指令。

Element	Attributes	Parent of	Description
`<layout></layout>`	`xsi:noNamespaceSchemaLocation="{path_to_schema}"`	`<container>` `<update>`	Mandatory root element.
`<update>`	`handle="{name_of_handle_to_include}"`	none
`<container>`	`name="root"` For complete list of attributes, see Layout instructions	`<block>` `<container>` `<referenceBlock>` `<referenceContainer>`	Mandatory element

通用布局示例：

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <update handle="formkey"/>
    <update handle="adminhtml_googleshopping_types_block"/>
    <container name="root">
        <block class="Magento\Backend\Block\Widget\Grid\Container" name="googleshopping.types.container" template="Magento_Backend::widget/grid/container/empty.phtml"/>
    </container>
</layout>

(责任编辑：好模板)