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主题中这些元素的位置如下：

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

替换元素

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

时间： 2024-08-08 02:53:41

Magento2通用布局定制任务经验的相关文章

freemarker实现通用布局的模板拆分与复用

原文:http://www.hawu.me/coding/733 一.基础页面布局 假设我们项目页面的通用布局如下图所示: 实现这样的布局的基本html代码如下: XHTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> </head> <body> <div style="width: 700px; text-align:center; font-size:30px;"> &l

[转]PCB布局和布线经验

在设计中,布局是一个重要的环节.布局结果的好坏将直接影响布线的效果,因此可以这样认为,合理的布局是PCB设计成功的第一步. 布局的方式分两种,一种是交互式布局,另一种是自动布局,一般是在自动布局的基础上用交互式布局进行调整,在布局时还可根据走线的情况对门电路进行再分配,将两个门电路进行交换,使其成为便于布线的最佳布局.在布局完成后,还可对设计文件及有关信息进行返回标注于原理图,使得PCB板中的有关信息与原理图相一致,以便在今后的建档.更改设计能同步起来, 同时对模拟的有关信息进行更新,使得能对电

Flex布局的学习经验

做为css布局的又一种新方式,Flex拥有极强的使用效果,相比原来的float,position对元素样式的操作更加简洁,本文是我的一点学习经验和心得吧,如有错误以及不足之处,请多多指点. 好进入正题吧,首先借用阮一峰大神的一副图片: 再来说说flex的几个属性吧: 一.容器属性 1.flex-direction : row | row-reverse | column | column-reverse; 这个属性是定义元素在主轴上的排列顺序的,也就是上面的(main axis) row:元素在

关于CSS布局的一些经验

为了防止浏览器宽度变化影响内容的显示 通常会这样做 <body> <div class="wrapper"> …… </div></body> .wrapper { width:960px; margin:auto;} 这样内容就有了一个固定的宽度 而且能居中显示 当窗口宽度小于960px就要考虑响应式布局了 CSS定位默认static布局 按照从上往下排列 relative是相对于static布局设置位置 absolute是确切位置 f

(十）android项目中，通用布局的对话框的实现。

在工作中,我们的APP项目中经常需要用到dialog,一般设计师对于一个APP项目,会设计使用同一个风格,显示不同内容的对话框,所以为了提高开发的效率,我们可以针对一个项目设计一个通用的对话框,所有用到的地方都可以调用.本文针对下面效果的对话框,实现了一个通用对话框,具体实现核心代码如下所示. 1 CustomDialog.java代码实现如下所示: import android.app.ActionBar.LayoutParams; import android.app.Dialog; imp

阿里布局

还需整理 1. 线性布局(LinearLayoutHelper) /** 设置线性布局 */ LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper(); // 创建对应的LayoutHelper对象 // 所有布局的公共属性(属性会在下面详细说明) linearLayoutHelper.setItemCount(4); // 设置布局里Item个数 linearLayoutHelper.setPadding(10,10,10

现成的与定制的软件：为您的企业做出正确的选择

常年构建与购买问题继续困扰着企业寻找软件解决方案.一旦安装在计算机或设备上,现成的软件即可使用.另一方面,定制软件是根据特定要求和规范开发的. 这两种技术在性能,功能和可用性方面存在巨大差距.每个选项都有自己的优点和缺点,这里有一个相同的纲要. 成本问题 与定制开发的产品相比,现成的产品通常价格适中; 显而易见的原因是,开发现成产品所涉及的成本是在大量买家之间分配的,因此定价分散在几个待售许可证上.另一方面,定制产品是专门为客户开发的,因此,所有开发费用将由该个别客户承担.因此,考虑到成本,似乎

flex布局帮助你快速实现布局

flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个盒子都可以指定为flex布局,但是要注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 下面我们看看我们网站经常遇到实例:我们要让图片,文字居中并且都贴底部布局,以往的经验会,父容器设置text-align:center,但是垂直方向就很繁琐了,

布局视图

布局视图 原文:Layout作者:Steve Smith翻译:娄宇(Lyrics)校对:孟帅洋(书缘) 视图(View)经常共享视觉元素和编程元素.在本篇文章中,你将学习如何在你的 ASP.NET 应用程序中使用通用布局视图.共享指令以及在渲染视图前运行通用代码. 章节: 什么是布局视图 指定布局 导入共享指令 在视图之前运行代码 什么是布局视图 大部分 Web 应用程序在用户切换页面时,使用通用布局提供了一致的用户体验.通用布局通常包含页眉.导航栏(或菜单)以及页脚等通用 UI 元素. 在一个