Magento2开发教程-如何创建一个主题Theme
7天成为Magento系统架构师，现在开始学习Magento全栈开发！
《Magento2.X企业级开发实战》
先决条件
- 要保持兼容性、可升级性的缘故，修改容易，不修改Magento 2默认主题。自定义Magento 2主题，创建一个新的自定义主题。
- 设置你的magento2为开发者模式。
创建前端主题: 演练
需要在Magento 2系统添加一个新的主题的步骤如下：
- 创建一个目录在
app/design/frontend/./ - 添加一个声明文件
theme.xml和创建etc目录和创建view.xml文件在主题目录。 - 添加一个
composer.json文件. - 添加一个
registration.php. - 创建CSS, JavaScript, images, 和 fonts目录.
- 在管理面板中配置您的主题.
创建一个主题目录
创建主题目录:
- 进入
/app/design/frontend - 创建一个新目录:
/app/design/frontend/. - 在“vendor”目录下，创建一个根据主题命名的目录。
app/design/frontend/ ├──/ │ │ ├──... / │ │ │ ├── ... │ │ │ ├── ...
声明你的主题
在为主题创建目录之后，你必须创建 theme.xml 至少包含主题名称和父主题名称(如果从一个主题继承 ). 可选地可以指定主题预览图像的存储位置。
- 添加或复制一个存在的
theme.xml到你的主题目录app/design/frontend// - 使用以下示例配置它:
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
如果您更改主题标题或父主题信息在 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 文件，示例代码:
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::THEME,
'frontend//' ,
__DIR__
);配置图像
示例代码？
...
![]()
id="category_page_grid" type="small_image">
For details about images configuration in view.xml, see the 为主题配置图像属性 topic.
为静态文件创建目录
示例:
app/design/// / ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/
现在您的主题目录结构
app/design/frontend// ├── / │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images │ │ │ ├── logo.svg │ ├── registration.php │ ├── theme.xml │ ├── composer.json
主题 logo
magento 2 主题默认的Logo是logo.svg.
声明主题logo
声明主题logo, 添加一个延伸
For example, if your logo file is my_logo.png sized 300x300px, you need to declare it as follows:
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
name="logo">
name="logo_file" xsi:type="string">images/my_logo.png
name="logo_img_width" xsi:type="number">300
name="logo_img_height" xsi:type="number">300
声明logo大小可选。
文章来源于互联网:Magento2开发教程NO4-如何创建一个主题Theme
如无特殊说明或标注，任何个人或组织，复制、转载、采集本站内容请注明：
本文来源于：【Magento中文网】，并添加本文地址链接。
如未按上述操作复制或转载，本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
本文来源于：【Magento中文网】，并添加本文地址链接。
如未按上述操作复制或转载，本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益，可联系我们进行处理。