magento使用xml描述layout，layout上的两大元素单元有Container和Block。整个页面都由block组成，block应该包含视图逻辑代码与模板。但大多数简单的block元素，可以使用magento提供的基类。
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <!-- 通过layout可以修改title --> <referenceBlock name="page.main.title"> <action method="setPageTitle"> <argument translate="true" name="title" xsi:type="string">Page Title</argument> </action> </referenceBlock> <!-- container将声明容器，block必须放在container内 --> <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> <!-- referenceContainer对已存在容器进行改造 --> <referenceContainer name="sidebar.additional"> <!-- block将声明区块 --> <block class="Magento\Framework\View\Element\Template" name="catalog.compare.sidebar" template="Magento_Catalog::product/compare/sidebar.phtml"> <!-- action将直接调用block class中的方法 --> <action method="setText"> <argument name="text" translate="true" xsi:type="string">Text</argument> </action> <!-- arguments是block class的属性列表，从于从XML传递参数到class --> <arguments> <!-- cache生命周期 --> <argument name="cache_lifetime" xsi:type="number">84600</argument> </arguments> </block> <!-- referenceBlock对已存在block进行改造，例如删除它，或修改arguments --> <referenceBlock name="catalog.compare.sidebar" remove="true" /> <!-- 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"/> </referenceContainer> </body></page>
<block class="Magento\Framework\View\Element\Template" name="header.customer.section" template="Magento_Theme::html/container.phtml"> <arguments> <argument name="title" translate="true" xsi:type="string">Header Account Section</argument> <argument name="item_class" xsi:type="string">header-account</argument> </arguments></block>
<block class="Magento\Framework\View\Element\Html\Links" name="header.customer.links.login"> <arguments> <argument name="css_class" xsi:type="string">nav items</argument> </arguments> <!-- 有高亮效果的链接 --> <block class="Magento\Framework\View\Element\Html\Link\Current" name="header.customer.link.info"> <arguments> <argument name="label" xsi:type="string" translate="true">Account Information</argument> <argument name="path" xsi:type="string">customer/account/edit</argument> </arguments> </block> <block class="Magento\Framework\View\Element\Html\Link\Current" name="header.customer.link.logout"> <arguments> <argument name="label" xsi:type="string">Logout</argument> <argument name="path" xsi:type="string">customer/account/logout</argument> </arguments> </block></block>
<block class="Infinity\View\Block\Element\Html\Link" name="header.search.link"> <arguments> <argument name="item_class" xsi:type="string">block-search</argument> <argument name="data-popup-block" xsi:type="string" translate="false">popupSearch</argument> <argument name="class" xsi:type="string" translate="false">search-link</argument> <argument name="label" xsi:type="string" translate="true">Search</argument> <argument name="path" xsi:type="string" translate="false">#search_mini_form</argument> </arguments></block>
<block class="Magento\Framework\View\Element\Text" name="tablet.toggle.nav"> <arguments> <argument name="title" translate="true" xsi:type="string">Toggle Nav</argument> <argument name="item_class" xsi:type="string">action nav-toggle</argument> <argument name="data_action" xsi:type="string">toggle-nav</argument> <argument name="text" xsi:type="string"><![CDATA[<!-- Toggle Nav -->]]></argument> </arguments></block>
<block class="Magento\Cms\Block\Block" name="footer_links_block"> <arguments> <argument name="block_id" xsi:type="string">footer_links_block</argument> </arguments></block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml"> <arguments> <argument name="at_call" xsi:type="string">getSku</argument> <argument name="at_code" xsi:type="string">sku</argument> <argument name="css_class" xsi:type="string">sku</argument> <argument name="at_label" xsi:type="string">SKU:</argument> <argument name="add_attribute" xsi:type="string">itemprop="sku"</argument> </arguments></block>
<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/container.phtml"></block>
<block class="Magento\Framework\View\Element\Template" name="customer_account_navigation_block" template="Magento_Theme::html/collapsible.phtml" before="-"> <arguments> <argument name="block_title" translate="true" xsi:type="string">Account Dashboard</argument> <argument name="block_css" xsi:type="string">block-collapsible-nav</argument> </arguments> <block class="Magento\Framework\View\Element\Html\Links" name="customer_account_navigation" before="-"> <arguments> <argument name="css_class" xsi:type="string">nav items</argument> </arguments> <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-account-link"> <arguments> <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument> <argument name="path" xsi:type="string">customer/account</argument> </arguments> </block> </block></block>
可通过group_behaviour修改效果
<block class="Magento\Framework\View\Element\Template" name="navigation.sections" template="Magento_Theme::html/sections.phtml"> <arguments> <argument name="group_name" xsi:type="string">navigation-sections</argument> <argument name="group_css" xsi:type="string">nav-sections</argument> </arguments> <block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml"> <arguments> <argument name="title" translate="true" xsi:type="string">Menu</argument> </arguments> </block></block>