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

Posted by

如何在 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