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

Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题终极指南的更多相关文章

  1. Magento 2中文手册教程 - 如何获得 Magento 2

    Magento 2 安装 我们搜集了一些信息来帮助您开始使用Magento 2和你的Magento 2安装. 我们有一些资源帮助您开始使用Magento 2. 如何获得 Magento 2 参考下表开 ...

  2. Yii2创建多界面主题(Theme)

    Yii2界面主题上的设计总体上和Yii1.x保持一致,区别在于两个地方: 1. 由于Yii2引入了独立的视图(View)类,因此界面主题(Theme)也交由视图来管理: 2. 视图文件和Web资源在目 ...

  3. Ultimate Guide to WhatsApp for Business 2019

    By Iaroslav Kudritskiy (Source: https://rocketbots.io/blog/the-ultimate-guide-to-whatsapp-business-a ...

  4. Ultimate Guide to WeChat for Business 2019

    Ultimate Guide to WeChat for Business 2019 By Iaroslav Kudritskiy (source :https://rocketbots.io/blo ...

  5. Ultimate Guide to Line For Business (May 2019)

    Ultimate Guide to Line For Business (May 2019) By Iaroslav Kudritskiy February 4, 2019 No Comments I ...

  6. Android Build System Ultimate Guide

    Android Build System Ultimate Guide April 8,2013 Lately, Android Open Source Project has gone throug ...

  7. 使用VS2012主题插件创建自己的主题

    上篇文章讲了如何更换VS2012的主题,具体内容请参考:Vistual Studio 2012更换皮肤.可是上面的步骤仅仅让我们可选择的主题是增多了,我们可不可以自己创建自己的主题呢? 答案是肯定的, ...

  8. 如何创建magento模块z之Hello World例子(转)

    步骤:1.创建一个Hello World模块2.为这个模块配置路由3.为这个模块创建执行控制器 创建Hello World模块 创建模块的结构目录:app/core/local/Sjolzy/Hell ...

  9. Magento 2 Block模板终极指南

    /view/frontend/page_layout/2columns-left.xml <layout xmlns:xsi="http://www.w3.org/2001/XMLSc ...

随机推荐

  1. 开源ERP-成功案例分析(3)

    Odoo用户概要 关于Odoo全球的用户,我们来看一些数据: Odoo目前全球有300万使用者 Odoo系统上每天新创建的数据库超过1000个 Odoo和Word.Excel.PowerPoint一样 ...

  2. Linux 配置本地源 (Ubuntu / CentOS)

    目录 Linux local source list A. Ubuntu 1. 本地ISO 2. 制作本地源 B. CentOS 1. 本地ISO Linux local source list A. ...

  3. 利用ZYNQ SOC快速打开算法验证通路(5)——system generator算法IP导入IP integrator

    一.前言 利用FPGA设计算法一直以来都是热点,同样也是难点.将复杂的数学公式 模型通过硬件系统来搭建,在低延时 高并行性等优势背后极大提高了设计难度和开发周期.Xilinx公司的sysGen(sys ...

  4. python——python3.6环境搭建(Windows10,64位)

    1.python软件资源下载 1.1 打开python官网地址:https://www.python.org 1.2 根据自己电脑的设置选择下载合适的python3.6.2 1.3 此处选择windo ...

  5. ThinkPad E470笔记本电脑无声音、无线wifi功能(灰色)

    最近有同事找我看他的笔记本没有wifi,型号是ThinkPadE470 ,上网搜了下提问的挺多,写一个看看有什么帮助没 看了下笔记本wifi标志是灰色显示只有飞行模式,启用了一下热键 fn+F3 没什 ...

  6. Linux上修改主机名

    依次执行以下命令 hostnamectl set-hostname 你想设置的名字 hostname 你想设置的名字(和上面的名字保持一致) exit 然后重新连接就行了

  7. jspdf生成pdf并在页面展示

    jspdf调用ouput即可 https://blog.csdn.net/dragonzoebai/article/details/18243823 获取页面生成pdf:jspdf+html2canv ...

  8. Spring事件和监听器

    Application下抽象子类ApplicationContextEvent的下面有4个已经实现好的事件 ContextClosedEvent(容器关闭时) ContextRefreshedEven ...

  9. python3 time模块

    import time '''查看系统时间拿到的是一个数字(时间戳)从1970-01-01 00:00:00开始计算,以秒为单位'''print(time.time()) 执行结果:155650817 ...

  10. 性能测试监控平台:InfluxDB+Grafana+Jmeter

    前面的博客介绍了InfluxDB.Telegraf.Grafana的安装和使用方法,这篇博客,介绍下如何利用这些开源工具搭建性能测试监控平台... 前言 性能测试工具jmeter自带的监视器对性能测试 ...