**本文介绍了以下典型布局定制任** 为了确保稳定性和升级过程中被删除保护您的自定义,不改变外的现成的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> **替换元素** ~~~ 要替换一个元素,将其删除,并添加一个新的。