magento 2 自定义主题目录 - 来自一叶知秋

2021年7月8日

本文内容来自QQ群大佬陈伟明(一叶知秋)的学习分享

M2的主题主要位于
app/design/frontend/<Vendor>/下面：如：
app/design/frontend/bs_outstock/bs_outstock1

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

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

 

主题组件：

<theme_dir>/
├── <Vendor>_<Module>/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ ├── layout/
│ │ ├── override/
│ ├── templates/
├── etc/
│ ├── view.xml
├── i18n/
│ ├── en_US.csv
├── media/
│ ├── prview.jpg
├── web/
│ ├── css/
│ │ ├── email.less
│ │ ├── print.less
│ │ ├── source/
│ │ │ ├── _actions-toolbar.less
│ │ │ ├── _breadcrumbs.less
│ │ │ ├── _buttons.less
│ │ │ ├── components
│ │ ├── _icons.less
│ │ ├── _theme.less
│ ├── fonts/
│ ├── images/
│ │ ├──logo.svg
│ ├── js/
│ │ ├── navigation-menu.js
│ │ ├── theme.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/

 

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

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

要真正访问浏览器的公共静态文件被发布到
/pub/static/frontend/<Vendor>/<theme>/<language>/css/
目录.

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

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

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

 

 

作者：陈伟明
联系 : QQ 942923305 | 微信 toby942923305
E-mail: [email protected]
==================================

发表评论