設置頁面布局
特定頁面的布局在頁面配置文件中被定義，在根<page>結點的layout屬性中。
例如：將Advanced Search頁面的布局由一列布局改為帶左側欄的兩列布局：app/design/frontend/<Vendor>/<theme>/Magento_CatalogSearch/layout/catalogsearch_advanced_index.xml
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
...
</page>
在<head>里加載靜態資源（JavaScript, CSS, fonts）
JavaScript, CSS和其它靜態資產在頁面配置文件的<head>區域被添加，默認地<head>在app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml中被定義。建議在你自定義的主題中擴展該文件來加載JavaScript, CSS和其它靜態資產。下面的文件包含了一些你必須添加的文件的示例：
<theme_dir>/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Add local resources -->
<css src="css/my-styles.css"/>
<!-- The following two ways to add local JavaScript files are equal -->
<script src="Magento_Catalog::js/sample1.js"/>
<link src="js/sample.js"/>
<!-- Add external resources -->
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
<link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
</head>
</page>
要添加外部資源時，必須要指明src_type="url"參數。
你可以使用<link src="js/sample.js"/>或<script src="js/sample.js"/>指令來添加本地存儲的JavaScript文件到你的主題。
指定資源的路徑必須是以下中的一個：
- <theme_dir>/web
- <theme_dir>/<Namespace>_<Module>/web
添加條件注釋
條件注釋意味着針對Internet Explorer給出特殊的指令。你可以給特定版本的Internet Explorer添加CSS文件。以下是一個示例：
<head>
<css src="css/ie-9.css" ie_condition="IE 9" />
</head>
</page>
這樣就能在生成的HTML中增加一個IE條件注釋，如下：
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="<your_store_web_address>/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css" />
<![endif]-->
上面例子中的orange是被OrangeCo創建的自定義主題。
移除<head>中的靜態資源（JavaScript, CSS, fonts）
要移除頁面<head>中的靜態資源，按照下面的擴展文件做些類似的修改即可：
app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<remove src="my-js.js"/>
<remove src="Magento_Catalog::js/compare.js" />
<!-- Remove external resources -->
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
<remove src="http://fonts.googleapis.com/css?family=Montserrat" />
</head>
注意，如果在初始文件中靜態塊帶有模型路徑（例如：Magento_Catalog::js/sample.js），那么在移除時也應指明模型路徑。
創建一個容器
使用下面的例子來創建（聲明）一個容器
<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />
引用一個容器
要更新一個容器，使用<referenceContainer>指令。
示例：添加鏈接到頁面頭部面板
<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
</arguments>
</block>
</referenceContainer>
創建一個塊
塊的創建（聲明）使用<block>指令。
示例：增加一個產品SKU信息的塊
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
<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>
</arguments>
</block>
引用一個塊
要更新一個塊，使用<referenceBlock>指令。
示例：向logo塊傳送圖片
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>
使用塊來設置模板
要設置模板的塊，使用<argument>指令來傳遞。
示例：改變page模板的title塊
<referenceBlock name="page.main.title">
<arguments>
<argument name="template" xsi:type="string">Namespace_Module::title_new.phtml</argument>
</arguments>
</referenceBlock>
模型的路徑被指明關系到模型的view/<area>/templates/目錄。<area>對應布局文件被使用的地方。
修改塊參數
要修改塊參數，使用<referenceBlock>指令
示例：改變已存在塊中的參數並添加一個新參數。
初始塊聲明：
...
<block class="Namespace_Module_Block_Type" name="block.example">
<arguments>
<argument name="label" xsi:type="string">Block Label</argument>
</arguments>
</block>
...
擴展布局：
...
<referenceBlock name="block.example">
<arguments>
<!-- Modified block argument -->
<argument name="label" xsi:type="string">New Block Label</argument>
<!- Newly added block argument -->
<argument name="custom_label" xsi:type="string">Custom Block Label</argument>
</arguments>
</referenceBlock>
...
使用塊對象方法來設置塊性能
有兩種方式訪問塊對象方法：
- 對
<block>或<referenceBlock>使用<argument>指令 - 使用<action>指令。不推薦使用該方法，不過可以用來調用未被重構，不能用
<argument>的方法。
示例1：使用<argument>為產品頁面設置CSS類並添加一個屬性
擴展布局：
<referenceBlock name="page.main.title">
<arguments>
<argument name="css_class" xsi:type="string">product</argument>
<argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
</arguments>
</referenceBlock>
示例2：使用<action>設置頁面標題
擴展布局：
...
<referenceBlock name="page.main.title">
<action method="setPageTitle">
<argument translate="true" name="title" xsi:type="string">Catalog Advanced Search</argument>
</action>
</referenceBlock>
...
元素重新排序
在布局文件中你可以改變頁面中元素的順序，使用下面的方法即可實現：
<move>指令：允許改變元素的順序和父親。<block>的before和after屬性：允許改變有同一父親的元素的順序。
<move>使用示例：將產品頁面中的stock availability和SKU塊放在產品價格旁邊。
在Magento Blank主題中這些元素的位置如下：
讓我們將產品庫存和SKU塊放到產品價格塊的后面，將review塊從product-info-price容器中移出。要實現這些，在app/design/frontend/OrangeCo/orange/Magento_Catalog/layout/目錄下添加catalog_product_view.xml。
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
<move element="product.info.review" destination="product.info.main" before="product.info.price"/>
</body>
</page>
這將使得產品頁面看起來像這樣：
移除元素
使用<referenceBlock>和<referenceContainer>的remove屬性可移除元素。
示例：移除店鋪頁面中的Compare Products側邊欄
這個塊在app/code/Magento/Catalog/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>
...
<referenceContainer name="sidebar.additional">
<block class="Magento\Catalog\Block\Product\Compare\Sidebar" name="catalog.compare.sidebar" template="product/compare/sidebar.phtml"/>
</referenceContainer>
...
</body>
</page>
要移除這個塊，你需要在你的主題中擴展default.xml：
<theme_dir>/Magento_Catalog/layout/default.xml
在這個文件中，引用已被添加了remove屬性的元素：
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
...
<referenceBlock name="catalog.compare.sidebar" remove="true" />
...
</body>
</page>
替換元素
要替換元素，你可以移除它然后添加一個新的。