本章内容

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

一个页面布局文件定义页面线框，例如，一列布局。技术页面布局是.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布局指令》

ElementAttributesParent ofDescription
<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

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

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

ElementAttributesParent ofDescription
<layout></layout>
  • xsi:noNamespaceSchemaLocation="{path_to_schema}"
  • <container>
  • <update>
 Mandatory root element.
<update>
  • handle="{name_of_handle_to_include}"
 none  
<container>
  • <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>

360magento提供专业的基于magento系统的电商网站开发服务，如有需求或相关咨询，请与我们联系。