Magento平台的關鍵功能是其模塊化。它由許多小的元素（模塊）組成，這些元素被設計成既可以單獨工作又可以相互連接。當所有部分組合在一起時，平台就像是由許多細胞組成的活生物體，每個細胞都有自己的功能。
為了連接這些組件並管理它們之間的交互，Magento 2使用XML布局和XML頁面配置。商店的每個網頁都有其自己的XML文件，其中特殊語法描述了結構並標識了在其上顯示所需的所有元素。
這些文件中使用的所有元素都分為兩種類型：容器和塊。根據該標准，容器主要用於XML布局中，而在XML配置中則使用塊。它直接取決於各自的功能負荷。
XML布局用於將容器放置在整個頁面上，以及設置視圖的類型和結構。這是XML模板的示例：
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="columns.top"> <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-"> <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/> <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/> </container> </referenceContainer> <referenceContainer name="content"> <block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml"> <container name="category.product.list.additional" as="additional"/> <block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/> </block> </block> </block> </page>
XML配置將每個塊分別分配到容器中，並為每個塊分配自己的配置，我們將在下面更詳細地介紹。
通常，這兩個概念很模糊，可以將布局和配置文件組合到一個文檔中。如果將配置參數添加到上述文檔中，就會發生這種情況。
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="columns.top"> <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-"> <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/> <block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/> <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/> </container> </referenceContainer> <referenceContainer name="content"> <block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml"> <block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml"> <container name="category.product.list.additional" as="additional" /> <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers"> <block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/> </block> <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto"> <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare" name="category.product.addto.compare" as="compare" template="Magento_Catalog::product/list/addto/compare.phtml"/> </block> <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml"> <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/> </block> <action method="setToolbarBlockName"> <argument name="name" xsi:type="string">product_list_toolbar</argument> </action> </block> </block> <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml"> <arguments> <argument name="triggers" xsi:type="array"> <item name="compareProductLink" xsi:type="string">.action.tocompare</item> </argument> </arguments> </block> </referenceContainer> <referenceBlock name="page.main.title"> <arguments> <argument name="id" xsi:type="string">page-title-heading</argument> <argument name="add_base_attribute_aria" xsi:type="string">page-title-heading toolbar-amount</argument> </arguments> <block class="Magento\Catalog\Block\Category\Rss\Link" name="rss.link" template="Magento_Catalog::category/rss.phtml"/> </referenceBlock> </body> </page>
可以在以下位置找到默認的布局和配置文件：module_name / view / frontend / layout。
布局中的容器可以包含塊，並且可以將它們有效地放置在頁面中。主要容器包括DOM元素，例如：
- 頭
- 標頭
- 主要
- 放在一邊（左或右）
這些元素將頁面布局划分為多個容器，以方便地將我們所需的塊排列在它們內部。默認情況下，Magento 2中預先安裝了5種類型的頁面布局：
- 空（沒有容器的頁面）
- 1列（用於內容的一個通用容器）
- 2列，帶左側欄（一個帶有左側欄內容的容器）
- 第2列帶右欄（一個帶有右欄的內容容器）
- 3列（3個可選容器）
圖片中突出顯示的元素是我們的容器，我們可以在頁面中放置所有必要的塊。將塊放置在內部是<container>元素的主要區別特征，但是值得注意的是，如果必要，<block>元素也可以包含其他元素甚至容器，因此它自動成為其子元素的容器。因此，我們可以假設<container>和<block>元素彼此絕對相同，但是它們的實現和工作方法仍然存在很大差異。此外，我們將考慮主要方法，它們的相似性和特色。
您應該知道，沒有人禁止創建自定義布局。您可以通過“ 內容”➜“頁面”➜“ Target_Page_Edit”➜“設計”➜“布局”中的管理面板，為特定頁面選擇網格。
或使用頁面的xml布局。為此，我們對<page>容器使用專用的布局屬性，在其中我們指定要在頁面上使用的網格選項。
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="page.main.title"> <arguments> <argument name="id" xsi:type="string">page-title-heading</argument> <argument name="add_base_attribute_aria" xsi:type="string">page-title-heading toolbar-amount</argument> </arguments> <block class="Magento\Catalog\Block\Category\Rss\Link" name="rss.link" template="Magento_Catalog::category/rss.phtml"/> </referenceBlock> </body> </page>
您可以看到使用<page>和<body> xml標記來配置我們的頁面容器，它們的語法與<html>語法非常相似。與html標記類似，必須關閉所有標記。在我們的情況下，它們可以通過</ page>或</ body>結束標記關閉，也可以是自動關閉的，例如<block name =“ blockName” />標記。
所有元素都可以具有特殊的屬性來控制其參數。例如，與容器一樣，具有layout =“ Layout_View_Grid”屬性，我們在其中指定其1column值。對於容器和塊，屬性及其值的列表大致相同：
塊和容器的通用屬性
| 屬性 | 值 | 描述 |
| name | 0-9，AZ，az z（-）（_）（。） *應以字母開頭 名稱=“當前名稱” |
記錄用於尋址的唯一名稱。 |
| before | （-）在當前塊中的所有元素之前顯示。 （元素名稱）在具有指定名稱的元素之前顯示元素。 （）如果缺少參數，則該元素被視為未定位，並根據當前布局顯示。 之前=“-” |
此屬性用於將元素放置在頁面布局內或容器本身內。 |
| after | （-）元素最終顯示在當前塊或容器中。 （元素名稱）在具有指定名稱的元素之后顯示元素。 （）如果缺少參數，則該元素被視為未定位，並根據當前布局顯示。 after =“ target_elemement” |
此屬性用於將元素放置在頁面布局內或容器本身內。比以前有優勢。 |
| as | 0-9，AZ，az z（-）（_）（。） *應以字母開頭 名稱=“ current_allias” |
指定的名稱用於標識父元素中的當前元素。 |
| cacheable | 真假 cacheable =“ false” |
啟用和禁用具有此屬性的元素所在的頁面的緩存。創建動態元素，小部件和頁面時，這是必需的。 |
*除名稱外，所有屬性均為可選。
塊和容器的屬性值及其功能負載相同。但是，容器具有僅對它們唯一的方法：
容器屬性
| 屬性 | 值 | 描述 |
| output | 0/1或true / false 輸出=“ 1” |
指定此屬性是為了確定是否渲染元素所在的父容器。默認情況下為假。 |
| HtmlTag | HTML 5теги（旁邊，主要，div…） HtmlTag =” div” |
容器內的所有內容都將在指定標簽內顯示給用戶。 |
| htmlId | 0-9，AZ，az z（-）（_）（。） *僅在設置了HtmlTag值時有效。 htmlId =” current_id_name” |
指定包裝的html Id選擇器已安裝。 |
| htmlClass | 0-9，AZ，az z（-）（_）（。） *僅在設置了HtmlTag值時有效。 htmlClass =” current_class_name” |
已安裝用於指定包裝器的html類選擇器。 |
| label | 任何值 | 設置了一個任意的容器名稱以在瀏覽器中顯示。 |
| layout | 頁面布局模板名稱的值。 布局=“ grid_name” |
用於設置所需的網格圖案。 |
*屬性是可選的
我們還考慮用於指定塊獨有屬性的參數：
塊屬性
| 屬性 | 值 | 描述 |
| class | 類的路徑及其名稱： class =“供應商\文件夾名稱\塊\類別文件夾\類別名稱” |
該屬性指定負責處理當前模板塊信息的類的路徑。它用於將新元素指向其處理程序或使用自定義元素覆蓋當前程序塊處理程序。 |
| template | 模板的路徑及其名稱： template =“供應商名稱:: folder_template / name_template.phtml” |
此屬性指定負責渲染當前布局塊信息的模板的路徑。它用於為其模板指定新元素或使用自定義模板覆蓋默認模板。 |
*這些值是可選的
使用說明
所謂的指令是在Magento 2中處理XML文件布局和頁面配置的附加工具。這些指令包括<block>和<container>標記本身，以及許多輔助標記。這些是主要的：
referenceBlock和referenceContainer
分別應用於塊或容器以使用以下屬性傳遞必要參數的指令：
| 屬性 | 值 | 描述 |
| name | 目標Container或Block的名稱 | 指示將指令傳遞到的塊或容器的名稱。 |
| remove | true/false | 刪除或取消刪除當前塊或容器。刪除容器時，所有子元素也將被刪除。 |
| display | true/false | 關閉或取消關閉當前容器或塊頁面上的呈現。禁用某個項目時，將保留處理該項目及其子元素的進一步可能性。 |
嵌套屬性
Magento 2有幾個可以插入到內部的屬性，語法從容器和塊的聲明對我們來說是熟悉的，看起來像這樣：
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <move element="category.cms" destination="page.wrapper" after="category.view.container"/> </layout>
用於以名稱“ category.view.container”重寫容器位置的移動指令示例。
移動
它是在頁面上定位元素並將其從一個容器遷移到另一個容器的理想工具。
考慮遷移標題欄的示例，該示例在主容器頂部的用戶帳戶中顯示當前選項卡：
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" > <body> <move element="page.main.title" destination="main" before="-"/> </body> </page>
標題塊從account-nav塊遷移到容器
僅使用布局中的一個命令，就可以輕松更改整個頁面的結構，而無需使用樣式和使用模板。該指令包括以下屬性：
- element —發送指令的目標元素的名稱；
- destination —將元素移動到的父元素的名稱；
- as —在元素移動后為其設置元素別名的名稱；
- after / before —用於定位在目標父元素內。
去掉
使用它，您可以刪除靜態資源元素，例如與<head>容器中的腳本文件和樣式相關聯的塊。
這是其應用示例：
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <head> <remove src="css/style-m.css"/> </head> </layout>
刪除以前連接的CSS映射文件
更新資料
如果當前頁面需要從父頁面的頁面布局中復制所有或大部分容器和塊，則建議使用此選項。
該指令在XML布局的開頭指定，並與handle屬性一起使用，該屬性指定父布局的路徑和文件名。此方法的功能類似於面向原型的編程中的super（）方法，並且執行相同的功能。目標布局文件將遞歸更新，即順序更新。
例如，在我們的項目中，需要將滑塊與許多頁面上的某些信息連接起來。在這種情況下，建議使用連接滑塊所需的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="page.wrapper"> <!--rev slider--> <container name="page.index.slider.container" htmlTag="div" htmlClass="page-slider-container" before="main.content"> <block class="Nwdthemes\Revslider\Block\Revslider"> <arguments> <argument name="alias" xsi:type="string">Midleton</argument> </arguments> </block> </container> </referenceContainer> </body> </page>
帶滑塊連接的頁面布局示例
將來，我們可以將此布局用作繼承文件的原型。為此，您需要為每個目標文檔中的更新目錄指定父布局文件的路徑。
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <update handle="{name_of_handle_to_include}"/> <!-- CONTENT --> </body> </page>
遞歸布局更新
因此，我們將在每個頁面上看到我們的滑塊，其中將以滑塊連接文件為原型指示update指令。
爭論
標簽用於將參數傳遞給容器或塊。
它具有必需的名稱和類型標簽。傳遞的元素的類型傳遞為type：
- string
- boolean
- object
- number
- null
- array
例如，在用戶帳戶的前面，我們將標題從標題移到了主容器，現在我們需要為myDashboard標題標簽設置一個自定義字符串。為此，我們打開負責myDashboard頁面的布局，並借助action指令和setPageTitle方法，將帶有頁面必要標題的字符串作為參數傳遞給字符串：
<referenceBlock name="page.main.title"> <action method="setPageTitle"> <argument translate="true" name="title" xsi:type="string">Hello, Customer!</argument> </action> </referenceBlock>
將參數作為頁面標題的字符串傳遞
我們將字符串指定為類型，並將所需的文本作為字符串傳遞。結果，我們得到了目標：
也可以使用get（）方法從當前模板文件訪問傳輸的值。此功能完全符合Magento中的通用性和模塊化原則。通過使用它，您可以創建一個通用動態模板，以在我們商店的多個位置應用，就像在將滑塊連接到頁面的通用布局示例中一樣。
例如，讓我們考慮創建一個帶有按鈕渲染的模板，該模板具有客戶端上的所有功能。我們將在不同的頁面上使用相同的模板，但是根據需求，我們可以將CSS類轉移到該模板上，樣式表中的某些樣式可以附加到該CSS類上，甚至可以在js上實現。這是標記中的樣子：
$_className = $block->getCssClass(); <div class="actions-toolbar <?= $_className ?>"> <button class="action primary">Button</button> </div>
將自定義參數傳遞給模板
要傳遞一個類，我們聲明我們的塊，並在template屬性中為其指定模板，稍后我們將對其進行考慮。之后，我們只需將任何參數作為參數傳遞給模板，然后使用<arguments>容器和其中包含的<argument>塊傳遞多個參數。我們將類作為名為css_class的參數傳遞。為了在模板文件中獲取它，您需要借助PHP的知識並編寫以下結構：
$_className = $block->getCssClass(); <div class="actions-toolbar <?= $_className ?>"> <button class="action primary">Button</button> </div>
用於獲取從模板傳遞的參數的方法的示例
此外，根據書面邏輯，按鈕可以在不同頁面上接受不同的修改。在此示例中，它變為白色。
實際上，這是使用此功能的最簡單示例，這是學習其工作原理所必需的。通過使用傳遞參數的方法，您可以做很多有用的事情，包括傳遞將決定控制器處理模板的參數。
可以有任何名稱的參數，並且不僅可以傳遞字符串，而且可以傳遞6種基本數據類型，如前所述。為了獲得模板中的屬性，該函數采用以下形式：
getCssClass（）;
以“ css_class”形式在xml中傳遞的name參數采用CamelCase形式，看起來像“СssClass”。此方法類似於使用數據屬性在JavaScript中傳遞參數的方法。
因此，Magento 2有大量工具可用於管理頁面布局，並使更改頁面配置並將其調整為必要的參數變得更加容易。掌握了使用它們的原理后，Magento 2開發人員可以更快更輕松地自定義用戶界面和統一的代碼結構，從而使其進一步的支持和擴展不僅為他們自己，而且為后續開發人員帶來樂趣。