自定義布局圖 · 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)