<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/
特定于模块的样式（.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/css/source
该目录包含主题 less 配置文件，该文件调用Magento UI库中全局元素的mixins，该 theme.less 文件覆盖默认变量值。
/web/css/source/lib
查看覆盖存储在其中的UI库文件的文件 lib/web/css/source/lib
/web/fonts
主题字体。
/web/images
此主题中使用的图像。
/web/js
主题JavaScript文件。
/composer.json
描述主题依赖关系和一些元信息。如果您的主题是Composer软件包，它将在这里。“名称”字段必须采用格式"<vendor-name>/theme-<area>-<theme-name>"。
/registration.php
在系统中注册主题所需。
/theme.xml
该文件是强制性的，因为它将主题声明为系统组件。如果主题是从现有主题继承的，则它包含基本的元信息，例如主题标题和父主题名称。Magento系统使用该文件来识别主题。
静态文件可以位于主题目录中，如下所示：
<theme_dir>/
├── media/
├── web
│ ├── css/ (except the "source" sub-directory)
│ ├── fonts/
│ ├── images/
│ ├── js/
动态视图文件位于主题目录中，如下所示：
<theme_dir>/
├── Magento_<module>/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ ├── layout/
│ │ ├── override/
│ ├── templates/
├── web/
│ ├── css/
│ │ ├── source/
-------------------------------
-----------------------------------------
一，创建基础主题 与 基本指南
创建Magento主题文件夹
声明你的主题
Composer package
registration.php文件
创建静态文件，文件夹
朗读配置目录产品映像
声明主题标志
基本布局元素
布局文件类型和约定。
所以你的theme.xml文件应该是这样的：
<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:noNamespaceSchemaLocation=”../../../../lib/internal/
Magento/Framework/Config/etc/theme.xsd”>
<title>Session Default</title>
<parent>Magento/blank</parent>
</theme>
Go to app/design/frontend
Creating a vendor folder app/design/frontend/<vendor> e.g: app/design/frontend/mageplaza
Create a theme folder app/design/frontend/<vendor>/<theme> e.g: app/design/frontend/mageplaza/ultimate
三，声明你的主题
现在我们有文件夹 app/design/frontend/mageplaza/ultimate ，现在创建一个名为 theme.xml 的文件，定义关于主题的基本信息，例如：名称，父主题（如果你的主题继承现有主题），预览图像
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mageplaza Ultimate</title> <!-- your theme's name -->
<parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
<media>
<preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
</media>
</theme>
Composer是PHP中依赖项管理的工具。它允许您声明项目所依赖的库，并为您管理（安装/更新）它们。
如果要将主题作为包分发，请将composer.json文件添加到主题目录，并在打包服务器上注册该包。
composer.json example:：
"name": "mageplaza/ultimate",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-frontend-blank": "100.0.*",
"magento/framework": "100.0.*"
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
"autoload": {
"files": [
"registration.php"
* See COPYING.txt for license details.
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/mageplaza/ultimate',
__DIR__
正如您在上面提到的主题结构中所看到的，有一个名为 etc/view.xml.的文件。这是配置文件。此文件是Magento主题所必需的，但如果存在于父主题中，则它是可选的。
转到 app/design/<area>/mageplaza/ultimate/ 并创建文件夹等文件view.xml您可以复制父主题中的view.xml文件，例如 app/design/frontend/Magento/blank/etc/view.xml.
让我们更新目录产品网格页面的图像配置。
<image id="category_page_grid" type="small_image">
<width>250</width>
<height>250</height>
</image>
在view.xml中，图像属性在元素范围内配置：
<images module="Magento_Catalog">
<images/>
<image>元素的id和type属性定义的每种图像类型配置图像属性
<images module="Magento_Catalog">
<image id="unique_image_id" type="image_type">
<width>100</width> <!-- Image width in px -->
<height>100</height> <!-- Image height in px -->
</image>
<images/>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/custom_logo.png</argument>
<argument name="logo_img_width" xsi:type="number">300</argument>
<argument name="logo_img_height" xsi:type="number">300</argument>
</arguments>
</referenceBlock>
</body>
</page>
在Magento 2默认情况下，它使用<theme_dir>/web/images/logo.svg, 在您的主题中，您可以更改为不同的文件格式，如png，jpg，但您必须声明它。
九，基础布局元素
Magento页面设计的基本组件是块和容器。
存在容器的唯一目的是将内容结构分配给页面。除了包含的元素的内容之外，容器没有其他内容。容器的示例包括标题，左列，主列和页脚。
创建主题扩展文件
您只需要创建包含所需更改的扩展布局文件，而不是复制大量页面布局或页面配置代码，然后修改要更改的内容。
添加扩展页面配置或通用布局文件：
<theme_dir>
|__/<Namespace>_<Module>
|__/layout
|--<layout1>.xml
|--<layout2>.xml
例如，要自定义 <Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml 中定义的布局，您需要在自定义主题中添加具有相同名称的布局文件，如下所示：
<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml
<theme_dir>
|__/<Namespace>_<Module>
|__/page_layout
|--<layout1>.xml
|--<layout2>.xml
覆盖基本布局
如果 block （块） 具有取消最初调用的方法的效果的方法，则不必覆盖，在这种情况下，您可以通过添加调用取消方法的布局文件来自定义布局。
要添加覆盖的基本布局文件（以覆盖模块提供的基本布局）：在以下位置放置具有相同名称的布局文件：
<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/base
|--<layout1>.xml
|--<layout2>.xml
这些文件覆盖以下布局：
<module_dir>/view/frontend/layout/<layout1>.xml
<module_dir>/view/frontend/layout/<layout2>.xml
覆盖主题布局
要添加重写主题文件（以覆盖父主题布局）：
<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/theme
|__/<Parent_Vendor>
|__/<parent_theme>
|--<layout1>.xml
|--<layout2>.xml
这些文件覆盖以下布局：
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
