当你创建一个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的主题。
- 前端开发
- 前端开发人员指南
- 介绍
- 主题模块路径规则符号
- 主题Themes
- 概括
- 创建主题
- magento主题结构
- 应用和配置管理主题
- 配置图片属性主题
- 主题继承
- 定位模板,布局和样式
- 布局layout
- 布局说明
- 布局文件类型
- 扩展继承布局
- 覆盖布局
- 公共布局任务定制
- 自定义布局图
- 模板Templates
- 模板定制演练
- 模板的基本概念
- 定制的模板插图
- 定制电子邮件模板
- 模板XSS安全
- 层叠样式表(css)
- 载入css
- magento继承修改模板.phtml
- 只修改phtml文字内容
- 在magento的block之前加内容
- PHP开发
- PHP开发人员指南
- 开发路线图
- composer简介
- 常见术语表
- 准备(开发快速启动)
- 组件类型和版本
- 有关组件文件结构
- 路线图制定和包装组件
- 建立
- composer.json文件
- 创建组件文件结构
- 定义你的配置文件
- 注册您的组件
- URN架构验证
- 命名部件
- 组件加载顺序
- 启用或禁用组件
- package包
- 打包组件
- 更新
- 验证
- 测试你的组件
- 加入CLI命令
- 命令命名指南
- 如何添加CLI命令
- 组件开发
- 服务合同
- 公共接口和API
- 服务合约设计模式
- 依赖注入
- 实例化对象与工厂
- 代理
- 代码生成
- EAV和扩展属性
- Magento的插件
- 路由
- 索引
- 配置服务网络的API
- 向后兼容性
- 消息队列
- 在开发过程中清除目录
- magento设置
- magento开发模式设置
- magento安装中文语言包
- 创建一个新的block
- magento后台操作
- 调试-页面phtml所在的目录
- magento添加分类
- 添加属性
- 属性组
- 组合商品
- 配置商品
- 虚拟商品
- 捆绑商品
- 可下载商品
- 商品促销设置
- CMS页面设置
- block使用
- connect使用
- 多店铺
- 联系我们
- paypal设置
- 物流运费
- 网站地图
- 订单处理
- 账号管理
- 网站货币设置
- google分析
- 页面默认设置
- Magento技巧积累
- 常用技巧
- magento2更改商品图片在网站中不同位置的大小
- magento的view里面的default.xml