magento 2 前端学习笔记 - 来自一叶和秋

Magento 2.4主题目录结构

涉及到前端的目录基本是小写

涉及到模块组件的目录首字母都大写

app
 |- code
 |   |- Vendorname
 |   |     |- Modulename
 |   |     |     |- view  
 |- design 这个目录下的前端优先级较高 ,会扩展 code 下面的前端
 |   |- frontend
 |   |     |- vendorname
 |   |     |     |- themename
 |   |     |     |      |- Magento_Theme 
 |   |     |     |      |     |- layout
 |   |     |     |      |     |   |- default.xml 本主题下每个布局都会包含它[扩展2]
 |   |     |     |      |     |   |- default_head_blocks.xml 主要是加载css ,js用[扩展2]
 |   |     |     |      |     |- page_layout
 |   |     |     |      |     |- templates
 |   |     |     |      |- ModuleName
 |   |     |     |      |     |- layout
 |   |     |     |      |     |- templates
 |   |     |     |      |     |- web
 |   |     |     |- web
 |   |     |     |   |- css
 |   |     |     |   |- fonts
 |   |     |     |   |- images
 |   |     |     |   |- js
vendor
 |- magento  官方面的模块名是小写字线开头,且是中杠线连接
 |   |- module-name
 |   |      |- view 
 |   |- module-theme  主题基础
 |   |     |- view
 |   |     |     |- adminhtml
 |   |     |     |- base  这是前端的鼻祖
 |   |     |     |   |- page_layout
 |   |     |     |   |    |- empty.xml 这是布局的鼻祖
 |   |     |     |   |- templates
 |   |     |     |   |- layouts.xml
 |   |     |     |- frontend
 |   |     |     |   |-layout
 |   |     |     |   |   |- default.xml 每个布局都会包含它[基础]
 |   |     |     |   |   |- default_head_blocks.xml  主要是加载css ,js用[基础]
 |   |     |     |   |- page_layout
 |   |     |     |   |- templates
 |   |     |     |   |- web
 |   |     |     |   |- layouts.xml  定义可以用的page_layout
 |   |- theme-frontend-blank  核的空白主题,市面上的主题99%基于这个基础上开发
 |   |     |-Magento_Theme
 |   |     |     |- layout
 |   |     |     |    |- default.xml 每个布局都会包含它[扩展1]
 |   |     |     |    |- default_head_blocks.xml 主要是加载css ,js用[扩展1]
 |   |     |     |- web
 |   |     |     |    |- css
 |   |     |     |    |- js
 |   |     |- ModuleName
 |   |     |     |- layout
 |   |     |     |- templates
 |   |     |     |- web
 |   |     |-   web
 |   |     |     |- css
 |   |     |     |- images
 |   |     |     |- js

 

前端 主题下的前端元素优先级,比模块下的前端元素高

若要分析效果,从当前主题->父主题 ->当前模块->父模块 去改

 

Layout页面结构

 

 

 

昨天整理一下,调整前端还是有用

蓝底是block ,白底是container

 

Magento 2前后端功能思维导图

1625322164-magento功能

 

 

更多精彩内容请参考官方文档

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/layouts/xml-instructions.html

发表评论