最新消息:觉得本站不错的话 记得收藏哦 博客内某些功能仅供测试 讨论群:135931704 快养不起小站了 各位有闲钱就打赏下把 My Email weicots#gmail.com Please replace # with @

创建一个 magento2主题 Create a theme

Magento 资料整理 ajiang-tuzi 7217浏览

创建一个主题

本文讨论如何创建一个主题,怎么为主题添加一个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中配置所有店铺前端产品图片尺寸。例如,你可以指定分类网格视图产品图片为250×250像素,相应的配置会是这样:

...
    <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,尺寸为300×300像素,你可以如下声明它:

<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尺寸是可选的。更多关于主题的布局,会在之后的文章中详细讲解。

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

蜀ICP备15020253号-1