创建magento2主题

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

创建一个主题

本文讨论如何创建一个主题，怎么为主题添加一个logo，如何定义图片尺寸。

文章内容

创建一个主题目录

为你的主题创建目录：

1.进入/app/design/frontend.

2.根据你供应商的名字创建一个新的目录/app/design/frontend/

3.在vendor目录下，根据你的主题创建一个目录

/app/design/frontend/
├── <Vendor>/
│   │   ├──...<theme>/
│   │   │   ├── ...
│   │   │   ├── ...

文件夹名称通常匹配主题代码的命名：供应商认可的任何字幕数字字符集。该公约仅仅是一个建议，并未阻止以另一种方式命名。

声明你的主题

在创建了主题目录以后，你必须创建包含至少主题名和父主题名（如果主题继承自一个主题）的theme.xml。你也可以指定主题预览图的存储位置。

1.添加或者拷贝已有的theme.xml到你的主题目录app/design/frontend//下。

2.用下面的示例来配置theme.xml：

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>New theme <!-- 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包（可选）

Magento默认的主题被创建为Composer包。要把你的主题写成一个包，添加一个composer.json文件到主题目录下并在包服务器上注册这个包。默认的公共包装服务器https://packagist.org/。

composer.json

提供主题相关信息。下面是一个主题code>composer.json的示例：


{
    "name": "magento/theme-frontend-luma",
    "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

要在系统中注册你的主题，你需要用下面的内容在你的主题目录下创建一个registration.php：

<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<Vendor>/<theme>',
    __DIR__
);

这里的是你供应商的名字，theme是你主题的名字。你可以查看Luma主题的registration.php文件。

配置图片

产品图片大小和其它店铺前端性能在view.xml里被配置。它需要一个主题，但是否有父主题都可。如果你主题里的产品图片与父主题不同，或者你的主题没有继承任何主题，用下面的步骤添加一个view.xml

1.以可以创建文件夹权限的用户（通常情况下，是Magento的文件系统的所有者）登录到Magento服务器中。

2.在你的主题目录下创建etc文件夹

3.从已有主题中拷贝view.xml文件（例如，从Blank主题）到你主题的etc文件夹中。

4.在view.xml中配置所有店铺前端产品图片尺寸。例如，你可以指定分类网格视图产品图片为250x250像素，相应的配置会是这样：

...
    <image id="category_page_grid" type="small_image">
        <width>250</width>
        <height>250</height>
    </image>
...

创建静态文件目录

你的主题将包含几种静态文件：样式，字体，JavaScript和图片。每种类型的图片都被存储在web目录下的独立子目录中：

app/design/<area>/<Vendor>/<theme>/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

当前你主题的目录结构

当前，你的主题目录看起来是这样的：

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

主题logo

在Magento2中，默认的logo名字和格式是logo.svg。当你把一个logo.svg放在常规位置（<theme_dir>/web/images目录）中，它就会被自动识别为主题logo。主题被应用时就会出现在店铺页面的头部。

在你自定义的主题中，你可以使用不同名字和格式的logo，但是你可能需要声明它。

是否需要声明取决于你的主题是否有父主题以及它的logo图片。可能是下面的情况：

你的主题没有父主题：
- 如果你的logo图片名字和格式是默认的，logo.svg，那么就不需要声明它。
- 如果你的logo图片名字和格式不是默认的就需要声明它。
不的主题有父主题
- 如果你的主题logo图片名字和格式与父主题的logo一样，那么就不需要声明它。
- 如果你的logo图片有不同的名字和格式就需要声明它。

声明主题图片

要声明一个主题logo，需要添加一个扩展的<theme_dir>/Magento_Theme/layout/default.xml布局。

例如，如果你的logo文件是my_logo.png，尺寸为300x300像素，你可以如下声明它：

<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/my_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>

声明logo尺寸是可选的。更多关于主题的布局，会在之后的文章中详细讲解。

电商网站开发服务。

分享到：

上一篇：Magento订单创建和管理下一篇：Magento2主题结构