创建主题 · magento 2.0开发手册

**本主题讨论如何创建，使用主题，如何将徽标添加到主题文件中以及如何调整图像大小。** **先决条件** 1.对于兼容性，可升级性，维护方便起见，不修改开箱Magento的主题。要自定义您的Magento商店的设计，创建一个新的自定义主题。 2.设置你的Magento应用程序开发模式。应用模式影响的静态文件由Magento的缓存的方式。关于主题的发展，我们在本章中所提供的建议是开发者/默认的模式而异。 **创建主题目录** 要创建您的主题目录： 1.Go to <your Magento install dir>/app/design/frontend. 2.创建根据您的Vendor的名字命名一个新的目录： /app/design/frontend/<Vendor>. 3.在Vendor目录中，创建一个根据你的主题命名的目录。 ~~~ app/design/frontend/ ├── <Vendor>/ │ │ ├──...<theme>/ │ │ │ ├── ... │ │ │ ├── ... ~~~ 文件夹名称通常匹配主题的代码命名使用：任何字母数字字符集，作为卖方认为合适，是可以接受的。该公约仅仅是一个建议，所以没有什么能够阻止以另一种方式在这个目录命名。 **声明你的主题** 您为您的主题创建一个目录后，必须创建theme.xml至少包含主题名称和父主题名称（如果主题从一个继承）。您还可以指定主题预览图像的存储位置。 1.添加或复制theme.xml到您的主题目录 2.使用下面的示例配置： ~~~ <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>New theme</title>  <parent>Magento/blank</parent>  <media> <preview_image>media/preview.jpg</preview_image>  </media> </theme> ~~~ **使用你的主题composer包** Magento的默认主题分布在composer包。要分发你的主题作为一个包，一个composer.json文件添加到主题目录并注册打包服务器上的包。默认的公共打包服务器是https://packagist.org/。 composer.json提供主题的相关性信息。一个主题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" ] } } ~~~ 你可以找到关于composer于一体的Magento的系统集composer细节。添加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__ ); ~~~ 'frontend/<Vendor>/<theme>'是你的Vendor名称，是主题代码。为了说明，请参阅Magento的亮度主题registration.php的文件。 **配置图片** 产品图片的大小和对店面的其他属性都在view.xml用配置文件来配置。它需要一个主题，但如果存在于父主题是可选的。如果你的主题产品的图像尺寸不同于父主题的不同，或者如果你的主题没有任何主题继承，使用以下步骤添加view.xml用： 1.登录到您的Magento服务器作为权限的用户在安装的Magento目录下创建的目录和文件。（通常情况下，这是Magento的文件系统所有者）。 2.在你的主题文件夹中创建etc目录 3.从现有的主题etc目录复制view.xml到你的主题etc目录中。 4.配置view.xml用所有店面的产品尺寸的影像。例如，您可以通过指定大小为250×250像素让该类别网格视图产品图片广场，这里是相应的配置会是什么样子： ~~~ ... <image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image> ... ~~~ 有关view.xml用图像配置的详细信息，请参阅主题主题配置图片属性。 **创建静态文件目录** 你的主题可能会包含多种类型的静态文件：样式，字体，JavaScript和图像。每种类型应存储在主题目录的网络的一个独立的子目录中： ~~~ app/design/<area>/<Vendor>/<theme>/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/ ~~~ 在.../<theme>/web/images您存储相关的静态文件一般的主题。例如，一个主题的标志被存储在.../<theme>/web/images。很可能你的主题也将包含模块特定的文件，这些文件都存储在相应的子目录，.../<theme>/<Namespace_Module>/web/css和相似。管理模块特定的主题文件将在本指南的以下部分进行讨论。当您更改存放在这里的任何文件，你需要清除`pub/static` and `var/preprocessed` 目录，然后重新加载页面。否则不会显示 **现在主题的目录结构** 此时你的主题文件结构如下所示： ~~~ app/design/frontend/<Vendor>/ ├── <theme>/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images │ │ │ ├── logo.svg │ ├── theme.xml │ ├── composer.json ~~~ **主题logo** 在Magento的应用程序，标志图像的默认格式，名称为logo.svg的。当你在传统的位置，<theme_dir>/web/images目录放logo.svg的形象，它被自动识别为主题的标志。一旦应用主题。它显示在您的商店页面标题。在自定义主题，你可以使用一个标志文件使用不同的名称和格式，但你可能需要声明它。声明的必要性取决于你是否主题有一个父主题，其标志形象。以下几种情况：你的主题没有父主题： 1.如果你的logo图片名称和格式是默认的，logo.svg的，没有必要宣布它; 2.如果你的标志形象的名称或格式不违约，你需要声明它的布局。你的主题有父主题： 1.如果你的主题标志的图像具有相同的名称和格式父的主题标志，没有必要宣布它; 2.如果您的标志图像有不同的名称或格式，声明它的布局。 **声明的主题标志** 要声明的主题标志，添加一个扩展<theme_dir>/Magento_Theme/layout/default.xml布局。例如，如果你的标志文件my_logo.png尺寸300x300px，你需要如下声明它： ~~~ <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大小是可选的。要了解更多关于主题的布局，请参阅本指南的布局部分。