Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题终极指南
Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题基础指南
在Magento 2中管理和设置主题的方式有很多改进.Magento 1.9中引入的theme.xml定义文件和新的回退系统的使用是两个最重要的改进。Magento 2中的后备系统与Magento 1.x的工作方式类似,但是具有额外的优势,您可以选择无限的父主题继承/后退到
- 全部通过主题中的theme.xml文件。
假设您想基于新的Magento“Blank”主题创建一个全新的主题。首先,您将在 app/design/frontend 中创建一个名为Session / default的新文件夹。然后,您将在此目录中创建一个theme.xml文件(最好从 app/design/frontend/Magento/blank/theme.xml 复制它),命名您的主题,然后选择任何父级。在这种情况下,我们想要Magento 2的Blank主题。
Magento主题目录的结构通常如下所示:
<theme_dir>/
├── <Vendor>_<Module>/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ ├── layout/
│ │ ├── override/
│ ├── templates/
├── etc/
├── i18n/
├── media/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/
├── composer.json
├── registration.php
├── theme.xml
让我们仔细看看每个特定的子目录。
目录 | 需要 | 描述 |
---|---|---|
/<Vendor>_<Module> |
可选的 | 特定于模块的样式,布局和模板。 |
/<Vendor>_<Module>/web/css/ |
可选的 | 特定于模块的样式(.css 和/或.less 文件)。模块的常规样式在_module.less 文件中,而小部件的样式在中_widgets.less 。 |
/<Vendor>_<Module>/layout |
可选的 | 扩展默认模块或父主题布局的布局文件。 |
/<Vendor>_<Module>/layout/override/base |
可选的 | 覆盖默认模块布局的布局。 |
/<Vendor>_<Module>/layout/override/<parent_theme> |
可选的 | 覆盖模块父主题布局的布局。 |
/<Vendor>_<Module>/templates |
可选的 | 此目录包含主题模板,这些主题模板将覆盖此模块的默认模块模板或父主题模板。自定义模板也存储在此目录中。 |
/etc/view.xml |
一个主题是必需的,但是如果父主题中存在它是可选的 | 该文件包含所有店面产品图像和缩略图的配置。 |
/i18n |
可选的 | .csv文件及其翻译。 |
/media |
可选的 | 该目录包含主题预览(主题的屏幕快照)。 |
/web |
可选的 | 可以直接从前端加载的静态文件。 |
/web/css/source |
可选的 | 该目录包含主题 less 配置文件,该文件调用Magento UI库中全局元素的mixins,该 theme.less 文件覆盖默认变量值。 |
/web/css/source/lib |
可选的 | 查看覆盖存储在其中的UI库文件的文件 lib/web/css/source/lib |
/web/fonts |
可选的 | 主题字体。 |
/web/images |
可选的 | 此主题中使用的图像。 |
/web/js |
可选的 | 主题JavaScript文件。 |
/composer.json |
可选的 | 描述主题依赖关系和一些元信息。如果您的主题是Composer软件包,它将在这里。“名称”字段必须采用格式"<vendor-name>/theme-<area>-<theme-name>" 。 |
/registration.php |
需要 | 在系统中注册主题所需。 |
/theme.xml |
需要 | 该文件是强制性的,因为它将主题声明为系统组件。如果主题是从现有主题继承的,则它包含基本的元信息,例如主题标题和父主题名称。Magento系统使用该文件来识别主题。 |
静态文件可以位于主题目录中,如下所示:
<theme_dir>/
├── media/
├── web
│ ├── css/ (except the "source" sub-directory)
│ ├── fonts/
│ ├── images/
│ ├── js/
动态视图文件位于主题目录中,如下所示:
<theme_dir>/
├── Magento_<module>/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ ├── layout/
│ │ ├── override/
│ ├── templates/
├── web/
│ ├── css/
│ │ ├── source/
-------------------------------
-----------------------------------------
一,创建基础主题 与 基本指南
- 创建Magento主题文件夹
- 声明你的主题
- Composer package
- registration.php文件
- 创建静态文件,文件夹
- 朗读配置目录产品映像
- 声明主题标志
- 基本布局元素
- 布局文件类型和约定。
所以你的theme.xml文件应该是这样的:
<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:noNamespaceSchemaLocation=”../../../../lib/internal/
Magento/Framework/Config/etc/theme.xsd”>
<title>Session Default</title>
<parent>Magento/blank</parent>
</theme>
主题结构
app/design/frontend/mageplaza/
├── ultimate/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── registration.php
│ ├── theme.xml
│ ├── composer.json
二,创建Magento主题文件夹
Creating a folder for the theme:
- Go to
app/design/frontend
- Creating a vendor folder
app/design/frontend/<vendor>
e.g:app/design/frontend/mageplaza
- Create a theme folder
app/design/frontend/<vendor>/<theme>
e.g:app/design/frontend/mageplaza/ultimate
app/design/frontend/
├── mageplaza/
│ │ ├──...ultimate/
│ │ │ ├── ...
│ │ │ ├── ...
三,声明你的主题
现在我们有文件夹
app/design/frontend/mageplaza/ultimate
,现在创建一个名为 theme.xml 的文件,定义关于主题的基本信息,例如:名称,父主题(如果你的主题继承现有主题),预览图像<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mageplaza Ultimate</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>
四,composer包修改
Composer是PHP中依赖项管理的工具。它允许您声明项目所依赖的库,并为您管理(安装/更新)它们。
如果要将主题作为包分发,请将composer.json文件添加到主题目录,并在打包服务器上注册该包。
composer.json
example::{
"name": "mageplaza/ultimate",
"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
您可以添加以下内容以将主题注册到Magento 2
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/mageplaza/ultimate',
__DIR__
);
六,创建静态文件
app/design/<area>/mageplaza/ultimate/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/
七,配置目录产品映像
正如您在上面提到的主题结构中所看到的,有一个名为
etc/view.xml
.的文件。这是配置文件。此文件是Magento主题所必需的,但如果存在于父主题中,则它是可选的。转到 app/design/<area>/mageplaza/ultimate/ 并创建文件夹等文件view.xml您可以复制父主题中的view.xml文件,例如 app/design/frontend/Magento/blank/etc/view.xml.
让我们更新目录产品网格页面的图像配置。
<image id="category_page_grid" type="small_image">
<width>250</width>
<height>250</height>
</image>在view.xml中,图像属性在元素范围内配置:
<images module="Magento_Catalog">
...
<images/><image>元素的id和type属性定义的每种图像类型配置图像属性 <images module="Magento_Catalog">
<image id="unique_image_id" type="image_type">
<width>100</width> <!-- Image width in px -->
<height>100</height> <!-- Image height in px -->
</image>
<images/>
八,声明主题标志 <theme_dir>/Magento_Theme/layout/default.xml
<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/custom_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>在Magento 2默认情况下,它使用
<theme_dir>/web/images/logo.svg
, 在您的主题中,您可以更改为不同的文件格式,如png,jpg,但您必须声明它。
九,基础布局元素
Magento页面设计的基本组件是块和容器。
存在容器的唯一目的是将内容结构分配给页面。除了包含的元素的内容之外,容器没有其他内容。容器的示例包括标题,左列,主列和页脚。
十,布局文件类型和约定
- 模块和主题布局文件
以下术语用于区分不同应用程序组件提供的布局:
- 基本布局:模块提供的布局文件。常规:
- 页面配置和通用布局文件:
<module_dir>/view/frontend/layout
- 页面布局文件:
<module_dir>/view/frontend/page_layout
主题布局:主题提供的布局文件。常规:
- 页面配置和通用布局文件:
<theme_dir>/<Namespace>_<Module>/layout
- 页面布局文件:
<theme_dir>/<Namespace>_<Module>/page_layout
- 创建主题扩展文件
您只需要创建包含所需更改的扩展布局文件,而不是复制大量页面布局或页面配置代码,然后修改要更改的内容。
添加扩展页面配置或通用布局文件:
<theme_dir>
|__/<Namespace>_<Module>
|__/layout
|--<layout1>.xml
|--<layout2>.xml例如,要自定义
<Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml
中定义的布局,您需要在自定义主题中添加具有相同名称的布局文件,如下所示:<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml
<theme_dir>
|__/<Namespace>_<Module>
|__/page_layout
|--<layout1>.xml
|--<layout2>.xml
- 覆盖基本布局
如果 block (块) 具有取消最初调用的方法的效果的方法,则不必覆盖,在这种情况下,您可以通过添加调用取消方法的布局文件来自定义布局。
要添加覆盖的基本布局文件(以覆盖模块提供的基本布局):在以下位置放置具有相同名称的布局文件:<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/base
|--<layout1>.xml
|--<layout2>.xml这些文件覆盖以下布局:
<module_dir>/view/frontend/layout/<layout1>.xml
<module_dir>/view/frontend/layout/<layout2>.xml
- 覆盖主题布局
要添加重写主题文件(以覆盖父主题布局):
<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/theme
|__/<Parent_Vendor>
|__/<parent_theme>
|--<layout1>.xml
|--<layout2>.xml这些文件覆盖以下布局:
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
开始更多学习!Ref: Devdocs.magento.com, Stackoverflow.com
Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题终极指南的更多相关文章
- Magento 2中文手册教程 - 如何获得 Magento 2
Magento 2 安装 我们搜集了一些信息来帮助您开始使用Magento 2和你的Magento 2安装. 我们有一些资源帮助您开始使用Magento 2. 如何获得 Magento 2 参考下表开 ...
- Yii2创建多界面主题(Theme)
Yii2界面主题上的设计总体上和Yii1.x保持一致,区别在于两个地方: 1. 由于Yii2引入了独立的视图(View)类,因此界面主题(Theme)也交由视图来管理: 2. 视图文件和Web资源在目 ...
- Ultimate Guide to WhatsApp for Business 2019
By Iaroslav Kudritskiy (Source: https://rocketbots.io/blog/the-ultimate-guide-to-whatsapp-business-a ...
- Ultimate Guide to WeChat for Business 2019
Ultimate Guide to WeChat for Business 2019 By Iaroslav Kudritskiy (source :https://rocketbots.io/blo ...
- Ultimate Guide to Line For Business (May 2019)
Ultimate Guide to Line For Business (May 2019) By Iaroslav Kudritskiy February 4, 2019 No Comments I ...
- Android Build System Ultimate Guide
Android Build System Ultimate Guide April 8,2013 Lately, Android Open Source Project has gone throug ...
- 使用VS2012主题插件创建自己的主题
上篇文章讲了如何更换VS2012的主题,具体内容请参考:Vistual Studio 2012更换皮肤.可是上面的步骤仅仅让我们可选择的主题是增多了,我们可不可以自己创建自己的主题呢? 答案是肯定的, ...
- 如何创建magento模块z之Hello World例子(转)
步骤:1.创建一个Hello World模块2.为这个模块配置路由3.为这个模块创建执行控制器 创建Hello World模块 创建模块的结构目录:app/core/local/Sjolzy/Hell ...
- Magento 2 Block模板终极指南
/view/frontend/page_layout/2columns-left.xml <layout xmlns:xsi="http://www.w3.org/2001/XMLSc ...
随机推荐
- 开源ERP-成功案例分析(3)
Odoo用户概要 关于Odoo全球的用户,我们来看一些数据: Odoo目前全球有300万使用者 Odoo系统上每天新创建的数据库超过1000个 Odoo和Word.Excel.PowerPoint一样 ...
- Linux 配置本地源 (Ubuntu / CentOS)
目录 Linux local source list A. Ubuntu 1. 本地ISO 2. 制作本地源 B. CentOS 1. 本地ISO Linux local source list A. ...
- 利用ZYNQ SOC快速打开算法验证通路(5)——system generator算法IP导入IP integrator
一.前言 利用FPGA设计算法一直以来都是热点,同样也是难点.将复杂的数学公式 模型通过硬件系统来搭建,在低延时 高并行性等优势背后极大提高了设计难度和开发周期.Xilinx公司的sysGen(sys ...
- python——python3.6环境搭建(Windows10,64位)
1.python软件资源下载 1.1 打开python官网地址:https://www.python.org 1.2 根据自己电脑的设置选择下载合适的python3.6.2 1.3 此处选择windo ...
- ThinkPad E470笔记本电脑无声音、无线wifi功能(灰色)
最近有同事找我看他的笔记本没有wifi,型号是ThinkPadE470 ,上网搜了下提问的挺多,写一个看看有什么帮助没 看了下笔记本wifi标志是灰色显示只有飞行模式,启用了一下热键 fn+F3 没什 ...
- Linux上修改主机名
依次执行以下命令 hostnamectl set-hostname 你想设置的名字 hostname 你想设置的名字(和上面的名字保持一致) exit 然后重新连接就行了
- jspdf生成pdf并在页面展示
jspdf调用ouput即可 https://blog.csdn.net/dragonzoebai/article/details/18243823 获取页面生成pdf:jspdf+html2canv ...
- Spring事件和监听器
Application下抽象子类ApplicationContextEvent的下面有4个已经实现好的事件 ContextClosedEvent(容器关闭时) ContextRefreshedEven ...
- python3 time模块
import time '''查看系统时间拿到的是一个数字(时间戳)从1970-01-01 00:00:00开始计算,以秒为单位'''print(time.time()) 执行结果:155650817 ...
- 性能测试监控平台:InfluxDB+Grafana+Jmeter
前面的博客介绍了InfluxDB.Telegraf.Grafana的安装和使用方法,这篇博客,介绍下如何利用这些开源工具搭建性能测试监控平台... 前言 性能测试工具jmeter自带的监视器对性能测试 ...