Magento2通用布局定制任务经验
设置页面布局
特定页面的布局在页面配置文件中被定义,在根<page>
结点的layout属性中。
例如:将Advanced Search页面的布局由一列布局改为带左侧栏的两列布局:app/design/frontend/<Vendor>/<theme>/Magento_CatalogSearch/layout/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>
在<head>里加载静态资源(JavaScript, CSS, fonts)
JavaScript, CSS和其它静态资产在页面配置文件的<head>
区域被添加,默认地<head>
在app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
中被定义。建议在你自定义的主题中扩展该文件来加载JavaScript, CSS和其它静态资产。下面的文件包含了一些你必须添加的文件的示例:
<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"/>或
<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>
这样就能在生成的HTML中增加一个IE条件注释,如下:
<!--[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创建的自定义主题。
移除<head>中的静态资源(JavaScript, CSS, fonts)
要移除页面<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 name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-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
</arguments>
</block>
</referenceContainer>
创建一个块
块的创建(声明)使用<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>
引用一个块
要更新一个块,使用<referenceBlock>
指令。
示例:向logo
块传送图片
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>
使用块来设置模板
要设置模板的块,使用<argument>
指令来传递。
示例:改变page模板的title块
<referenceBlock name="page.main.title">
<arguments>
<argument name="template" xsi:type="string">Namespace_Module::title_new.phtml</argument>
</arguments>
</referenceBlock>
模型的路径被指明关系到模型的view/<area>/templates/
目录。<area>
对应布局文件被使用的地方。
修改块参数
要修改块参数,使用<referenceBlock>
指令
示例:改变已存在块中的参数并添加一个新参数。
初始块声明:
...
<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>
或<referenceBlock>
使用<argument>指令 - 使用<action>指令。不推荐使用该方法,不过可以用来调用未被重构,不能用
<argument>
的方法。
示例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>
设置页面标题
扩展布局:
...
<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
和after
属性:允许改变有同一父亲的元素的顺序。
<move>
使用示例:将产品页面中的stock availability和SKU块放在产品价格旁边。
在Magento Blank主题中这些元素的位置如下:
![magento2 layout customization before](http://7xjryy.com1.z0.glb.clouddn.com/magento2_layout_customization1.png)
让我们将产品库存和SKU块放到产品价格块的后面,将review块从product-info-price容器中移出。要实现这些,在app/design/frontend/OrangeCo/orange/Magento_Catalog/layout/
目录下添加catalog_product_view.xml
。
<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>
这将使得产品页面看起来像这样:
![magento2 layout customization after](http://7xjryy.com1.z0.glb.clouddn.com/magento2_layout_customization2.png)
移除元素
使用<referenceBlock>
和<referenceContainer>
的remove
属性可移除元素。
示例:移除店铺页面中的Compare Products侧边栏
这个块在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>
要移除这个块,你需要在你的主题中扩展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>
替换元素
要替换元素,你可以移除它然后添加一个新的。