创建一个 magento2主题 Create a theme

7天成为Magento系统架构师,现在开始学习Magento全栈开发!

《Magento2.X企业级开发实战》

创建一个主题

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

文章内容

创建一个主题目录

为你的主题创建目录:

1.进入/app/design/frontend.

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

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

/app/design/frontend/
├── /
│   │   ├──.../
│   │   │   ├── ...
│   │   │   ├── ...

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

声明你的主题

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

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

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

New theme 
     <parent>Magento/blank</parent><media><preview_image>media/preview.jpg</preview_image></media>

为你的主题写一个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

/',
    __DIR__
);

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

配置图片

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

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

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

3.从已有主题中拷贝view.xml文件(例如,从Blank主题)到你主题的etc文件夹中。

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

...
    250250
...

创建静态文件目录

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

app/design////
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

当前你主题的目录结构

当前,你的主题目录看起来是这样的:

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

主题logo

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

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

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

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

要声明一个主题logo,需要添加一个扩展的

/Magento_Theme/layout/default.xml

布局。

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

images/my_logo.png300300

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

转载请注明:(●–●) Hello.My Weicot » 创建一个 magento2主题 Create a theme

文章来源于互联网:创建一个 magento2主题 Create a theme

如无特殊说明或标注,任何个人或组织,复制、转载、采集本站内容请注明:
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。