自定义布局图 · magento 2.0开发手册

本文设有一个一步一步说明如何进行现实生活中的布局自定义任务。也就是说，它说明如何改变客户账户链接布局Magento的商店页面标题。 **移除客户账户链接** 在他们的Orange主题，OrangeCo要转换头链接块来下拉，它在亮度Magento的主题做的方式： ![](https://box.kancloud.cn/2016-03-08_56de83d2eb52b.png) 要做到这一点，他们需要换头链接列表中有一个容器，并添加一个问候与列表前一个下拉箭头。默认情况下所呈现的标题链接看起来像以下： ![](https://box.kancloud.cn/2016-03-08_56de83d31ad8d.png) 需要： ![](https://box.kancloud.cn/2016-03-08_56de83d32ca88.png) 第1步：定义block OrangeCo适用亮度的主题。使用说明中找到模板，布局和样式，他们找出办法，负责显示的标题链接<Magento_Customer_module_dir>/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> <referenceBlock name="top.links"> <block class="Magento\Customer\Block\Account\Link" name="my-account-link"> <arguments> <argument name="label" xsi:type="string" translate="true">My Account</argument> </arguments> </block> <block class="Magento\Customer\Block\Account\RegisterLink" name="register-link"> <arguments> <argument name="label" xsi:type="string" translate="true">Register</argument> </arguments> </block> <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link" template="account/link/authorization.phtml"/> </referenceBlock> </body> </page> ~~~ 第2步：定义模板类似于它们所定义的前一步骤中的布局方式，OrangeCo限定其用于重新排列链接的模板： ~~~ <Magento_Customer_module_dir>/view/frontend/templates/account/customer.phtml <?php if($this->customerLoggedIn()): ?> <li class="customer welcome customer-welcome"> <span class="customer name" data-mage-init='{"dropdown":{}}' data-toggle="dropdown"> <span><?php echo $this->getCustomerName(); ?></span> <button type="button" class="action switch"><span><?php echo __('Change')?></span></button> </span> <?php if($this->getChildHtml()):?> <div class="customer menu customer-menu" data-target="dropdown"> <?php echo $this->getChildHtml();?> </div> <?php endif; ?> </li> <?php endif; ?> ~~~ 步骤3：基地布局扩展添加一个block0块 OrangeCo需要创建一个新的块，也就是说，header.links，在header.panel容器，以移动链接那里。作为链路可以由不同的模块被添加到该列表中，最好是此块添加到Magento_Theme模块的default.xml中页配置。 So the following extending layout is added in the Orange theme: ~~~ app/design/frontend/OrangeCo/orange/Magento_Theme/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="header.panel"> <block class="Magento\Framework\View\Element\Html\Links" name="header.links"> <arguments> <argument name="css_class" xsi:type="string">header links</argument> </arguments> </block> </referenceContainer> </body> </page> ~~~ 第4步：移除链接要移动的链接，header.links的block，OrangeCo增加了一个扩展布局： ~~~ app/design/frontend/OrangeCo/orange/Magento_Customer/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> <referenceBlock name="header.links"> <block class="Magento\Customer\Block\Account\Customer" name="customer" template="account/customer.phtml" before="-"/> <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login" template="account/link/authorization.phtml"/> </referenceBlock> <move element="register-link" destination="header.links"/> <move element="top.links" destination="customer"/> <move element="authorization-link" destination="top.links" after="-"/> </body> </page> ~~~ 现在客户的联系看起来是这样的： ![](https://box.kancloud.cn/2016-03-08_56de83d33e35a.png) 最后触摸添加样式： ![](https://box.kancloud.cn/2016-03-08_56de83d34fcbb.png)