🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
当你创建一个Magento的主题,你可能需要创建覆盖文件默认主题和模块视图文件。要做到这一点,您必须确定哪个模板,布局和样式文件Magento的使用。本主题介绍了如何做到这一点。 **定位模板** 找到负责店面或管理的特定部分的模板,你可以使用Magento的内置模板提示。 要启用模板提示: 1.Click Stores > Configuration > ADVANCED > Developer. 2.在Scope 下拉在左上角选择您所需的模板 3.在调试选项卡,设置模板路径的提示店面Template Path Hints for storefront为Yes是。要启用路径的提示管理员设置模板路径的提示管理员Template Path Hints for Admin为是Yes。 4.保存更改,请单击右上角保存 ![](https://box.kancloud.cn/2016-03-07_56dd5b093e9c5.png) 现在,您已经启用模板提示,刷新要修改的页面,并查看模板文件或该模板提示显示文件的路径。 例如,这里是一个店面分类页面的外观已启用模板提示: ![](https://box.kancloud.cn/2016-03-07_56dd5b0957fe2.png) 在这个例子中的迷你购物车页面元素<Magento_Checkout_module_dir>/view/frontend/templates/cart/minicart.phtml模板中定义: ![](https://box.kancloud.cn/2016-03-07_56dd5b0983585.png) (模板名称是元素以上) 下面是客户页面的外观与管理员启用模板提示: ![](https://box.kancloud.cn/2016-03-07_56dd5b09ade31.png) 另外,您也可以通过系统生成的标题,CSS类名称,块标题,标签或链接文字作为搜索条件执行文件系统中的文本搜索。例如,使用一个浏览器调试工具,可以定义该minicart块CSS类是minicart-wrapper。 ![](https://box.kancloud.cn/2016-03-07_56dd5b09cac55.png) 通过在一个.phtml文件“minicart-包装”的出现的应用程序目录中的搜索返回的pp/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml模板 。 由于不建议修改默认的文件,你需要,如果你想自定义模板添加覆盖文件。有关覆盖模板,请参考自定义主题模板的详细信息。 **定位布局** 就像模板,布局被保存在每个模块的基础。您可以轻松地确定哪些模块,您有兴趣居住在该元素的模板定位布局文件。要找到模板,你可以在app目录中使用模板的提示或文本搜索,如前面所述。 你已经确定了模块后,您可以搜索在以下位置的布局: ~~~ 1<current_theme_dir>/<Namespace>_<Module>/layout/ 2<parent_theme(s)_dir>/<Namespace>_<Module>/layout/ 3<module_dir>/frontend/layout/ 4<module_dir>/view/base/layout/ ~~~ 没有直接的算法如何在一次的确切布局文件来定义,但在大多数情况下,布局文件名是自我描述性的。你还可以搜索他们提到了相应的模板。 例: 比方说,你需要找到的布局,负责对店面展示小型购物车,当应用对存储视图通过Magento的空白主题。 使用模板提示我们确定该模板是app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml和路径,我们可以看到它属于Magento_Checkout模块。 让我们搜索以下后备方案的布局: 1.检查app/design/frontend/Magento/blank/Magento_Checkout/布局。要找到所需的布局,搜索该目录的模板名称,“minicart.phtml”的出现。没有匹配的文件被发现,所以我们进入下一个后备的水平,这是父主题布局。 2. 我们可以找到在主题配置文件theme.xml父主题的信息,在<parent></parent>节点进行了规定。在app/design/frontend/Magento/blank/theme.xml没有节点,这意味着空白主题有没有父母。因此,我们应该在下一个备用水平,这是模块的布局进行搜索。 3. 该Magento_Checkout布局位于app/code/Magento/Checkout/view/frontend/layout/。这个目录搜索“minicart.phtml”的出现之后,我们定义了我们正在寻找的布局是app/code/Magento/Checkout/view/frontend/layout/default.xml中。 您所在的必要布局文件后,你可以在你的主题文件夹中创建一个相应的名字您的自定义布局文件添加扩展或压倒一切的内容。请参阅自定义主题布局的更多细节。 **风格定位** 来定位被施加到某些元件的CSS规则,查找包含该元素的页面的模板。或者你可以使用浏览器的调试工具,以找到类名。在找到的类名,请在主题和风格模块目录文本搜索来查找定义类.LESS或.css文件。根据下面的备用方案进行搜索: 1.主题风格 <current_theme_dir>/web/css/ 2.模块的主题风格<current_theme_dir>/<Namespace>_<Module>/web/css/ 3.父主题风格<parent_theme_dir>/web/css/ 4.模块样式的 frontend前端 区域<module_dir>/view/frontend/web/css/ 5.模块样式的base基础区域<module_dir>/view/base/web/css/ 例: 让我们找到上定义用于在店面,当Magento的空白主题适用于商店视图中显示的迷你购物车的CSS类的文件。 在迷你购物车的模板 app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml顶级元素是minicart-wrapper类。 所以,让我们在根据后备方案搜索“minicart-wrapper”的出现: 1.在app/design/frontend/Magento/blank/web/css搜索,搜索到任何结果。 2.在app/design/frontend/Magento/blank/Magento_Checkout/web/css.The“minicart-wrapper”式的搜索app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/_minicart.less 在确定哪些的.css或.LESS文件定义了类,您可以在自定义的.css或.LESS文件覆盖默认的类定义。有关详细信息,请参阅CSS的主题。