主题继承 · 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目录