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主题文件夹
  • 声明你的主题
  • 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.com, Stackoverflow.com

原文地址：https://www.cnblogs.com/q1104460935/p/9279702.html

时间： 2024-07-30 11:40:31

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

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

Magento 2 安装 我们搜集了一些信息来帮助您开始使用Magento 2和你的Magento 2安装. 我们有一些资源帮助您开始使用Magento 2. 如何获得 Magento 2 参考下表开始安装Magento社区版(CE)或Magento企业版(EE). 用户需求 描述 高级安装和升级步骤 开始链接 易于安装,命令行安装,有自己的服务器 一些技术专长,命令行访问Magento服务器. 允许你安装Magento 2和 Magento 2扩展可以使用 在线安装向导 或者 命令行. 你也可

Yii2创建多界面主题（Theme）

Yii2界面主题上的设计总体上和Yii1.x保持一致,区别在于两个地方: 1. 由于Yii2引入了独立的视图(View)类,因此界面主题(Theme)也交由视图来管理: 2. 视图文件和Web资源在目录上做了分离(在应用程序模板中,分别对应于views和web目录) 以高级应用程序模板为例, 首先在frontend/views和frontend/web目录下分别创建一个themes/{your theme name}目录,比如themes/basic. 然后在应用程序配置中,修改配置如下: 'v

Android Build System Ultimate Guide

Android Build System Ultimate Guide April 8,2013 Lately, Android Open Source Project has gone through various changes. For instance, Since JB Google decided to replace bluez bluetooth stack with an open source stack implemented by Broadcom claiming t

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

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

安装完magento后，其他电脑无法访问magento，URL自动跳转到http://localhost/magento

问题:在电脑A上安装完了magento 1.7.0.2 然后, 在电脑A上用 http://localhost/magento 访问网站,没有问题. 但在电脑B 上用 http://192.168.41.131/magento 访问的时候,就会发现URL自动跳转到 http://localhost/magento 这个链接上,然后访问失败 解决方法: 在电脑A上登录magento后台,进入 System -> Configuration -> web -> Unsecure 在 Base

Ultimate guide to learning AngularJS in one day

What is AngularJS? Angular is a client-side MVC/MVVM framework built in JavaScript, essential for modern single page web applications (and even websites). This post is a full end to end crash course from my experiences, advice and best practices I've

用Java创建JMeter变量 - 终极指南

了解如何在Java中创建不同类型的JMeter变量,不同变量类型的详细信息以及如何避免错误. 在Apache JMeter?中编写负载或功能测试涉及使用不同类型的变量.变量有多种用途,例如,在以下情况下: 正在测试的API或Web服务返回一个或多个值,并且必须将值数据与预期结果进行比较. 正在测试的API或Web服务返回一个或多个值,并且必须在数据库中检查值数据. 因此,应用变量的知识和技能是使用JMeter的基础.本博文将解释当您需要在测试中使用Java代码时如何在JMeter中创建变量. 要

Android创建和使用数据库详细指南(1)

打印一个对象:NSLog(@"%@", stu); 默认情况下打印的时对象的名字和内存地址:这时需要重写description方法 // 重写description方法 - (NSString *)description { return [NSString stringWithFormat:@"title:%@,icon:%@,answer:%@,options:%@", self.title, self.icon, self.answer, self.optio

Magento创建主题

本主题讨论如何创建,使用主题,如何将徽标添加到主题文件中以及如何调整图像大小.先决条件1.对于兼容性,可升级性,维护方便起见,不修改开箱Magento的主题.要自定义您的Magento商店的设计,创建一个新的自定义主题.2.设置你的Magento应用程序开发模式.应用模式影响的静态文件由Magento的缓存的方式.关于主题的发展,我们在本章中所提供的建议是开发者/默认的模式而异.创建主题目录要创建您的主题目录:1.Go to /app/design/frontend.2.创建根据您的Vendor