先决条件
- 要保持兼容性、可升级性的缘故，修改容易，不修改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 inview.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
声明主题logo, 添加一个延伸<theme_dir>/Magento_Theme/layout/default.xml布局文件.
For example, if your logo file ismy_logo.pngsized 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大小可选。
来源： 蓝文资源库