主題繼承 · magento 2.0開發手冊

主題繼承使您能夠輕松地擴展主題和減少維護工作。您可以使用現有主題為自定義的依據，或輕微的店面設計更新，就像節日裝飾。而不是復制廣泛的主題文件，并修改你想改變什么，你可以添加覆蓋和擴展文件。主題繼承的水平并不限定。主題繼承是基于回退機制，保證，如果一個視圖文件不是在當前主題中發現，該系統在祖先的主題，模塊查看文件或庫搜索。 fallback中的順序是靜態的資產（CSS，JavaScript的，字體和圖像）等主題文件，布局和模板略有不同。本文介紹了每種類型的主題文件回退，并提供了如何重寫祖先的主題和模塊設計的概述。有關開發主題組件的全面信息，請參閱本指南中的后續章節。 **設置父主題** 父主題的子主題theme.xml聲明文件中指定。例如：橙色主題由OrangeCo從Magento的空白主題繼承。繼承在app/design/frontend/OrangeCo/orange/theme.xml聲明如下： ~~~ <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Orange</title> <parent>Magento/blank</parent> <media> <preview_image>media/preview.jpg</preview_image> </media> </theme> ~~~ 父和子主題可以屬于不同的供應商。例如，自定義主題可以從Magento的空白主題繼承。 **覆蓋靜態資產** 靜態資產，或靜態視圖文件，是風格，JavaScript，圖片和字體。要自定義父主題，模塊視圖，或庫文件中定義的靜態視圖文件，您可以按照流程進一步描述回退中的相關位置添加具有相同名稱的文件覆蓋它們。這也指.LESS文件，這在技術上不是靜態的資產。特定的目錄中，其中在回退的過程中，系統搜索，取決于??是否模塊上下文是已知的文件。以下是這兩個選項的說明。如果模塊上下文沒有為一個文件中定義 1.當前主題靜態文件 <theme_dir>/web/ 2.祖先的靜態文件，遞歸，直到沒有父主題 <parent_theme_dir>/web/ 3.庫靜態視圖文件 lib/web/ 如果模塊上下文為一個文件中定義： 1.當前主題模塊靜態文件<theme_dir>/<Namespace>_<Module>/web/ 例 app/design/frontend/OrangeCorp/orange/Magento_Catalog/web/ 2.祖先的主題模塊靜態文件，遞歸，直到有沒有祖先一個主題： <parent_theme_dir>/<Namespace>_<Module>/web/ 3.模塊的前端區域靜態視圖文件： <module_dir>/view/frontend/web/ 4.模塊為根據地的靜態視圖文件： <module_dir>/view/base/web/ 例名為OrangeCo一個公司創建了一個名為橙色的主題。主題文件位于app/design/frontend/OrangeCo/orange_winter。橙從Magento的空白主題繼承。讓我們想象一下OrangeCo需要添加一些寒假裝飾。因此，創建一個新的orange_winter主題，從橙繼承。會議的主題是位于 app/design/frontend/OrangeCo/orange_winter 在橙色的主題有位于頁腳背景圖片 app/design/frontend/OrangeCo/orange/web/images/background.jpg. ![](https://box.kancloud.cn/2016-03-07_56dd5af457772.jpg) OrangeCo希望它有一個節日所替代，所以它把一個新的背景圖像完全相同的名和擴展名中 app/design/frontend/OrangeCo/orange_winter/web/images/background.jpg 一旦橙色冬季主題應用，新的假日圖像覆蓋從橘子的人，所以對店面的節日背景是可見的。 ![](https://box.kancloud.cn/2016-03-07_56dd5b08eb16b.jpg) **覆蓋模板** 模板的備用方案如下（模塊上下文總是知道他們的）： 1.當前主題模板 <theme_dir>/<Namespace>_<Module>/templates 2.祖先的主題模板，遞歸，直到沒有祖先主題達到： <parent_theme_dir>/<Namespace>_<Module>/templates 3.模塊模板<module_dir>/view/frontend/templates 所以，如果你需要定制一定的模板，你需要創建一個壓倒一切的之一，在主題中的模塊文件的../templates/<path_to_template>相同的名稱。<path_to_template> 是路徑到原始模板例如，如果您必須覆蓋 <Magento_Catalog_module_dir>/view/frontend/templates/category/widget/link/link_block.phtml模板這<path_to_template> is category/widget/link/ 舉例默認情況下，根據模塊模板在迷你購物車的產品下面的go to Checkout 按鈕 ![](https://box.kancloud.cn/2016-03-07_56dd5b090b3f4.png) 訂單在<Magento_Checkout_module_dir>/view/frontend/templates/cart/minicart.phtml模塊模板中定義。空白主題不重寫此模板。 OrangeCo決定他們希望走之前要顯示的產品列表，Checkout按鈕。要做到這一點，就需要添加一個壓倒一切的模板，在橙色的主題文件夾中相應的模塊：app/design/frontend/OrangeCo/orange/Magento_Checkout/templates/cart/minicart.phtml 注意，該路徑里面的模板在主題templates目錄對應于在模塊中。已經改變了順序或元素模板，OrangeCo得到了minicart看起來像以下： ![](https://box.kancloud.cn/2016-03-07_56dd5b09275da.png) 你可以找出究竟代碼更改需要什么來定制模板主題的插圖執行此等任務。 **擴展布局** 布局處理機制不涉及備用。系統收集下列順序布局文件： 1.當前主題布局.<theme_dir>/<Vendor>_<Module>/layout/ 2.始祖主題布局，從最遙遠的祖先開始，直到遞歸無父主題達到： <parent_theme_dir>/<Vendor>_<Module>/layout/ 3.模塊布局的frontend前端區域：<module_dir>/view/frontend/layout/ 4.模塊布局的base前端區域<module_dir>/view/base/layout/ 不像模板或圖像，布局不僅可以重寫，而且還延長。并自定義布局推薦的方法是通過創建擴展主題布局文件來擴展它。要添加的延伸布局文件：把你的自定義布局文件在<theme_dir>/<Vendor>_<Module>/layout/目錄。例 OrangeCo決定了他們應該從頁腳，在<Magento_Theme_module_dir>/view/frontend/layout/default.xml為此定義刪除“報告錯誤”鏈接，他們的應用程序添加的延伸app/design/frontend/OrangeCo/orange/Magento_Theme/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> <referenceBlock name='report.bugs' remove='true'/> </body> </page> ~~~ 有關擴展布局的詳細信息，請參閱擴展布局的文章。 **覆蓋布局** 雖然不推薦壓倒一切的布局，它仍然是可能的，而且可能對某些自定義任務的解決方案。要覆蓋從祖先的主題布局文件的說明：與在相同的名稱創建一個布局文件在 <theme_dir>/<Vendor>_<Module>/layout/override/theme/<Vendor>/<ancestor_theme>目錄要覆蓋模塊布局指令（基地布局）：與在相同的名稱創建一個布局文件在 <theme_dir>/<Vendor>_<Module>/layout/override/base目錄