系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

通常，我们需要为我们的自定义主题或Magento商店的自定义要求创建自定义页面布局，以获得更好的前端视图。但是，Magento默认提供1列，2列-左，2列-右，3列。

但在某些情况下，您需要开发自定义页面布局，而不是使用默认页面布局来满足自定义要求。对于主页或您希望的任何特定页面，您可以更改页面设计以满足您的要求并提高页面性能。

我们可以通过一些编码知识在Magento本身中实现这一目标。您需要按照下面描述的步骤使用编码创建自定义页面布局。

例如，如果要创建custom_column布局，则需要关注两个基本文件，

layout.xml

page_layout/custom_column.xml

让我们从第一步开始，找到布局.xml文件，

app\code\Vendor\Extension\view\layout.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_column">
 
       <label translate="true">Custom layout</label>
 
    </layout>
 
</page_layouts>

使用此代码，将在管理面板中创建自定义布局文件。

page_layout/custom_column.xml

在以下位置找到page_layout/custom_column.xml文件，

app\code\Vendor\Extension\view\page_layout\custom_column.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="1column"/>
 
   <referenceContainer name="page.wrapper" htmlClass="page-wrapper page-layout-1column layout-custom-column"/>
 
</layout>

使用这些代码创建自定义页面布局文件后，您需要做的第一件事就是清除缓存。您的自定义页面布局将自动添加到页面布局列表中。

因此，在这篇文章中，我们了解到使用这些代码，您将能够为您的自定义主题或要求创建新的自定义页面布局，以便您可以获得更好的前端视图。此外，您还可以自定义布局以帮助提高页面性能。按照上述步骤操作，您就可以开始了。