Magento2 自定义CMS页面布局

我们已经请求在一个Magento商店中为CMS页面添加新的自定义布局。
这可能非常有用，可以为您的商店的不同静态页面节省大量时间。

在这个例子中，我们将创建一个名为Magease Layout的布局。

我们应该关注两个XML文件：layouts.xml和Magento_Theme文件夹下的page_layout/magease-layout.xml

在以下路径创建magease-layout.xml：

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/test-layout.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" after="-" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

我们的布局基于空页面布局，您还可以基于另一个布局创建布局。

我们的布局是基于空页面布局，您还可以创建一个基于另一个布局的布局。
只需将<update handle =“empty”/>替换为您要使用的布局，例如<update handle =“3columns”/>

在以下路径创建layouts.xml：

app/design/frontend/_YOUR_VENDOR/_YOUR_THEME_/Magento_Theme/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="magease-layout">
        <label translate="true">Magease Layout</label>
    </layout>
</page_layouts>

现在，在布局列表中可以看到我们的自定义布局。

前端：

注意：清除缓存！