Magento 2 主题结构

这篇文章讲什么？

设计主题 是Magento 2的一个重要组成部分。本主题描述一个Magento 2主题的文件结构。

Magento 2 主题位置

前端主题位于 app/design/frontend/<Vendor>/.

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

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

主题组件：

一个Magento 2主题目录的结构通常会像下面的：

<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 文件).
/<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 2 UI库全局元素, 和 theme.less 覆盖默认变量值的文件。
/web/css/source/lib	可选	查看覆盖存储的UI库文件的文件lib/web/css/source/lib
/web/fonts	可选	主题字体.
/web/images	可选	这个主题中使用的图像。
/web/js	可选	主题js文件.
/composer.json	可选	描述主题依赖关系和一些元信息。
/registration.php	必须	需要在系统中注册您的主题。
/theme.xml	必须	该文件是强制性的，因为它声明作为系统组件的主题。它包含基本的元信息，如主题名称和父主题名称，主题是从现有主题继承的。文件由Magento系统用来识别主题。

主题文件

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

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

静态视图文件

由服务器返回到浏览器的一组主题文件，没有任何处理， 被称为静态文件在主题中.

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

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

静态文件和其他主题文件之间的主要区别是，静态文件出现在网页上，作为对文件的引用，而其他主题文件参与页面生成，但没有在网页上明确地引用为文件。

静态视图文件，可以直接从商店前面访问，被区分为公共主题文件。

动态视图文件

查看由服务器处理或执行的文件，以便向客户端提供结果。这些都是: .less 文件, 模板文件, 和布局文件。

动态视图文件位于主题目录如下：

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