【magento2模板开发专题12】布局说明

最新推荐文章于 2023-09-05 12:39:07 发布

深漂小码哥

最新推荐文章于 2023-09-05 12:39:07 发布

阅读量907

点赞数

分类专栏：后端PHP/Golang/.NET/JAVA 文章标签： magento2模板开发

本文链接：https://blog.csdn.net/qq2942713658/article/details/81279530

版权

后端PHP/Golang/.NET/JAVA 专栏收录该内容

990 篇文章 0 订阅

订阅专栏

更改布局文件是一个自定义页面布局在Magento的两种可能的方式（二是改变模板）。改变页面线框图，修改页面布局文件; 所有其他自定义项中进行的页面配置或通用文件。

使用布局（Layout）说明:

将页元素移动到另一个父元素
添加内容
移除页面元素

基本的指令集对于所有类型的布局文件都是一样的。

常见的布局（Layout）说明

使用下面的布局说明自定义布局：

<block>
<container>
bdfore和after属性
<action>
<referanceBlock>和<referanceContainer>
<movee>
<remove>
<update>
<argument>
<arguments>

<block>

定义块（block）。

细节:块是页面输出的一个单位，它呈现一些独特的内容--一段信息，一个用户界面元素--任何视觉上看得见的最终用户。块使用模板生成HTML。块的示例包括类别列表、迷你购物车、产品标签和产品列表。

传递参数使用 <argument></argument> 指令.

<container>

一种没有内容的结构，它保存其他布局元素，如块和容器。

细节: 容器在视图输出生成期间呈现子元素。它可以是空的，也可以包含任意一组 <container> 和 <block> 元素。布局使用示例：

...
<container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
    <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
</container>
...

这将为页面布局添加新列。

before 和 after 属性

帮助你的可用性在一个特定的顺序适合设计、SEO、位置的元素，或其他要求，Magento软件提供before 和 after 布局属性。

这些可选属性可用于布局xml文件以控制其共同父元素的顺序。

<action>

示例:

<block class="Magento\Module\Block\Class" name="block">
    <action method="setText">
        <argument name="text" translate="true" xsi:type="string">Text</argument>
    </action>
    <action method="setEnabled">
        <argument name="enabled" xsi:type="boolean">true</argument>
    </action>
</block>

若要传递参数，请使用 <argument></argument> 指令.

<referenceBlock> 和 <referenceContainer>

更新<referenceBlock> 和 <referenceContainer> 被应用到相应的 <block> 或 <container>.

例如，如果你做一个参考<referenceBlock name="right">, 你的目标块 <block name="right">.

将参数传递给块使用 <argument></argument>指令.

示例:

<referenceBlock name="block.name" remove="true" />

示例:

<referenceContainer name="container.name" display="false" />

<move>

示例:

<move element="name.of.an.element" destination="name.of.destination.element" as="new_alias" after="name.of.element.after" before="name.of.element.before"/>

<remove>

用法举例：

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

<update>

包含一定的布局文件。使用如下：

<update handle="{name_of_handle_to_include}"/>

<argument>

通过下列参数传递多个参数：

<arguments>
   <argument></argument>
   <argument></argument>
   ...
</arguments>

若要传递数组的参数，请使用以下结构：

<argument>
   <item></item>
   <item></item>
   ...
</argument>

在布局文件中设置的参数值可以模板在使用 get{ArgumentName}() 和 has{ArgumentName}() 方法。示例: 设置一个 css_class值在 app/code/Magento/Theme/view/frontend/layout/default.xml布局文件:

...
<arguments>
    <argument name="css_class" xsi:type="string">header links</argument>
</arguments>
...

使用css_class值，在app/code/Magento/Theme/view/frontend/templates/html/title.phtml:

...
$cssClass = $this->getCssClass() ? ' ' . $this->getCssClass() : '';
...

<arguments>

<arguments> 是一个必需的容器 <argument>. 它没有自己的属性。示例:

...
<arguments>
    <argument name="css_class" xsi:type="string">header links</argument>
</arguments>

深漂小码哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录