如何在Magento 2中构建主题

为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 将主题注册为指定位置的系统组件（与模块一样）。

例：

 

主题.xml 定义基本的主题配置，至少包括标题和通常要扩展的父主题。

例：

 

在“ 开发文档”中的“创建一个新的店面主题’。

注意： 建议您将所有自定义主题扩展为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.

例：

产品图片

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.

例：

让我们在类别页面的网格视图和列表视图中为图像设置不同的宽度和高度：

 

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:

 

在“ 开发文档”中的“配置主题的图像属性’。

UI库

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.

例：

• Default button 风格s come from the .lib-button() mixin 在 : /lib/web/css/source/lib/_buttons.less.
• The 变种iables 使用d to set the default values for .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.

样式（CSS和LESS）

样式预处理（LESS）

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:

• Line 31 shows this 进口 directive: @import 'source/lib/_responsive.less'.
• No file exists 在 the 主题 at web/css/source/lib/_responsive.less, the relative 路径 this would seem to point to.
• 这个文件在哪里 确实 exist is 在 /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 包含相同的导入指令。
• The relative 路径 的 the 进口 now correctly refers to / 变种 /视图_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预处理’。

LESS文件的使用

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和更少内容' 想要查询更多的信息。

咕unt声

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’，但以下几点需要记住：

• Before running the npm 在 staller, remove the ‘.sample’ suffix from 咕unt声file.js.sample 和 package.json.sample 在 your site root.
• 在上面链接的文档中的“安装和配置Grunt”下，需要注意几件事。
  • The <theme> value should be whatever you prefer to 使用 上 the command line 什么时候 running 咕unt声.
  • The “name” value must match the 寄存器ed 主题 名称 如 it appears 在 the 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”.)
• Any time that LESS files are added or deleted, run grunt exec:<theme>, followed by grunt less:<theme>.
• If changes were made 上ly to existing LESS files, you should 上ly have to run grunt less:<theme>.
• You can 使用 grunt watch 和 grunt watch:<theme> to detect changes to LESS files 和 automatically recompile 风格s.
  • 如果你有 LiveReload 安装后，这是避免刷新浏览器的便捷方法。

字体/版式

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.)

例：

• Let’s look at: web/css/source/_typography.less 在 the Magento Blank 主题.
• On line 13, we see this: @font-path: '@{baseDir}fonts/opensans/light/opensans-300'.
• This declaration corresponds to the 5 files at: /lib/web/fonts/opensans/light/opensans-300 (.eot, .svg, .ttf, .woff, 和 .woff2).
• 以类似的方式，将“ 我的Font”定义为我们网站的默认设置，但又不干扰我们可能希望在其他地方使用的核心字体声明，我们可以执行以下操作：
  1. 在我们的主题目录中创建以下文件： web/css/source/custom/_typography.less
  2. Add the following line to our _styles.less file:
     
     @import'source / custom / _typography.less';

     1 2	@进口 '来源/自定义/_typography.less';

  3. Call the .lib-font-face（) mixin 在 our new file, with appropriate parameters:
     
     .lib-font-face（ @ 家庭-name：@ 字形-family-name__base， @ 字形-path：“ @ {baseDir} 字形s / 我的Font”， @ 字形-weight：400， @ 字形-style：正常 );

     1 2 3 4 5 6 7

     .LIB-字形-面对(     @家庭-名称: @字形-家庭-名称__base,     @字形-路径: '@ {baseDir} 字形s / 我的Font',     @字形-重量: 400,     @字形-风格: 正常 );

  4. Redefine the 名称 的 the base 字形 家庭 在 _theme.less:
     
     @ 字形-family-name__base：'我的字体';

     1 2	@字形-家庭-名称__base: “我的字体”;

  5. Add the 字形 files 在 the 5 recommended file 类型s 在 our 主题 directory at: 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客户端和平台实施自定义图标。

1. 去 realfavicongenerator.net.
2. 点击“选择您的收藏夹图片”，然后为您的主要收藏夹上传图片（最好是SVG矢量图片）。
3. 在下一页上，浏览每个选项以配置和预览图标在各种平台上的显示方式。
   1. 请注意，在每种情况下，都有一个“专用图片”选项，如果您不喜欢主要图片的外观，则可以上传单独的图片。
4. 在底部的“网站图标生成器选项”下，选择“我不能或我不想将网站图标放置在我的网站的根目录...”的选项。
   1. 在文本输入中输入以下路径： 图片/favicons
5. 点击“生成您的网站图标和HTML代码”。
6. 在下一页上，按照步骤1的说明下载软件包。
7. Extract the package 在 your 主题 directory at: web/images/favicons (instead 的 using the 路径 given 在 step 2).
8. 要将提供的代码插入每页的开头部分：
   1. Create Magento_Theme/layout/default_head_blocks.xml 在 your 主题 directory.
   2. Put the given code 在 side 页 > 头.
   3. Change each href attribute to a src attribute.
   4. Remove the 颜色 attribute from the safari-pinned-tab.svg 链接 (since this is not valid XML 在 Magento).
   5. Convert closing tags to />, to make XML valid for Magento.

例：

 

在“ 开发文档”中的“添加自定义图标’。

其他有用的提示

本部分仅是可重复使用的提示和待办事项的参考，在创建新主题时，我一直认为这些提示和待办事项很有帮助。您的方法可能会有所不同，并且随着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, 和 标头:

 

Styles for Magento_Newsletter/web/css/source/_extend.less that implement default button 边境 半径 for the 通讯 subscription button:

 

Styles for Magento_Checkout/web/css/source/_extend.less that fix alignment, button 风格 和 spacing issues for 小车, 大车 页, 和 查看:

 

Styles for Magento_GiftMessage/web/css/source/_extend.less that fix button 风格 和 whitespace issues for the custom 礼品 options button:

更改为默认的辅助颜色

[更新：自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.)

特别是直接输出橙色的一个地方是产品详细信息页面上突出显示的图像缩略图。为了解决这个问题，您可能会发现以下代码片段对您有所帮助：

结论

Magento 2的主题过程中有很多活动内容。即使对于具有Magento 1经验的开发人员，也已经发生了很大的变化，以至于很难理解如何正确使用系统。我希望本指南能提供一些清晰和有用的做法，以帮助您在Magento上构建下一个主题。