企业🤖AI智能体构建引擎，智能编排和调试，一键部署，支持私有化部署方案 广告
**本文介绍了以下典型布局定制任** 为了确保稳定性和升级过程中被删除保护您的自定义，不改变外的现成的Magento模块和主题布局。要自定义布局，自定义主题创建扩展和压倒一切的布局文件。 **设置页面布局** 页面布局的用于特定网页的类型的页配置文件中定义 在根节点<page>的layout属性 例如：更改高级搜索页面的布局 从默认的“1列”到“左边2列 怎么做 继承catalogsearch_advanced_index.xml在你的主题中加入以下布局： ~~~ <page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> ... </page> ~~~ **载入静态资源（JavaScript中，CSS，字体)** JavaScript，CSS和其它静态资产在页面<head>头部配置载入。 Magento的商店页面的<head>默认外观被定义为:app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml 添加CSS和JavaScript的推荐方法是延长你的自定义主题此文件，并添加资产存在。下面的文件是你必须添加一个文件的样本： ~~~ <theme_dir>/Magento_Theme/layout/default_head_blocks.xml <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <!-- Add local resources --> <css src="css/my-styles.css"/> <!-- The following two ways to add local JavaScript files are equal --> <script src="Magento_Catalog::js/sample1.js"/> <link src="js/sample.js"/> <!-- Add external resources --> <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" /> <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> </head> </page> ~~~ 当添加外部资源，指定src_type =“URL”参数值是必须的。 您可以使用<link src="js/sample.js"/> or <script src="js/sample.js"/>指令在本地存储的JavaScript文件添加到您的主题。 文件资源的路径指定目录： * <theme_dir>/web * <theme_dir>/<Namespace>_<Module>/web *添加条件注释* 有条件的注释是为了给Internet Explorer的特别说明。在加资产的条款，您可以添加到被包含的Internet Explorer的特定版本的CSS文件。一个示例如下： ~~~ <head> <css src="css/ie-9.css" ie_condition="IE 9" /> </head> </page> ~~~ 这增加了一个IE条件注释在生成的HTML，像下面的例子： ~~~ <!--[if IE 9]> <link rel="stylesheet" type="text/css" media="all" href="<your_store_web_address>/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css" /> <![endif]--> ~~~ 在这个例子中，orange的由OrangeCo供应商创建自定义主题。 **删除静态资源（JavaScript中，CSS，字体）** 要删除静态资源 在一个页面<head>使类似主题扩展文件中的以下变化： ~~~ app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <!-- Remove local resources --> <remove src="css/styles-m.css" /> <remove src="my-js.js"/> <remove src="Magento_Catalog::js/compare.js" /> <!-- Remove external resources --> <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/> <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/> <remove src="http://fonts.googleapis.com/css?family=Montserrat" /> </head> ~~~ 请注意，如果静态资产中加入一个模块路径（例如Magento_Catalog :: JS / sample.js）在最初的布局，你需要指定模块路径以及移除资产时。 **创建一个容器container** 使用下面的示例来创建（声明）容器： ~~~ <container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" /> ~~~ **参考一个container容器** 要更新container容器使用<referenceContainer>标签指令 例如：添加链接到页面页眉面板。 ~~~ <referenceContainer name="header.panel"> <block class="Magento\Framework\View\Element\Html\Links" name="header.links"> <arguments> <argument name="css_class" xsi:type="string">header links</argument> </arguments> </block> </referenceContainer> ~~~ **创建block块** 创建块（声明）使用 <block>标签指令 例如：添加一个模块与产品SKU信息。 ~~~ <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type"> <arguments> <argument name="at_call" xsi:type="string">getSku</argument> <argument name="at_code" xsi:type="string">sku</argument> <argument name="css_class" xsi:type="string">sku</argument> </arguments> </block> ~~~ **参考一个block块** 要更新块使用 <referenceBlock> 指令 例：将图像传递到logo的block。 ~~~ <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.png</argument> </arguments> </referenceBlock> ~~~ **设置由block使用的模板** 要设置一个block的模板，使用<argument>指令。 例如：网页标题栏的变化模板： ~~~ <referenceBlock name="page.main.title"> <arguments> <argument name="template" xsi:type="string">Namespace_Module::title_new.phtml</argument> </arguments> </referenceBlock> ~~~ 相对指定给模块的 view/<area>/templates/目录对模板的路径。该对应于<area>用于该布局文件的区域。 **修改block块参数** 要修改块参数，使用<referenceBlock>指令 例如：改变现有的block块参数的值，并添加一个新的argument。 初始块声明： ~~~ ... <block class="Namespace_Module_Block_Type" name="block.example"> <arguments> <argument name="label" xsi:type="string">Block Label</argument> </arguments> </block> ... ~~~ 扩展布局： ~~~ ... <referenceBlock name="block.example"> <arguments> <!-- Modified block argument --> <argument name="label" xsi:type="string">New Block Label</argument> <!- Newly added block argument --> <argument name="custom_label" xsi:type="string">Custom Block Label</argument> </arguments> </referenceBlock> ... ~~~ **使用block对象方法来设置block属性 ** 有访问block对象的方法有两种： * 使用<argument>指令在<block>和<referenceBlock>中. * 使用<action>指令, 不建议这种方式，但可用于调用这些方法，这是不重构尚未通过被访问。 例1：使用<argument>设置一个CSS类和使用添加属性的产品页面 扩展布局： ~~~ <referenceBlock name="page.main.title"> <arguments> <argument name="css_class" xsi:type="string">product</argument> <argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument> </arguments> </referenceBlock> ~~~ 例2：使用<action>设置页面标题 不要使用<action>，如果该方法<block> or <referenceBlock>允许使用<argument> 扩展布局： ~~~ ... <referenceBlock name="page.main.title"> <action method="setPageTitle"> <argument translate="true" name="title" xsi:type="string">Catalog Advanced Search</argument> </action> </referenceBlock> ... ~~~ **重新排列元素** 在布局文件，你可以更改页面上的元素顺序。这可以使用以下之一来完成： <move>标签和指令允许更改元素的顺序和父类。 <block>中的before and after属性：允许父类一方内改变元素的顺序 例如<move>用法： 把库存及SKU的bloks旁边的产品价格产品页面上。 在Magento的blank主题,这些标签位位置如下： ![](https://box.kancloud.cn/2016-03-08_56de83d28f5ac.png) Let’s place the stock availability and SKU blocks after product price block on a product page, and move the review block out of the product-info-price container. To do this, add the extending catalog_product_view.xml in the app/design/frontend/OrangeCo/orange/Magento_Catalog/layout/ directory: ~~~ <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/> <move element="product.info.review" destination="product.info.main" before="product.info.price"/> </body> </page> ~~~ 这将使得在产品页面的样子如下： ![](https://box.kancloud.cn/2016-03-08_56de83d2b6147.png) 要了解如何找到您需要定制布局文件，请参阅查找模板，布局和样式。 **删除元素** Elements are removed using the remove attribute for the <referenceBlock> and <referenceContainer>. 示例：从所有的商店页面中删除比较产品侧边栏块。 ~~~ This block is declared in app/code/Magento/Catalog/view/frontend/layout/default.xml: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> ... <referenceContainer name="sidebar.additional"> <block class="Magento\Catalog\Block\Product\Compare\Sidebar" name="catalog.compare.sidebar" template="product/compare/sidebar.phtml"/> </referenceContainer> ... </body> </page> ~~~ 要删除block块，添加扩展default.xml中在你的主题：<theme_dir>/Magento_Catalog/layout/default.xml 在这个文件中，引用已增加remove属性的元素： ~~~ <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> ... <referenceBlock name="catalog.compare.sidebar" remove="true" /> ... </body> </page> **替换元素** ~~~ 要替换一个元素，将其删除，并添加一个新的。