> Magento2中文手册 > 布局(Layout)文件类型
class="content-wrap">

布局(Layout)文件类型

这篇文章讲什么?

对于特定的页面,其布局由两个主要布局组件定义:页面布局 文件和 页面配置 文件.

页面布局文件定义了页面线框图,例如一列布局。在技术上,页面布局是一个xml文件,它定义了HTML代码中的结构;HTML页面标记的主体。页面布局功能 容器. 用于页面呈现的所有页面布局应在页面布局声明文件中声明。

页面布局

页面布局文件定义了页面线框图,例如一列布局。

允许布局(Layout)说明:

  •  <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_dir>/view/frontend/page_layout
  • 主题页面布局: <theme_dir>/<Namespace>_<Module>/page_layout

页面布局声明

示例页面布局声明文件:

<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</label>
    </layout>
    <layout id="2columns-left">
        <label translate="true">2 columns with left bar</label>
    </layout>
    <layout id="2columns-right">
        <label translate="true">2 columns with right bar</label>
    </layout>
    <layout id="3columns">
        <label translate="true">3 columns</label>
    </layout>
</page_layouts>

页面配置文件常规位置

  • 模块页配置: <module_dir>/view/frontend/layout
  • 主题页配置: <theme_dir>/<Namespace>_<Module>/layout

通用布局文件常规位置

  • 模块通用布局: <module_dir>/view/frontend/layout
  • 主题通用布局: <theme_dir>/<Namespace>_<Module>/layout

通用的布局结构,允许布局说明

下表描述泛型布局文件特定的说明。对于普通布局描述说明,查看 布局(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)说明
  • <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>