公共布局任務定制 · magento 2.0開發手冊

**本文介紹了以下典型布局定制任** 為了確保穩定性和升級過程中被刪除保護您的自定義，不改變外的現成的Magento模塊和主題布局。要自定義布局，自定義主題創建擴展和壓倒一切的布局文件。 **設置頁面布局** 頁面布局的用于特定網頁的類型的頁配置文件中定義在根節點<page>的layout屬性例如：更改高級搜索頁面的布局從默認的“1列”到“左邊2列怎么做繼承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> ~~~ **載入靜態資源（JavaScript中，CSS，字體)** JavaScript，CSS和其它靜態資產在頁面<head>頭部配置載入。 Magento的商店頁面的<head>默認外觀被定義為:app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml 添加CSS和JavaScript的推薦方法是延長你的自定義主題此文件，并添加資產存在。下面的文件是你必須添加一個文件的樣本： ~~~ <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>  <css src="css/my-styles.css"/>  <script src="Magento_Catalog::js/sample1.js"/> <link src="js/sample.js"/>  <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"/> or <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> ~~~ 這增加了一個IE條件注釋在生成的HTML，像下面的例子： ~~~  ~~~ 在這個例子中，orange的由OrangeCo供應商創建自定義主題。 **刪除靜態資源（JavaScript中，CSS，字體）** 要刪除靜態資源在一個頁面<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 src="css/styles-m.css" /> <remove src="my-js.js"/> <remove src="Magento_Catalog::js/compare.js" />  <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** 使用下面的示例來創建（聲明）容器： ~~~ <container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" /> ~~~ **參考一個container容器** 要更新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</argument> </arguments> </block> </referenceContainer> ~~~ **創建block塊** 創建塊（聲明）使用 <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> ~~~ **參考一個block塊** 要更新塊使用 <referenceBlock> 指令例：將圖像傳遞到logo的block。 ~~~ <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.png</argument> </arguments> </referenceBlock> ~~~ **設置由block使用的模板** 要設置一個block的模板，使用<argument>指令。例如：網頁標題欄的變化模板： ~~~ <referenceBlock name="page.main.title"> <arguments> <argument name="template" xsi:type="string">Namespace_Module::title_new.phtml</argument> </arguments> </referenceBlock> ~~~ 相對指定給模塊的 view/<area>/templates/目錄對模板的路徑。該對應于<area>用于該布局文件的區域。 **修改block塊參數** 要修改塊參數，使用<referenceBlock>指令例如：改變現有的block塊參數的值，并添加一個新的argument。初始塊聲明： ~~~ ... <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>  <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對象方法來設置block屬性 ** 有訪問block對象的方法有兩種： * 使用<argument>指令在<block>和<referenceBlock>中. * 使用<action>指令, 不建議這種方式，但可用于調用這些方法，這是不重構尚未通過被訪問。例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>設置頁面標題不要使用<action>，如果該方法<block> or <referenceBlock>允許使用<argument> 擴展布局： ~~~ ... <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 and after屬性：允許父類一方內改變元素的順序例如<move>用法：把庫存及SKU的bloks旁邊的產品價格產品頁面上。在Magento的blank主題,這些標簽位位置如下： ![](https://box.kancloud.cn/2016-03-08_56de83d28f5ac.png) Let’s place the stock availability and SKU blocks after product price block on a product page, and move the review block out of the product-info-price container. To do this, add the extending catalog_product_view.xml in the app/design/frontend/OrangeCo/orange/Magento_Catalog/layout/ directory: ~~~ <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> ~~~ 這將使得在產品頁面的樣子如下： ![](https://box.kancloud.cn/2016-03-08_56de83d2b6147.png) 要了解如何找到您需要定制布局文件，請參閱查找模板，布局和樣式。 **刪除元素** Elements are removed using the remove attribute for the <referenceBlock> and <referenceContainer>. 示例：從所有的商店頁面中刪除比較產品側邊欄塊。 ~~~ This block is declared in 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> ~~~ 要刪除block塊，添加擴展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> **替換元素** ~~~ 要替換一個元素，將其刪除，并添加一個新的。