布局文件类型 · magento 2.0开发手册

页面布局文件和页面配置文件：对于一个特定的页面，其布局是由两个主要布局组件定义。页面布局文件定义的页面线框，例如，一列布局。技术上页面布局的.xml文件中定义的HTML页面标记的部分内部结构。页面布局功能只集装箱。用于网页渲染所有的页面布局应在页面布局声明文件中声明。页面配置也是.xml文件。它定义的详细结构（页面页眉，页脚等），内容和页的元信息，包括所用的网页版式。页面配置功能都主要元素，尤其是类和容器块。我们还区分第三类型的布局文件，通用布局。它们限定了HTML页面标记的部分里面的内容和详细结构.xml文件。这些文件用于通过AJAX请求，电子邮件，HTML片段等返回的页面。本文给出了每个布局文件类型的全面描述。 **页面布局** 页面布局声明部分内的页的线框<body>部分，例如一列布局或两列布局。允许的布局指令： * <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 *页面布局声明* 为了能够使用布局实际页面渲染，你需要声明它 layouts.xml. 传统布局声明文件可能位于以下位置之一：模块布局声明 :<module_dir>/view/frontend/layouts.xml 主题布局声明：<theme_dir>/<Namespace>_<Module>/layouts.xml 使用<layout></layout>指令，用于指定以下声明布局文件： ~~~ * <layout id="layout_file_name">. For example, the 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</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> ~~~ **页面配置 ** 页面配置添加内容到页面布局文件中定义的线框。一个页面的配置也包含页的元信息，和<head>部分的内容。 ### 页面配置文件常规位置常规页面配置文件必须位于如下：模块页面配置： <module_dir>/view/frontend/layout 主题页配置： <theme_dir>/<Namespace>_<Module>/layout ### 网页配置结构，并允许布局说明下表描述了特定于页的配置文件中的说明。对于常见的布局指令的描述中看到布局的说明文章。 ![](https://box.kancloud.cn/2016-03-08_56de83d25257e.png) **通用布局** 通用布局定义的HTML页面标记的<body>里面的内容和详细结构。 ### 通用布局文件常规位置传统的通用布局文件必须位于如下：模块通用布局：<module_dir>/view/frontend/layout 主题通用布局 :<theme_dir>/<Namespace>_<Module>/layout ### 通用布局结构，并允许布局指示下表描述了特定于通用布局文件的说明。对于常见的布局指令的描述中看到布局的说明文章。 ![](https://box.kancloud.cn/2016-03-08_56de83d2761d7.png) 样品通用布局： ~~~ <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> ~~~