布局文件類型 · 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> ~~~