创建一个主题
本文讨论如何创建一个主题，怎么为主题添加一个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图片有不同的名字和格式就需要声明它。
声明主题图片
要声明一个主题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