如何在Magento2中创建主题（第二部分）

redmaomail 2024-07-24 18:13 阅读数 72 #Magento

2.配置和创建主题文件夹

·按app/design/<area>/<vendorName>/<newTheme>/的结构在design文件夹下创建主题文件夹

例如：/app/design/frontend/Magento/magestore

声明主题

在刚创建的magestore主题文件夹里创建theme.xml文件。声明信息包括：主题，版本，父类主题（如果是继承主题）

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
<title>Alwaylystore Theme</title>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

为新主题创建一张图片：magestore.png，它的文件位置是：/app/design/frontend/Magento/magestore/media/theme/preview/magestore.png。如果路径不对会找不到图片的。

在主题文件夹里创建composer.json文件

{
    "name": "magento/theme-frontend-blank",
    "description": "N/A",
    "require": {
        "php": "~5.4.11|~5.5.0",
        "magento/framework": "0.42.0-beta1",
        "magento/magento-composer-installer": "*"
    },
    "type": "magento2-theme",
    "version": "0.42.0-beta1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "extra": {
        "map": [
            [
                "*",
                "frontend/Magento/blank"
            ]
        ]
    }
}

在后台，进入 Content > Design > Themes，可以看到新主题；

配置图片（可选）

在view.xml中，图片的尺寸将被配置。在新主题中新的文件夹被创建在 app/design/<area>/<vendorName>/<newTheme>/etc/

例如： /app/design/frontend/Magento/magestore/etc/

把默认主题中的view.xml文件拷贝到<etc>文件夹中

在view.xml中配置前端显示设置。例如，设置图片的尺寸到120px

<var name="new_products_content_widget_grid:type">small_image</var>
<var name="new_products_content_widget_grid:width">120</var>
<var name="new_products_content_widget_grid:ratio">1</var>
<var name="new_products_content_widget_grid:height">120</var>

创建图片文件夹

在主题中，创建<web>文件夹，并在<web>文件夹内创建<image>文件夹：

App/design/<area>/<vendorName>/<newTheme>web/images/

例如： /app/design/frontend/Magento/alwaylystore/web/images/

为主题添加一个logo图片

进入app/design/<area>/<vendorName>/<newTheme>web/images/

例如：/app/design/frontend/Magento/mageystore/web/images/

拷贝名为logo.png的图片到文件夹中。 Magento默认设置logo.gif图片作为logo图片。如果你想要修改，那么拷贝默认主题里的/Magento_Theme/layout/default.xml到你的主题中。

例如：/app/design/frontend/Magento/magestore/Magento_Theme/layout/default.xml

添加下面的代码：

<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>

现在，我们的文件结构看起来像是这样的：

使用创建的主题：

进入后台Store > Configuration > Design在Design Theme里选择我们创建的主题，然后保存。

我们已经创建了一个新主题的文件结构，下面的部分将一步一步地配置你的主题。

3.基础元素定制

定制CSS：

到/app/design/frontend/Magento/blank文件夹中拷贝web/css文件夹

粘贴到你的主题相应的文件夹中（/app/design/frontend/Magento/magestore/web）：

到文件夹/lib/web/css/source/lib中拷贝lib.css文件到Magestore主题中

打开app/design/frontend/Magento/magestore/web/css/中的style.less文件，如下编辑代码：

之后，在你的source文件夹里创建mytheme.less。

我们就有了这样的文件路径：app/design/frontend/Magento/magestore/web/css/source/mytheme.less,将下面的代码加入到mytheme.less中：

body {
  margin: 0px!important;
  padding: 0px!important;
}
 
.page-wrapper {
  background-color: #333;
}
 
 
.mycustom-class {
  color: red;
}

删除Var/cache文件夹，刷新你的浏览器，你将看到：

定制模版模块：

你还可以定制任何模块的html，例如，如果你想定制前端的Magento_Catalog模块，到模块的app/code/Magento/Catalog/view/frontend/文件夹中，拷贝layout, templages, web文件到你的主题中并放置到和模块一样名字的Magento_catalog文件夹中，例如：