Magento 2 中创建子主题第一小节 建立基本目录文件

发布于 作者:

如何在 Magento 2 中创建子主题

默认情况下，Magento 2 为我们提供了两个主题。1. blank主题 2. luma主题（这是blank主题的子主题) 您可以在源码中查看这些主题。

您可以将这些主题用于您的商店，但是，如果您想自定义默认设计或需要创建自己的主题，Magento 强烈建议不要更改或编辑默认的 Luma 和 Blank 主题文件。

那么为什么要在 Magento 2 中创建子主题呢

  1. 子主题继承自父主题。
  2. 我们将能够保留我们的自定义，并将原始主题和自定义主题保存在单独的文件夹中。
  3. 升级父主题时不会丢失更改。
  4. 我们可以创建多个具有其他界面的店面，对于每个子主题，我们都会有一个界面。

在这个实践中，我将创建一个名为 panduola mok 的子主题，继承自 Luma 主题。我们来做这个练习，你需要一步一步来：

第一步：声明子主题

  • 在路径为 app\design\frontend 中创建名为 panduola 的库文件夹
  • 在路径为 app\design\frontend\panduola 中创建名为mok的子主题
  • 在路径为 app\design\frontend\panduola\mok 中创建名为 theme.xml 的文件，以指定子主题继承的父主题，在theme.xml文件中包含下面标签。
    • title：子主题的标题。
    • parent：我们要为子主题指定父主题路径。
    • preview_image：此图像将显示您的子主题布局和设计。
  • 在路径为 app\design\frontend\panduola\mok 的文件夹下面创建registration.php，，用于注册您的子主题。
<?php
/**
 * Created by PhpStorm.
 * User: yshuq
 * Date: 2022/7/14
 * Time 10:28 PM
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/panduola/mok',
    __DIR__
);
  • 在路径为 app\design\frontend\panduola\mok 的文件夹下面创建Composer.json文件
{
  "name": "panduola/theme-frontend-mok",
  "description": "panduola mok Theme",
  "require": {
    "php": "~5.6.0|7.0.2|7.0.4|~7.0.6|~7.1.0",
    "magento/theme-frontend-luma": "100.1.*|100.2.*",
    "magento/framework": "100.0.*|100.1.*|101.0.*"
  },
  "type": "magento2-theme",
  "version": "2.2.0",
  "license": [
    "OSL-3.0",
    "AFL-3.0"
  ],
  "autoload": {
    "files": [
      "registration.php"
    ]
  }
}
  • 复制 vendor\magento\theme-frontend-luma\etc 下面的view.xml 文件到 app\design\frontend\panduola\mok\etc 下面。
  • 复制 vendor\magento\theme-frontend-luma\media下面的preview.jpg 文件到 app\design\frontend\phpcuong\giaphufashion\media 下面
  • 为静态文件创建目录,您的主题可能包含几种类型的静态文件:
    • Styles
    • Fonts 
    • Images 
app/design/<area>/<Vendor>/<theme>/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

每个类型都应该存储在一个单独的子目录的网页在您的主题文件夹: 在…/< theme >/web/images 目录中，存储与主题相关的常规静态文件。

主题目录结构

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

第二步：安装新主题

依次执行下面命令：

  • php bin/magento setup:upgrade
  • php bin/magento setup:static-content:deploy -f (Using for the Magento 2.2.x)
  • php bin/magento cache:flush

新主题已安装并显示在名为theme的表中

第三步：将店面应用于新主题

转到后台，然后转到Content→Design→Themes。
当你在这个列表中看到你的主题时，转到Content→Design→Configuration 将店面应用于新主题。

参考：

https://www.youtube.com/watch?v=W5E9mWTRjqo

https://github.com/php-cuong/theme-frontend-giaphufashion

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-create.html