Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题终极指南

Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题基础指南

在Magento 2中管理和设置主题的方式有很多改进.Magento 1.9中引入的theme.xml定义文件和新的回退系统的使用是两个最重要的改进。Magento 2中的后备系统与Magento 1.x的工作方式类似,但是具有额外的优势,您可以选择无限的父主题继承/后退到

  • 全部通过主题中的theme.xml文件。

 假设您想基于新的Magento“Blank”主题创建一个全新的主题。首先,您将在 app/design/frontend 中创建一个名为Session / default的新文件夹。然后,您将在此目录中创建一个theme.xml文件(最好从 app/design/frontend/Magento/blank/theme.xml 复制它),命名您的主题,然后选择任何父级。在这种情况下,我们想要Magento 2的Bl​​ank主题。

 

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/ 可选的 特定于模块的样式(.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 可选的 该目录包含主题 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>

  

主题结构

app/design/frontend/mageplaza/
├── ultimate/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images
│   │   │   ├── logo.svg
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

  

二,创建Magento主题文件夹

Creating a folder for the 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/
│   │   │   ├── ...
│   │   │   ├── ...

 

三,声明你的主题

现在我们有文件夹 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包修改

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"
        ]
    }
}

 

  

 

五,registration.php

您可以添加以下内容以将主题注册到Magento 2

 

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/mageplaza/ultimate',
    __DIR__
);

 

  

 

六,创建静态文件

 

 

app/design/<area>/mageplaza/ultimate/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

 

  

 

七,配置目录产品映像

 

正如您在上面提到的主题结构中所看到的,有一个名为 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/>

  

八,声明主题标志 <theme_dir>/Magento_Theme/layout/default.xml

 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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页面设计的基本组件是块和容器。

存在容器的唯一目的是将内容结构分配给页面。除了包含的元素的内容之外,容器没有其他内容。容器的示例包括标题,左列,主列和页脚。

十,布局文件类型和约定

  • 模块和主题布局文件

        以下术语用于区分不同应用程序组件提供的布局:

    • 基本布局:模块提供的布局文件。常规:
      • 页面配置和通用布局文件: <module_dir>/view/frontend/layout
      • 页面布局文件: <module_dir>/view/frontend/page_layout
    • 主题布局:主题提供的布局文件。常规:
      • 页面配置和通用布局文件: <theme_dir>/<Namespace>_<Module>/layout
      • 页面布局文件: <theme_dir>/<Namespace>_<Module>/page_layout

  • 创建主题扩展文件

        您只需要创建包含所需更改的扩展布局文件,而不是复制大量页面布局或页面配置代码,然后修改要更改的内容。

    添加扩展页面配置或通用布局文件:
    <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

 

开始更多学习!Ref: Devdocs.magento.comStackoverflow.com

posted @ 2018-07-08 12:27  徐锅  阅读(1345)  评论(0编辑  收藏