Magento2 主题 - 布局和模板2

Magento2 主题 - 布局和模板2
2018年10月9日 浏览量 36 2 min read
Magento2 主题 - 布局和模板2

这是上一篇关于布局博客的后续,在此我们将看到更多使用布局和自定义的示例。

 

referenceBlock

这用于删除或隐藏现有块,这里使用非常简单,假设我们想从magento的顶部标题中删除搜索框

在我们之前创建的default.xml布局文件中添加此代码来删除搜索框

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="top.search" remove="true" />
    </body>
</page>

更多细节请看这里

 

container

container是构建块,但它们没有与之关联的任何模板或类,它们只是用于容纳其他的块。如果在container内添加任何块,它将自动输出,但这并不适用于块。在一个块内添加另一个块,它不会自动输出,我们需要调用

$block->getChildHtml('block_name')去渲染它

让我们来了解如何使用container,创建一个footer container并通过不同的块添加社交媒体链接
以下是最终输出的结果

这是怎么做到的

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="footer">
        <container after="footer_links" name='social.links' htmlTag="ul" htmlClass="footer links">
            <block name="facebook" class="Magento\Framework\View\Element\Template" 
             template="Magento_Theme::footer/facebook.phtml" />
                <block name="google" class="Magento\Framework\View\Element\Template" 
                 template="Magento_Theme::footer/google.phtml" />
                <block name="twitter" class="Magento\Framework\View\Element\Template" 
                 template="Magento_Theme::footer/twitter.phtml" />
            </container>
        </referenceContainer>
    </body>
</page>

在上面的代码中,我从其他布局文件中参考了“footer”这个container,然后在其中添加一个新container,并进一步向container添加多个块

这里教你如何使用

referenceContainer

after

同样

referenceContainer

referneceBlocks

是相同的,可以用来删除或添加子container,块

更多细节看这里

 

move

这用于移动块或container,即更改块/container的父级

假设我们需要将邮件订阅从footer转移到header

步骤1:打开模板路径提示,找出邮件订阅的模块即Magento_Newsletter 

步骤2:从Magento/Newsletter/view/frontend/layout/default.xml中找到邮件订阅的块名称,即“form.subscribe”

步骤3:在你的主题包中创建Magento_Newsletter/layout/default.xml文件并添加此代码

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="form.subscribe" destination="header-wrapper" />
        </body>
    </page>

这里我们将'from.subscibe'块移动到'header-wrapper'container

另外需要注意的是,在上面的代码中我们创建了一个新文件夹'Magento_Newsletter',这并不是必需的。我们总是可以在任何default.xml布局文件中编写代码,但要保持magento编码风格,这一点很重要,如果不遵循这一点,则无法找到对应块是在哪个文件中定义的。

您还可以通过浏览这些博客来进一步理解布局的重要性

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-extend.html

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-override.html

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-practice.html

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-walkthrough.html

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-override.html

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-sample.html

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-security.html

Previous article:
Next article:
Comments
发表评论,留下你的足迹
我们不会公开你的邮箱地址

是否允许我们在发布新内容或者进行促销活动向您发送消息?

Remind me later

Thank you! Please check your email inbox to confirm.

Oops! Notifications are disabled.

© 2014-2023 www.magease.com. All Rights Reserved. 寰云网络 版权所有    鲁ICP备 14014975号-1