Magento2主题结构

redmaomail 2024-07-24 18:13 阅读数 60 #Magento

Magento2主题结构

店面的主题通常位于app/design/frontend/<Vendor>（供应商）/之下。虽然在技术上它们可以放在其它目录。例如Magento2的内置主题在vendor/magento/theme-frontend-<theme_code>之下，这是因为Magento2的实例是从Composer部署的。

每个主题必须存储在单独的目录：

app/design/frontend/<Vendor>/
├── <theme1>
├── <theme2>/
├── <theme3>
├--...

主题组件

Magento的主题目录结构通常是这样的：

<theme_dir>/
├── <Vendor>_<Module>/ 
│	├── web/
│	│	├── css/
│	│	│	├── source/
│	├── layout/
│	│	├── override/
│	├── templates/
├── etc/
├── i18n/ 
├── media/
├── web/
│	├── css/
│	│	├── source/ 
│	├── fonts/
│	├── images/
│	├── js/
├── composer.json 
├── registration.php 
├── theme.xml

让我们仔细看看每一个特定的子目录。

目录	必须性	描述
`/<Vendor>_<Module>`	非必须	指定模型的样式，布局和模板.
`/<Vendor>_<Module>/web/css/source`	非必须	指定模型的样式（.css或.less）。一般模型样式在`module.less`中，挂件（widgets）的样式在 `widgets.less`中。
`/<Vendor>_<Module>/layout`	非必须	扩展默认模型或父主题的布局文件
`/<Vendor>_<Module>/layout/override/base`	非必须	重写默认模型布局的布局文件
`/<Vendor>_<Module>/layout/override/<parent_theme>`	非必须	重写父主题中模型布局的布局文件
`/<Vendor>_<Module>/templates`	非必须	该目录包含重写默认模型模版或父主题模版的主题模板。自定义模版也在该目录下。
`/etc/view.xml`	对单个主题必须, 若有父主题则为非必须	该文件包含店铺前端产品图片和缩略图的配置。
/`i18n`	非必须	带有翻译的.csv文件
`/media`	必须	该目录包含一个主题预览(你主题的一张截图)。
`/web`	非必须	可被前端直接读取的静态文件
`/web/css/source`	非必须	该目录包含主题`less`配置文件（从Magento UI库里调用全局文件），和`theme.less`（重写默认变量值）
`/web/css/source/lib`	非必须	重写UI库的视图文件存储在`lib/web/css/source/lib`
`/web/fonts`	非必须	主题字体。
`/web/images`	非必须	主题中使用的图片。
`/web/js`	非必须	主题JavaScript文件。
`/composer.json`	非必须	描述主题依赖关系和一些元信息。如果你的主题是composer包的话，就在这里。
`/registration.php`	必须	将你的主题注册到系统。
`/theme.xml`	必须	由于该文件声明一个主题作为系统部件，所以它是强制性的。它包含基本元信息，如主题名和父主题名（主题继承自已有主题）。该文件让Magento识别你的主题。

主题文件

除了配置文件和主题的元数据文件，所有主题文件分为以下两类：

静态视图文件
动态视图文件

静态视图文件

一组是由服务器返回到浏览器，不进行任何处理的主题文件，被称为一个主题的静态文件。

静态文件可以位于一个主题目录如下：

<theme_dir>/
├── media/
├── web
│	├── css/ (except the "source" sub-directory)
│	├── fonts/
│	├── images/
│	├── js/

静态文件和其他主题文件之间的主要区别是，静态文件出现在网页作为引用的文件，而其它主题文件参加页面生成，但并未明确地被引用。

静态视图的文件可以通过从店面的直接链接进行访问，以此与公共主题文件区分开。

动态视图文件

被服务器处理或执行用来返回结果给客户的视图文件。它们是： .less 文件，模板（templates），布局（layouts）。动态视图文件在一个主题目录中的位置，如下所示：

<theme_dir>/
├── Magento_<module>/ 
│	├── web/
│	│	├── css/
│	│	│	├── source/
│	├── layout/
│	│	├── override/
│	├── templates/
├── web/
│	├── css/
│	│	├── source/

电商网站开发服务。

分享到：

上一篇：创建magento2主题下一篇：为Magento2主题配置图片性能