创建前端主题

这个主题能干什么？

本主题讨论如何创建构成主题的文件、如何向主题添加logo以及如何设置图像大小。

您创建的新主题不会自动应用于您的商店。您需要在管理面板中手动应用。查看在后台应用和配置主题文章.

先决条件

要保持兼容性、可升级性的缘故，修改容易，不修改Magento 2默认主题。自定义Magento 2主题，创建一个新的自定义主题。
设置你的magento 2 为开发者模式。

创建前端主题: 演练

需要在Magento 2系统添加一个新的主题的步骤如下：

创建一个目录在 app/design/frontend/<your_vendor_name>/<your_theme_name>.
添加一个声明文件 theme.xml 和创建 etc 目录和创建view.xml 文件在主题目录。
添加一个 composer.json 文件.
添加一个 registration.php.
创建CSS, JavaScript, images, 和 fonts目录.
在管理面板中配置您的主题.

创建一个主题目录

创建主题目录:

进入<Magento 2 安装目录>/app/design/frontend目录。
创建一个新目录: /app/design/frontend/<Vendor>.
在“vendor”目录下，创建一个根据主题命名的目录。

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

声明你的主题

在为主题创建目录之后，你必须创建 theme.xml 至少包含主题名称和父主题名称(如果从一个主题继承 ). 可选地可以指定主题预览图像的存储位置。

添加或复制一个存在的 theme.xml 到你的主题目录 app/design/frontend/<Vendor>/<theme>
使用以下示例配置它:

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

如果您更改主题标题或父主题信息在 theme.xml 在主题已经注册, 你需要打开或重新加载任何Magento管理页面更改被保存在数据库中。

让你的主题生成Composer包 (可以)

主题例子 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__
);

配置图像

示例代码？

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

For details about images configuration in view.xml, see the 为主题配置图像属性 topic.

为静态文件创建目录

示例:

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

现在您的主题目录结构

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

主题 logo

magento 2 主题默认的Logo是logo.svg.

声明主题logo

声明主题logo, 添加一个延伸 <theme_dir>/Magento_Theme/layout/default.xml 布局文件.

For example, if your logo file is my_logo.png sized 300x300px, you need to declare it as follows:

<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大小可选。

要了解更多关于主题布局，查看 Layout section

下一步是什么？

主题注册

一旦你打开Magento管理（或重新加载任何Magento管理页面）添加主题文件的文件系统，你的主题得到注册并添加到数据库中。

Applying a theme

有关如何为店面应用主题，查看在后台应用和配置主题.

参见

卸载主题

Magento2中文手册