**设计主题是Magento的应用程序的一个重要组成部分。本主题介绍了Magento的主题文件结构。** **Magento的主题定位** 店面主题是通常位于app/design/frontend/<Vendor>/下 虽然在技术上它们可以存在于其他目录。例如Magento的内置主题可以在位于vendor/magento/theme-frontend-<theme_code>当Magento的实例从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.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 自选 该目录包含了援引从 Magento的UI库全局元素，并theme.less文件，覆盖默认的变量的值混入主题更少的配置文件。 ` `/web/css/source/lib 自选 重写存储在UI库文件查看文件 lib/web/css/source/lib ` `/web/fonts 自选 主题字体 ` `/web/images 自选 主题图片 ` `/web/js 自选 主题js` `/composer.json 描述了主题的依赖关系和一些元信息。将出现在这里，如果你的主题是一个composer包。 ` `/registration.php 必须 需要在系统中注册的主题。 ` `/theme.xml 必须 该文件是强制性的，因为它声明了一个主题为系统组件。它包含基本元信息，如主题名称和父主题名称，是主题是从现有的主题继承。该文件由Magento的系统能够识别的主题。` **主题文件** 除了配置文件和主题的元数据文件，所有主题文件分为以下两类： 1.静态视图文件 2.动态视图文件 静态视图文件 一组是由服务器返回到浏览器按原样不经任何处理的主题文件，被称为一个主题的静态文件。静态文件可以位于一个主题目录如下： ~~~ <theme_dir>/ ├── media/ ├── web │ ├── css/ (except the "source" sub-directory) │ ├── fonts/ │ ├── images/ │ ├── js/ ~~~ 静态文件和其他主题文件之间的主要区别是，静态文件出现网页作为对文件的引用上，而其它主题文件参加页面生成，但网页作为文件上明确地被引用。这可以通过从店面的直接链接访问静态视图文件，是有区别的公共主题文件。 要对浏览器的公共静态文件发布到/pub/static/frontend/<Vendor>/<theme>/<language>/css/目录实际上访问。 动态视图文件 查看正在处理或以提供结果到客户机由服务器执行的文件。它们是：.LESS文件，模板布局。动态视图文件位于一个主题目录，如下所示： ~~~ <theme_dir>/ ├── Magento_<module>/ │ ├── web/ │ │ ├── css/ │ │ │ ├── source/ │ ├── layout/ │ │ ├── override/ │ ├── templates/ ├── web/ │ ├── css/ │ │ ├── source/ ~~~