Magento2通用布局定制任务经验

首页 > 代码库 > Magento2通用布局定制任务经验

Magento2通用布局定制任务经验

2024-08-13 01:58:35 220人阅读

设置页面布局

特定页面的布局在页面配置文件中被定义，在根<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="http://www.mamicode.com/css/my-styles.css"/>            <!-- The following two ways to add local JavaScript files are equal -->        <script src="http://www.mamicode.com/Magento_Catalog::js/sample1.js"/>        <link src="http://www.mamicode.com/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="http://www.mamicode.com/js/sample.js"/>或<script src="http://www.mamicode.com/js/sample.js"/>指令来添加本地存储的JavaScript文件到你的主题。

指定资源的路径必须是以下中的一个：

<theme_dir>/web
<theme_dir>/<Namespace>_<Module>/web

添加条件注释

条件注释意味着针对Internet Explorer给出特殊的指令。你可以给特定版本的Internet Explorer添加CSS文件。以下是一个示例：

<head>        <css src="http://www.mamicode.com/css/ie-9.css" ie_condition="IE 9" />    </head></page>

这样就能在生成的HTML中增加一个IE条件注释，如下：

<!--[if IE 9]><link rel="stylesheet" type="text/css" media="all" href="http://www.mamicode.com//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="http://www.mamicode.com/css/styles-m.css" />        <remove src="http://www.mamicode.com/my-js.js"/>        <remove src="http://www.mamicode.com/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主题中这些元素的位置如下：

让我们将产品库存和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>

这将使得产品页面看起来像这样：

移除元素

使用<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>

替换元素

要替换元素，你可以移除它然后添加一个新的。

Magento2通用布局定制任务经验

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Magento2通用布局定制任务经验