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