Magento 2 layout 文件类型

page 页面的布局由两种主要的布局组件决定：page layout file 和 page configuration file。

page layout file 决定页面的线框，比如一列的布局。技术上来讲，page layout 是 xml 文件，决定 HTML 页面中 <body> 里面的结构。Page layouts feature only containers。page layout 需要声明然后才能使用。

page configuration 也是 xml 文件。它决定更详细的结构（header,footer 等等，也就是 body 中的其他 html 标签），页面内容，页面的 meta 信息。他引用 page layout 文件。Page configuration features both main elements, blocks of particular classes and containers.

第三种布局文件是 generic layout。他们也是 xml 文件，定义 html 页面中<body>部分的内容和详细结构，跟 page configuration 基本一样，但是他们用在比较特殊的情况下，比如 AJAX 请求返回页面，emails，HTML 片段等。

Page layout

page layout 决定页面中<body>中的线框结构（wireframe），比如一列布局或者两列布局。

允许的指令：

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

指令参考文档

page layout 例子
<Magento_Theme_module_dir>/view/frontend/page_layout/1column.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

如果你打开 Magento 首页（默认的主题），用浏览器工具查看源代码，可以看到如下类似的代码：

...
<div class="page-wrapper">
    <header class="page-header"></header>
    ...
    <footer class="page-footer"></footer>
</div>

这样应该有助于理解为什么说 page layout 决定了页面的线框。

page layout 文件一般位置

Module page layouts: <module_dir>/view/frontend/page_layout
Theme page layouts:<theme_dir>/<Namespace>_<Module>/page_layout

page layout 声明文件 layouts.xml

需要使用layout.xml文件来声明 page layout
位置：

Module layout declarations: <module_dir>/view/frontend/layouts.xml
Theme layout declaration: <theme_dir>/<Namespace>_<Module>/layouts.xml

创建自定义的 page layout

我们以如何创建 Magneto 2 前端主题创建好的主题ThankIT/Pisces为基础，创建一个自定义的 page layout

我们在app\design\frontend\ThankIT\Pisces 文件夹下创建 Magento_Theme文件夹，这样我的主题就会对该模块进行一些自定义。在该文件夹下创建layouts.xml文件，内容如下：

# File: app\design\frontend\ThankIT\Pisces\Magento_Theme\layouts.xml
<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="custom-home">
        <label translate="true">Custom Home</label>
    </layout>
</page_layouts>

这是一个page layout 声明文件，id是他的名称，label是我们后台可以看到的标签。

下面创建custom-home.xml文件，我直接拷贝了1column.xml的内容。

# File: app\design\frontend\ThankIT\Pisces\Magento_Theme\page_layout\custom-home.xml
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

这两个都到位后，我们进入后台，Content -> Pages 找到 Home page，进入编辑，Design > Page Layout > Layout 就可以看到我们已经声明的Custom Home page layout 可以用了。

如果我们对首页应用该布局，并且当前店铺的主题是ThankIT\Pisces，也就是我们刚刚创建的主题，这时候去首页看下他的源代码，注意下图红框中的page-layout-custom-home。（如果当前主题不是刚刚创建的主题，那么首页会是空白页面，博主也不清楚为什么。）

（上面两张图仅供参考，并不是Pisces主题的真实截图，图方便拿了别人的图来示意一下。）

Page configuration

page configuration 往 page layout 文件规定的线框结构中填充内容。它还包含 meta 信息，还有<head>部分的内容。

他的一般位置在：

Module page configurations: <module_dir>/view/frontend/layout
Theme page configurations: <theme_dir>/<Namespace>_<Module>/layout

page configuration 中允许的指令请查看参考文档第一条。

我们说 page configuration 引用 page layout 文件，我们来看看他是怎么引用的。

# File: module-theme/view/frontend/layout/default.xml
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="default_head_blocks"/>
    <body>
    ......
    </body>
</page>

看<page/>节点中的layout="3columns"，这就是说，我用的是3columns这个 page layout。
<update handle="default_head_blocks"/> 指令的意思是包含default_head_block.xml，这个文件和default.xml文件同一目录，用来规定 html 页面<head>中的内容，我们之前讨论引入 css 文件，也提到过他。

<Magento_Theme_module_dir>/view/frontend/layout/default.xml: defines the page layout.
<Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml: defines the scripts, images, and meta data included in pages’ <head> section.

这两个布局文件就是 Magento 前端页面的基本布局。

Generic layout

和 page configuration 基本一致，请查看参考文档第一条了解详细信息。

参考文档

Layout file types

Creating a custom homepage template in Magento2 第一个答案。