为Magento构建自定义主题时,务必遵循最佳实践以扩展系统的设计。 Magento 2的前端与Magento 1的前端明显不同,因此即使对于经验丰富的Magento开发人员,也有很多值得注意的地方。
本文不是有关前端自定义的详尽分步指南。它的主要目的是概述系统的结构方式和最佳扩展方式的基础知识,并为各种主题提供参考。一般来说,Magento的官方 开发文档 是完成特定任务的好资源。
首先,我将推荐一种全球领先的主题构建方法。通过实施徽标,字体和主题颜色等关键的品牌元素,我们将坚持紧要的道路,并为其余的主题奠定基础。例如,当我们在设计产品列表页面的样式时,我们不必担心“购物车”按钮的外观,因为它们应该已经与网站上其余的按钮相匹配,所有按钮都应进行样式设置在全球范围内。
我们将在下面概述主题构建的几个区域(例如徽标,字体,图标和全局样式),这些区域可用于快速使网站看起来具有明显的品牌知名度。
For a new 主题, we’ll need to create registration.php
和 主题.xml
在 our 主题 directory, 和 then run $ bin/magento setup:upgrade
.
registration.php
将主题注册为指定位置的系统组件(与模块一样)。
例:
1 2 3 4 5 |
<?的PHP 使用 Magento\构架\零件\组件注册器; 组件注册器::寄存器(组件注册器::主题, '前端/<myVendorName>/<myCustomTheme>', __DIR__); |
主题.xml
定义基本的主题配置,至少包括标题和通常要扩展的父主题。
例:
1 2 3 4 5 6 7 8 |
<主题 XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance" si:noNamespaceSchemaLocation=“ ur:magento:框架:Config / etc / 主题.xsd”> <标题>我的 自订 主题</标题> <父母>Magento/空白</父母> <媒体> <Preview_image>媒体/预习.jpg</Preview_image> </媒体> </主题> |
在“ 开发文档”中的“创建一个新的店面主题’。
注意: 建议您将所有自定义主题扩展为Magento /空白(而不是Magento / luma),因为Luma主题仅作为示例。
徽标是主题的重要组成部分,因为它是首先打动用户的网站的主要标识。强烈建议尽可能使用SVG矢量图像,因为它可以缩放到任何屏幕分辨率或缩放级别。
Magento 2 使用s an SVG logo by default, 和 it will find yours automatically if you put it 在 your 主题 directory at: web/images/logo.svg
.
You may also need to specify the dimensions 在 : Magento_Theme/layout/default.xml
.
例:
1 2 3 4 5 6 7 8 9 10 11 12 |
<页 XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance" si:noNamespaceSchemaLocation=“ urn:magento:framework:View / Layout / etc / 页_configuration.xsd”> <身体> <referenceBlock 名称=“商标”> <论点> <!- 组 数字 如 需要 -> <论据 名称=“ logo_img_width” si:类型=“数”>180</论据> <论据 名称=“ logo_img_height” si:类型=“数”>75</论据> </论点> </referenceBlock> </身体> </页> |
Images for catalog 产品s can be sized 和 re-sized 在 Magento without having to change any 风格s. Default configuration is found 在 the Magento Blank 主题, 在 etc/view.xml
. Configuration can be customized by redefining values 在 etc/view.xml
在 our 主题 directory.
例:
让我们在类别页面的网格视图和列表视图中为图像设置不同的宽度和高度:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?XML文件 版="1.0"?> <视图 XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance" si:noNamespaceSchemaLocation=“ ur:magento:框架:Config / etc / 视图.xsd”> <媒体> <图片 模组=“ Magento_Catalog”> <图片 ID=“ category_page_grid” 类型=“ small_image”> <宽度>200</宽度> <高度>200</高度> </图片> <图片 ID=“ category_page_list” 类型=“ small_image”> <宽度>230</宽度> <高度>160</高度> </图片> </图片> </媒体> </视图> |
There’s also a section 在 etc/view.xml
for configuring several 如pects 的 the 图片 gallery 上 the 产品 detail 页.
例:
Let’s set the gallery 缩图 to display 垂直ly 在 stead 的 水平的ly:
1 2 3 4 5 6 7 8 9 10 11 12 |
<?XML文件 版="1.0"?> <视图 XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance" si:noNamespaceSchemaLocation=“ ur:magento:框架:Config / etc / 视图.xsd”> <瓦斯 模组=“ Magento_Catalog”> <变种 名称=“画廊”> <变种 名称=“ navdir”>垂直</变种> <!- 滑行 方向 的 缩图 (水平的/垂直) -> <变种 名称=“全屏”> <变种 名称=“ navdir”>垂直</变种> <!-滑行 方向 的 缩图 在 全屏 (水平的/垂直) -> </变种> </变种> </瓦斯> </视图> |
在“ 开发文档”中的“配置主题的图像属性’。
The Magento 2 主题 was built using a system 的 LESS mixins (collectively the “UI Library”), which are located 在 : /lib/web/css/source/lib
. Each 的 the LESS files has extensible mixins that are 使用d to define the look 的 global elements 在 Magento Blank, using default 变种iables defined 在 : /lib/web/css/source/lib/variables
.
例:
.lib-button()
mixin 在 : /lib/web/css/source/lib/_buttons.less
..lib-button()
come from: /lib/web/css/source/lib/variables/_buttons.less
.在构建自定义主题时,可以调用(或在必要时重新定义)这些mixin,但是许多mixin具有足够的灵活性,因此可以(并且应该)通过重新定义默认变量来自定义许多全局样式。通过在较低级别上重新定义值(如按钮背景色),我们可以一次重新编译样式,然后立即看到更改反映在整个网站上。
The UI LIBrary has some built-in documentation 在 : /lib/web/css/source/docs
. It’s possible to access it 上 the frontend 的 your site with some changes to .htaccess
, but the simplest way is to visit 上e 的 many publicly hosted demos, such 如 这是Nexcess的作品. It’s worth reading through the 在 troduction 页 的 this documentation, 如 well 如 at least skimming through each 的 the 页s 链接ed 在 the “files” dropdown at the 最佳, to familiarize yourself with how the mixins are 使用d 和 what the default 变种iables are. This can also be helpful (when compared against the Magento Blank frontend) to better understand the approach that was 使用d to build the 主题, 和 to understand the 布局 的 the files 在 : /lib/web/css/source/lib
.
Magento 2 has a lot 的 LESS files scattered throughout the codebase by default, which can 在 itially be pretty confusing. This 如sortment is due to the modularity 的 the system 和 the usage 的 / 变种 /视图_preprocessed
for compilation. This allows 风格s to be separated 在 the system (by LIBrary, 主题, 和 模组) but merged 在 / 变种 /视图_preprocessed
during compilation, to enable the 使用 的 relative 进口 路径s. From there, the CSS is compiled 在 to /pub/static/frontend
to be served to the 使用r agent.
The flexible 进口 structure can be seen by observing a specific example 在 the Magento Blank 主题, 在 web/css/styles-m.less
:
@import 'source/lib/_responsive.less'
.web/css/source/lib/_responsive.less
, the relative 路径 this would seem to point to./lib/web/css/source/lib/_responsive.less
.How this works 在 行动 can be seen 在 / 变种 /视图_preprocessed
上ce static 如set deployment is performed.
/ 变种 /视图_preprocessed/css/frontend/Magento/blank/en_US/css/styles-m.less
包含相同的导入指令。/ 变种 /视图_preprocessed/css/frontend/Magento/blank/en_US/css/source/lib/_responsive.less
, which can be seen to be IDentical to the source file 在 /lib
.牢记此构造可以使理解库和模块之间的LESS文件结构更加容易。
在“ 开发文档”中的“CSS预处理’。
Besides the files 在 /lib
(mentioned 在 the “M2 UI库” section above), which you may find cause to reference 的ten during a 主题 build, some other key files to know how to 使用 are: _theme.less
, _module.less
, _extend.less
, 和 _styles.less
. Each 的 these will be 在 cluded by the system automatically (without a custom @import
directive), from 变种ious locations.
_theme.less
用于重新定义现有变量,以及定义适用于全局主题的新变量和/或混合。_module.less
旨在为特定扩展名定义原始样式。具有此名称的文件通常不会包含在主题中。_extend.less
用于主题中的多个位置,以修改或扩展特定扩展名的现有样式。_styles.less
主要是为导入保留的,可以从父主题前移以添加新的自定义LESS文件。我已保留了有关这些文件使用情况的大部分详细信息,因为我建议查看Classy Llama的文章“Magento 2中的CSS和更少内容' 想要查询更多的信息。
When Magento 2 is 在 产品ion mode, if 风格s are changed, they must be recompiled by running $ bin/magento setup:static-content:deploy
. This is a long process that goes through every static file for all 主题s. When the system is 在 default or developer mode, static files are automatically generated by the system 什么时候 需要, which is also a long process, 和 上ce 风格s have been generated, changes are not picked up automatically. Styles can be recompiled manually by re-deploying static 内容, but the most efficient method is to 使用 a task runner, especially 什么时候 doing active 主题 development. Magento 2 在 cludes built-in support for compiling LESS with 咕unt声. The process is outlined 在 开发文档 under ‘用Grunt编译LESS’,但以下几点需要记住:
咕unt声file.js.sample
和 package.json.sample
在 your site root.<theme>
value should be whatever you prefer to 使用 上 the command line 什么时候 running 咕unt声.registration.php
file for your 主题, 在 the string beginning with “frontend/”. (For example, 在 the registration.php
file for Magento Blank, the 2nd parameter passed to 寄存器()
is “frontend/Magento/blank”, so the “name” value 在 /dev/tools/grunt/configs/themes.js
is “Magento/blank”.)grunt exec:<theme>
, followed by grunt less:<theme>
.grunt less:<theme>
.grunt watch
和 grunt watch:<theme>
to detect changes to LESS files 和 automatically recompile 风格s.
Default 字形 families are declared 在 the Magento Blank 主题, 在 web/css/source/_typography.less
. We can define our own custom 字形s using the same structure by creating 和 在 cluding our own _typography.less
file 在 our 主题. The @font-path
passed to the .lib-font-face()
mixin simply has to match the 路径 to the 字形 files within our 主题. The file extensions will be added by the system 上 the frontend 如 需要. (It’s recommended that the five file extensions 使用d by Magento be 在 cluded to ensure that our 字形s will render 上 all browsers.)
例:
web/css/source/_typography.less
在 the Magento Blank 主题.@font-path: '@{baseDir}fonts/opensans/light/opensans-300'
./lib/web/fonts/opensans/light/opensans-300
(.eot, .svg, .ttf, .woff, 和 .woff2).web/css/source/custom/_typography.less
_styles.less
file:
1 2 |
@进口 '来源/自定义/_typography.less'; |
.lib-font-face()
mixin 在 our new file, with appropriate parameters:
1 2 3 4 5 6 7 |
.LIB-字形-面对( @家庭-名称: @字形-家庭-名称__base, @字形-路径: '@ {baseDir} 字形s / 我的Font', @字形-重量: 400, @字形-风格: 正常 ); |
_theme.less
:
1 2 |
@字形-家庭-名称__base: “我的字体”; |
web/fonts/MyFont
.注意: 如果您无权访问所有5种文件类型, Transfonter 是根据需要在TTF,SVG,EOT,WOFF和WOFF2之间转换的重要资源。
图示 在 Magento 2 are implemented using icon 字形s, which means they’re vector glyphs that are 100% scalable for all screen resolutions 和 zoom levels. Colors 和 尺寸 can easily be adjusted with CSS properties, just like standard text. Like other elements 的 the M2 UI LIBrary (discussed above 在 the “M2 UI库” section), icon 变种iables 和 mixins can be found 在 : /lib/web/css/source/lib
. The icon 字形s will need to be declared 和 loaded just like other 字形s 在 the system, 如 outlined 在 the previous “Fonts” section. For a basic 在 troduction to using icon 字形s 在 Magento 2, I suggest this 文章 by 优雅的骆马: ‘Magento 2:基础的图标字体’。
To add a basic favicon like what most browser tabs display, we can simply add Magento_Theme/web/favicon.ico
to our 主题 directory, 和 the Magento system will find it automatically. However, favicons these days have many proprietary implementations, so a tool like RealFaviconGenerator 对于获得许多不同系统的所有图标都非常有帮助。我将以他们的服务为例,说明如何在Magento 2中为多个Web客户端和平台实施自定义图标。
图片/favicons
web/images/favicons
(instead 的 using the 路径 given 在 step 2).Magento_Theme/layout/default_head_blocks.xml
在 your 主题 directory.页
> 头
.href
attribute to a src
attribute.颜色
attribute from the safari-pinned-tab.svg
链接 (since this is not valid XML 在 Magento). />
, to make XML valid for Magento.例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?XML文件 版="1.0"?> <页 XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance" si:noNamespaceSchemaLocation=“ urn:magento:framework:View / Layout / etc / 页_configuration.xsd”> <头> <链接 rel=“苹果触摸图标” 尺寸=“ 180x180” src=“ 图片 / favicons / apple-touch-icon.png” /> <链接 rel=“图标” 类型=“图像/ png” 尺寸=“ 32x32” src=“ 图片 / favicons / favicon-32x32.png” /> <链接 rel=“图标” 类型=“图像/ png” 尺寸=“ 16x16” src=“图像/收藏夹/favicon-16x16.png” /> <链接 rel=“表现” src=“ 图片 / favicons / manifest.json” /> <链接 rel=“遮罩图标” src=“图像/收藏夹/野生动物园固定tab.svg” /> <链接 rel=“快捷方式图标” src=“图像/收藏夹/favicon.ico” /> <元 名称=“ msapplication-config” 内容=“ 图片 / favicons / browserconfig.xml” /> <元 名称=“主题色” 内容=“ #ffffff” /> </头> </页> |
在“ 开发文档”中的“添加自定义图标’。
本部分仅是可重复使用的提示和待办事项的参考,在创建新主题时,我一直认为这些提示和待办事项很有帮助。您的方法可能会有所不同,并且随着Magento的更新,某些技巧可能会过时,因此,请充分考虑它的价值。
由于其许多应用程序层,代码测试和动态生成的文件,Magento 2具有很多与标准开发工作流程没有直接关系的领域。我个人发现在IDE中排除以下项目目录很有帮助,这样可以大大减少不相关的搜索结果和过多的索引编制:
/bin
, /dev
, /setup
, /update
/artifact
, /generated
, / 变种
/lib/web/css/docs
/pub/static
/vendor/magento/magento2-b2b-base
/vendor/magento/magento2-base
/vendor/magento/magento2-ee-base
/vendor/magento/theme-frontend-luma
注意: 在PhpStorm中,可以在“项目”工具窗口[⌘1]中完成此操作。只需右键单击要排除的目录,将鼠标悬停在“将目录标记为”上,然后选择“已排除”。
Magento 2中有多个默认样式问题,这些问题往往会意外出现,因此,我收集了一些默认情况下包含在主题中的修复程序,以及针对每个主题的建议文件位置(相对于您的主题目录)。
Styles for Magento_Theme/web/css/source/_extend.less
that fix overflow issues 和 dynamic 颜色/padding issues with the 主要 页 柱, 图片 gallery, 和 标头:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
& 什么时候 (@媒体-共同 = 真正) { // Firefox:防止内容在@screen__m下面溢出 .列 .柱.主要 { 最高-宽度: 100%; } } .媒体-宽度(@极值, @打破) 什么时候 (@极值 = '分钟') 和 (@打破 = @屏幕__m) { //使用语义装订线值进行标头填充,而不是通用值 .标头.内容 { 填充-剩下: @布局-在 dent__width; //代替@indent__base 填充-对: @布局-在 dent__width; //代替@indent__base } } |
Styles for Magento_Newsletter/web/css/source/_extend.less
that implement default button 边境 半径 for the 通讯 subscription button:
1 2 3 4 5 6 |
.媒体-宽度(@极值, @打破) 什么时候 (@极值 = '分钟') 和 (@打破 = @屏幕__m) { .块.通讯 .行动.订阅 { 边境-半径: @button__border-半径; } } |
Styles for Magento_Checkout/web/css/source/_extend.less
that fix alignment, button 风格 和 spacing issues for 小车, 大车 页, 和 查看:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
& 什么时候 (@媒体-共同 = 真正) { // Align quantity-box 在 小车 垂直ly with icons .小车-包装纸 .产品 .行动 { 保证金-最佳: -(13px + @输入-文字__高度 / 2); } //为购物车中的自定义按钮使用默认按钮样式;减少图标空格 .大车-容器 .形成-大车 .行动.继续 { 边境-半径: @button__border-半径; 填充: @button__padding; &:之前 { 保证金-剩下: -13px; } } .大车-容器 .形成-大车 .行动.更新 { 填充: @button__padding; &:之前 { 保证金-剩下: -11px; } } //将底边距恢复到结帐页面上的标题 .opc-进展-酒吧 { 保证金-最佳: @查看-进展-酒吧__margin; } } |
Styles for Magento_GiftMessage/web/css/source/_extend.less
that fix button 风格 和 whitespace issues for the custom 礼品 options button:
1 2 3 4 5 6 7 8 9 10 |
& 什么时候 (@媒体-共同 = 真正) { .礼品-项目-块 .标题 { 边境-半径: @button__border-半径; 填充: @button__padding; &:后 { 保证金-对: -11px; } } } |
[更新:自Magento 2.3.1起,由于以下原因,不再需要本节中概述的更改: PR#19467 被接受并合并。]
Magento Blank is full 的 places where @color-orange-red1
(or @color-orange-red2
) is explicitly set 如 a highlight 颜色 for active elements. If your 主题 颜色s don’t happen to 在 clude bright orange (which seems likely), but you’ve already done your due diligence during global styling to define things like @active__color
appropriately, you may be dismayed to be browsing around your nicely 主题d site 和 suddenly find that notorious bright orange 颜色 still lurking around. That has happened to me plenty 的 times during my first few 主题 builds, so I’ve collected this list 的 变种iables to redefine 对 at the beginning 的 global styling:
@checkout-progress-bar-item__active__background-color
@checkout-shipping-item__active__border-color
@navigation-level0-item__active__border-color
@submenu-item__active__border-color
@navigation-desktop-level0-item__active__border-color
@submenu-desktop-item__active__border-color
@account-nav-current-border-color
@collapsible-nav-current-border-color
@rating-icon__active__color
(In general, I’ve found that @active__color
is the most semantic value for most 的 these, but your usage may 变种y.)
特别是直接输出橙色的一个地方是产品详细信息页面上突出显示的图像缩略图。为了解决这个问题,您可能会发现以下代码片段对您有所帮助:
1 2 3 4 5 6 |
& 什么时候 (@媒体-共同 = 真正) { .佛特拉玛 .佛特拉玛__thumb-边境 { 边境-颜色: @活动颜色; } } |
Magento 2的主题过程中有很多活动内容。即使对于具有Magento 1经验的开发人员,也已经发生了很大的变化,以至于很难理解如何正确使用系统。我希望本指南能提供一些清晰和有用的做法,以帮助您在Magento上构建下一个主题。
2 评论
我从事Magento的工作已经有两年了,很久以前就开始创建模块,但是最近启动Magento 2时,我正在寻找有关在Magento 2中创建模块的帮助。您的帖子写得很好,这对我有所帮助完成任务,这是我获得帮助的另一篇文章, //www.cloudways.com/blog/create-module-in-magento-2/。希望这篇文章也能对您的读者有所帮助。
感谢您提供非常有用的文章。您可以发表有关如何为Magento 2构建电子邮件模板的类似文章吗?