magneto2 layout

時間 2019-11-09

標籤 magneto2 magneto layout 简体版

原文原文鏈接

magento使用xml描述layout，layout上的兩大元素單元有Container和Block。整個頁面都由block組成，block應該包含視圖邏輯代碼與模板。但大多數簡單的block元素，可使用magento提供的基類。css

經常使用LAYOUT調整元素

<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>

引用CMS 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>

product屬性

<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>

container, 會輸出包含的全部元素

<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/container.phtml">
</block>

collapsible, 對包含元素帶展開效果

<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>

sections，對每一個包含元素帶tags效果

可經過group_behaviour修改效果html

<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>

1. Layout
2. layout
3. Auto Layout + Manual Layout 混用
4. Android Layout之三：Linear Layout
5. grid layout
6. Grid Layout
7. CakePHP Layout
8. H5 Layout
9. measure layout
10. flexbox layout
更多相關文章...
• XSL-FO layout-master-set 對象 - XSL-FO 教程
• Scala 高階函數 - Scala教程

相關標籤/搜索

layout

Auto Layout

src&layout

logger+appender+layout

Layout 佈局

Layout的新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。