登录
    最新消息：觉得本站不错的话 记得收藏哦 博客内某些功能仅供测试 讨论群：135931704 快养不起小站了 各位有闲钱就打赏下把 My Email weicots#gmail.com Please replace # with @

    Magento2主题结构 Magento theme structure

    Magento 资料整理 ajiang-tuzi 7548浏览

    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/

    原文

    What’s in this topic

    A design theme is an important part of the Magento application. This topic describes the file structure of a Magento theme.

    Magento theme location

    Storefront themes are conventionally located under app/design/frontend/<Vendor>/. Though technically they can be located in other directories. For example Magento built-in themes can located under vendor/magento/theme-frontend-<theme_code> when a Magento instance is deployed from the Composer repository.

    Each theme must be stored in a separate directory:

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

    Theme components

    The structure of a Magento theme directory typically would be like following:

    <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

    Let’s have a closer look at each particular sub-directory.

    The directories and files structure described below is the most extended one. It may not coincide with the structure of your store.

    Directory Required Description
    /<Vendor>_<Module> optional Module-specific styles, layouts, and templates.
    /<Vendor>_<Module>/web/css/source optional Module-specific styles (.css and/or .less file). General styles for the module are in themodule.less file, and styles for widgets are inwidgets.less.
    /<Vendor>_<Module>/layout optional Layout files which extend the default module or parent theme layouts.
    /<Vendor>_<Module>/layout/override/base optional Layouts that override the default module layouts.
    /<Vendor>_<Module>/layout/override/<parent_theme> optional Layouts that override the parent theme layouts for the module.
    /<Vendor>_<Module>/templates optional This directory contains theme templates which override the default module templates or parent theme templates for this module. Custom templates are also stored in this directory.
    /etc/view.xml required for a theme, but optional if exists in the parent theme This file contains images configuration for all storefront product images and thumbnails.
    /i18n optional .csv files with translations.
    /media required This directory contains a theme preview (a screenshot of your theme).
    /web optional Static files that can be loaded directly from the frontend.
    /web/css/source optional This directory contains theme less configuration files that invoke mixins for global elements from the Magento UI library, and theme.less file which overrides the default variables values.
    /web/css/source/lib optional View files that override the UI library files stored inlib/web/css/source/lib
    /web/fonts optional Theme fonts.
    /web/images optional Images that are used in this theme.
    /web/js optional Theme JavaScript files.
    /composer.json optional Describes the theme dependencies and some meta-information. Will be here if your theme is a Composer package.
    /registration.php required Required to register your theme in the system.
    /theme.xml required The file is mandatory as it declares a theme as a system component. It contains the basic meta-information, like the theme name and the parent theme name, is the theme is inherited from an existing theme. The file is used by the Magento system to recognize the theme.

    Theme files

    Apart from the configuration file and theme metadata file, all theme files fall into the following two categories:

    • Static view files
    • Dynamic view files

    Static view files

    A set of theme files that are returned by the server to a browser as is, without any processing, are called the static files of a theme.

    Static files can be located in a theme directory as follows:

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

    The key difference between static files and other theme files is that static files appear on a web page as references to the files, while other theme files take part in the page generation, but are not explicitly referenced on a web page as files.

    Static view files that can be accessed by a direct link from the store front, are distinguished as public theme files.

    To be actually accessible for browsers public static files are published to the /pub/static/frontend/<Vendor>/<theme>/<language>/css/directory.

    Dynamic view files

    View files that are processed or executed by the server in order to provide result to the client. These are: .less files, templates, layouts .

    Dynamic view files are located in a theme directory as follows:

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

    备注及引用

    本文 资料来自于互联网 仅供学习和交流所用
    原文链接

    http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-structure.html

    转载请注明：(●--●) Hello.My Weicot » Magento2主题结构 Magento theme structure

    与本文相关的文章

    蜀ICP备15020253号-1