先决条件
要保持兼容性、可升级性的缘故，修改容易，不修改Magento 2默认主题。自定义Magento 2主题，创建一个新的自定义主题。
设置你的magento2为开发者模式。
创建前端主题: 演练
需要在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大小可选。
