Magento2定位模板，布局和样式

本章内容

当你创建一个Magento主题时，你可能需要为默认主题和模型视图文件创建重写文件。那么在此之前，你必须决定Magento使用的是哪个模板，布局和样式文件。本文就描述如何做到这一点。

定位模板

要定位特定部分对应的前端或后台模块，你可以使用Magento内置的模板提示。

开启模板提示：

1. 点击Stores > Configuration > ADVANCED > Developer。
2. 在左上角的Scope下拉列表里选择你想要开启模板提示的视图。
3. 在Debug标签里，设置Template Path Hints for storefront为Yes。要开启后台通道提示，设置Template Path Hints for Admin为Yes。
4. 保存更改，点击右上角的Save Config。

现在，你已经开启了模板提示，刷新你想要修改的页面，查看模板文件路径或者模板提示显示的文件。

例如，开启模板提示后的产品详细页看起来是这样的：

在本示例中，迷你购物车页面元素被定义在<Magento_Checkout_module_dir>/view/frontend/templates/cart/minicart.phtml模板。

（模板名称在元素上面）

开启模板提示的后台Customer页面看起来是这样的：

另外，你可以在文件系统中通过搜索系统生成的标题，CSS类名，块标题，标签或链接文字来找到对应的模块。例如，使用一个浏览器调试工具，你可以看到迷你购物车块的css类是minicart-wrapper。

在app目录下搜索“minicart-wrapper”，得到的.phtml文件是app/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/

这里没有直接的算法来发现准确的布局文件，但是大部分情况下，布局文件名是自我描述性的。你也可以搜索它们提到的对应模块。

示例：

比方说，当Blank主题被Magento应用为店铺视图时，你要定位在前端显示迷你购物车的布局文件。

使用模板提示我们发现对应的模板是app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml，由路径我们发现它是属于Magento_Checkout模型的。

让我们根据回退计划来寻找布局：

1. 检查app/design/frontend/Magento/blank/Magento_Checkout/layout，在这个目录中搜索模板名称“minicart.phtml”。没有找到相匹配的文件，所以我们进行回退级别的下一级，父主题布局。
2. 在主题配置文件theme.xml中我们可以找到父主题的信息，父主题的名字在<parent></parent>节点指定。在app/design/frontend/Magento/blank/theme.xml中没有<parent>节点，这意味着Blank主题没有父主题。所以我们该搜索回退等级的下一级：模型布局。
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. 前端模型样式 <module_dir>/view/frontend/web/css/
5. base模型样式 <module_dir>/view/base/web/css/

示例：

当Blank主题被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。“minicart-wrapper”样式被定义在app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/_minicart.less。

在确定定义类的.css或.less文件后，你可以在你自定义的.css或.less中重写默认的类。详细的信息会在后面的CSS文章中讲解。

电商网站开发服务。