如何在Magento 2中建立主题2
如何在Magento 2中建立主题2

如何在Magento 2中建立主题2

2018年3月6日发布 in 发展
社交媒体是否会影响我的SEO?
2018年2月22日
如何在Magento 2中创建付款方式
2018年3月27日

在为Magento构建自定义主题时,重要的是要遵循系统如何扩展系统的最佳实践。 Magento 2的前端显着不同于Magento 1,所以即使是经验丰富的Magento开发人员,也有很多值得注意的事情。
本文不是前端自定义的详尽逐步指南。它主要是为了概述系统如何构建的基础知识以及如何最好地扩展它,以及作为各种主题的参考。一般来说,玛托托的官员 devdocs. 是特定任务的良好资源。

我会首先推荐全球第一件事到主题建设。通过实现徽标,排版和主题颜色等关键品牌元素,我们将坚持关键路径并创建可以构建其余主题的基础。例如,当我们打造我们的产品清单页面时,我们不必担心加载卡上购物车按钮的样子,因为它们应该已经匹配了站点上的其余按钮,这应该是所有风格的在全球范围内。
我们将概述下面的几个主题建筑领域(如徽标,排版,图标和全球样式),可以用于快速获取视图明显品牌的网站。

创造一个新的主题

For a new theme, we’ll need to create registration.php and 主题.xml 在 our theme directory, and then run $ bin/magento setup:upgrade.

registration.php 将主题注册为指定位置的系统组件(与模块一样)。

例子:

 

主题.xml 定义基本主题配置,包括至少标题,通常是正在扩展的父主题。

例子:

 

在DevDocs下看更多'创建一个新的店面主题'。

笔记: 建议所有自定义主题扩展Magento / Blank而不是Magento / Luma,因为Luma主题只旨在成为一个例子。

徽标是主题的重要组成部分,因为它是首先迎接用户的网站的主要身份。我们强烈建议使用SVG矢量图像,因为它将扩展到任何屏幕分辨率或缩放级别。

玛托托 2 uses an SVG logo by default, and it will find yours automatically if you put it in your theme directory at: web/images/logo.svg.

You may also need to specify the dimensions in: 玛托托_Theme/layout/default.xml.

例子:

产品图片

Images for catalog products can be sized and re-sized in Magento without having to change any styles. Default configuration is found in the Magento Blank theme, in etc/view.xml. Configuration can be customized by redefining values in etc/view.xml 在 our theme directory.

例子:

让我们在“类别”页面上的“网格视图”和“列表视图”中设置不同的宽度和高度:

 

There’s also a section in etc/view.xml for configuring several aspects of the image gallery on the product detail page.

例子:

让我们设置画廊缩略图以垂直显示而不是水平显示:

 

在DevDocs下看更多'为主题配置图像属性'。

UI库

The Magento 2 theme was built using a system of LESS mixins (collectively the “UI Library”), which are located in: /lib/web/css/source/lib. Each of the LESS files has extensible mixins that are used to define the look of global elements in Magento Blank, using default variables defined in: /lib/web/css/source/lib/variables.

例子:

  • Default button styles come from the .lib-button() mixin in: /lib/web/css/source/lib/_buttons.less.
  • The variables used to set the default values for .lib-button() come from: /lib/web/css/source/lib/variables/_buttons.less.

在构建自定义主题时,可以调用这些混音(如果需要重新定义),但许多Mixins足够灵活,即只需重新定义默认变量即可通过重新定义许多全局样式(并且应该)来定制。通过在低级重定义(如按钮背景颜色),我们可以一次重新编译样式并立即看到整个站点中反映的更改。

The UI library has some built-in documentation in /lib/web/css/source/docs. This can be viewed as web content by simply moving the entire /lib/web/css/source/docs directory into /pub/static. Then just visit “<your_magento_base_url.>/static/docs/index.html.”在Web客户端。值得阅读本文档的介绍页面,以及至少通过链接的每个页面撇去‘files’ dropdown at the top, to familiarize yourself with how the mixins are used and what the default variables are. This can also be helpful to better understand the approach that was used to build the Magento Blank theme, and to understand the file structure in /lib/web/css/source/lib.

造型(CSS和更少)

风格预处理(少)

玛托托 2 has a lot of LESS files scattered throughout the codebase by default, which can initially be pretty confusing. This assortment is due to the modularity of the system and the usage of / var./view_preprocessed for compilation. This allows styles to be separated in the system (by library, theme, and module) but merged in / var./view_preprocessed during compilation, to enable the use of relative import paths. From there, the CSS is compiled into /pub/static/frontend to be served to the user agent.

The flexible import structure can be seen by observing a specific example in the Magento Blank theme, in web/css/styles-m.less:

  • Line 31 shows this import directive: @import 'source/lib/_responsive.less'.
  • No file exists in the theme at web/css/source/lib/_responsive.less, the relative path this would seem to point to.
  • 这个文件在哪里 exist is in /lib/web/css/source/lib/_responsive.less.

How this works in action can be seen in / var./view_preprocessed once static asset deployment is performed.

  • / var./view_preprocessed/css/frontend/Magento/blank/en_US/css/styles-m.less 包含相同的导入指令。
  • The relative path of the import now correctly refers to / var./view_preprocessed/css/frontend/Magento/blank/en_US/css/source/lib/_responsive.less, which can be seen to be identical to the source file in /lib.

保持此构建体可以更轻松地了解库和模块之间的文件结构较少。

在DevDocs下看更多'CSS预处理'。

使用更少的文件

Besides the files in /lib (mentioned in the “M2 UI Library” section above), which you may find cause to reference often during a theme build, some other key files to know how to use are: _theme.less, _module.less, _extend.less, and _styles.less. Each of these will be included by the system automatically (without a custom @import directive), from various locations.

  • _theme.less 用于重新定义现有变量,以及定义全球适用于您主题的新变量和/或混音。
  • _module.less 旨在为特定扩展定义原始样式。具有此名称的文件通常不会包含在主题中。
  • _extend.less 用于主题内的多个位置以修改或扩展特定扩展的现有样式。
  • _styles.less 主要保留用于导入,可以从父主题向前拉,以添加新的自定义更少的文件。

我已经保留了大部分详细信息,了解这些文件的使用,正如我建议签署Classy Llama的文章“在Magento 2看CSS和更少' 了解更多信息。

咕噜声

When Magento 2 is in production mode, if styles 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 themes. When the system is in default or developer mode, static files are automatically generated by the system when needed, which is also a long process, and once styles have been generated, changes are not picked up automatically. Styles can be recompiled manually by re-deploying static content, but the most efficient method is to use a task runner, especially when doing active theme development. Magento 2 includes built-in support for compiling LESS with Grunt. The process is outlined in DevDocs under ‘用咕噜咕噜地编译“但是这里有一些有助于记住的东西:

  • Before running the npm installer, remove the ‘.sample’ suffix from 咕噜声file.js.sample and package.json.sample 在 your site root.
  • 在上面的链接DOC中的“安装和配置和配置Grunt”下有几件事要注意。
    • The <theme> value should be whatever you prefer to use on the command line when running Grunt.
    • The “name” value must match the registered theme name as it appears in the registration.php file for your theme, in the string beginning with “frontend/”. (For example, in the registration.php file for Magento Blank, the 2nd parameter passed to 登记() is “frontend/Magento/blank”, so the “name” value in /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 only to existing LESS files, you should only have to run grunt less:<theme>.
  • You can use grunt watch and grunt watch:<theme> to detect changes to LESS files and automatically recompile styles.
    • 如果你有 生命线 安装了,这可以是一种便捷的方法来避免刷新浏览器。

字体/排版

Default font families are declared in the Magento Blank theme, in web/css/source/_typography.less. We can define our own custom fonts using the same structure by creating and including our own _typography.less file in our theme. The @font-path passed to the .lib-font-face() mixin simply has to match the path to the font files within our theme. The file extensions will be added by the system on the frontend as needed. (It’s recommended that the five file extensions used by Magento be included to ensure that our fonts will render on all browsers.)

例子:

  • Let’s look at: web/css/source/_typography.less 在 the Magento Blank theme.
  • 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, and .woff2).
  • 以类似的方式,将“myfont”定义为我们网站的默认值,但是在不打扰我们可能想要在其他地方使用的核心字体声明,我们可以执行以下操作:
    1. 在我们的主题目录中创建以下文件: web/css/source/custom/_typography.less
    2. Add the following line to our _styles.less file:
    3. Call the .lib-font-face() mixin in our new file, with appropriate parameters:
    4. Redefine the name of the base font family in _theme.less:
    5. Add the font files in the 5 recommended file types in our theme directory at: web/fonts/MyFont.

笔记: 如果您无法访问所有5种文件类型, rancefonter. 是根据需要转换TTF,SVG,EOT,WOFF和WOFF2之间的伟大资源。

图标

图标 in Magento 2 are implemented using icon fonts, which means they’re vector glyphs that are 100% scalable for all screen resolutions and zoom levels. Colors and sizes can easily be adjusted with CSS properties, just like standard text. Like other elements of the M2 UI library (discussed above in the “M2 UI Library” section), icon variables and mixins can be found in: /lib/web/css/source/lib. The icon fonts will need to be declared and loaded just like other fonts in the system, as outlined in the previous “Fonts” section. For a basic introduction to using icon fonts in Magento 2, I suggest this article by Classy Llama: ‘玛托托的图标字体2:基础'。

Favicons.

To add a basic favicon like what most browser tabs display, we can simply add 玛托托_Theme/web/favicon.ico to our theme directory, and the Magento system will find it automatically. However, favicons these days have many proprietary implementations, so a tool like RealFavicongenerator 对于许多不同的系统来获得所有Favicon是非常有帮助的。我将使用他们的服务作为如何为多个Web客户端和平台实现Magento 2中的自定义Favicons的示例:

  1. realfavicongenerator.net..
  2. 单击“选择Favicon图片”并为主Favicon上传图像(最好是SVG矢量图像)。
  3. 在下一页上,通过每个选项来配置和预览您的图标将如何出现在各种平台上。
    1. 请注意,在每种情况下,如果您不喜欢主要的一个外观,有一个“专用图片”选项,可以上传单独的图像。
  4. 在底部的“Favicon Generator选项”下,选择“我不能或我不想在我的网站根目录下放置Favicon文件的选项......”
    1. 在文本输入中输入以下路径: 图片/favicons
  5. 单击“生成您的Favicons和HTML代码”。
  6. 在下一页上,按照步骤1中的指示下载包。
  7. Extract the package in your theme directory at: web/images/favicons (instead of using the path given in step 2).
  8. 要在每个页面的头部部分插入提供的代码:
    1. Create 玛托托_Theme/layout/default_head_blocks.xml 在 your theme directory.
    2. Put the given code inside > .
    3. Change each href attribute to a SRC. attribute.
    4. Remove the color attribute from the safari-pinned-tab.svg 关联 (since this is not valid XML in Magento).
    5. Convert closing tags to />, to make XML valid for Magento.

例子:

 

在DevDocs下看更多'添加自定义Favicons.'。

其他有用的提示

本节包含一些提示和DOS,即在创建新主题时,我一直发现有用。 (您的方法可能会有所不同,并且随着Magento获得更新,某些提示可能会变得过时,因此请将其用于它的价值。)

排除目录

由于其许多应用层,代码测试和动态生成的文件,Magento 2具有很多与标准开发工作流程无直接相关的区域。我个人发现它有助于排除我的IDE中的以下项目目录,大大减少无关的搜索结果和超额索引:

  • /bin, /dev, /setup, /update
  • /artifact, /generated, / var.
  • /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

笔记: 在PHPSTOM中,这可以在“项目”工具窗口[⌘1]中完成。刚右键单击要排除的目录,将鼠标悬停在“标记目录中,然后选择”排除“。
(或者,去偏好> Directories > Exclude files, and enter the following pattern: artifacts;bin;dev;generated;setup;update;var;docs;static;magento2-base;magento2-ee-base;magento2-b2b-base;theme-frontend-luma;Test)

更改默认的次要颜色

[注意:由于Magento 2.3.1,由于Magento Pull请求,不再需要此部分的更改 #19467 被接受并合并。]

Prior to version 2.3.1, Magento Blank was full of places where @color-orange-red1 (or @color-orange-red2) was explicitly set as a highlight color for active elements. If your theme colors don’t happen to include 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 themed site and suddenly find that notorious bright orange color still lurking around. That happened to me plenty of times during my first few theme builds, so I collected this list of variables to redefine from the start:

  • @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 of these, but your usage may vary.)

结论

玛托托的主题过程中有很多动作的部分。即使对于用Magento 1经历的开发人员,也足够改变,可以难以理解如何正确使用系统。我希望本指南提供一些清晰度和有用的做法,以帮助您在Magento上的下一个主题。

2 Comments

  1. Alex Morco. 说:

    我一直在过去2年中使用Magento,并开始创造模块,但最近在Magento 2被推出时,我正在寻找在Magento 2的模块中创建模块,您的帖子是以良好的方式编写的,帮助我完成任务,这是我得到帮助的另一个帖子, //www.cloudways.com/blog/create-module-in-magento-2/。希望这篇文章也将帮助您的读者。

  2. Jozef. 说:

    谢谢你非常有用的文章。您能发布类似文章有关如何为Magento 2构建电子邮件模板吗?

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

本网站使用AkisMet减少垃圾邮件。 了解如何处理评论数据.

最近的帖子查看全部
3月1日,2021年

Covid的巨大加速要求再次欺诈和消费者虐待警惕

2月3日,2021年

社交媒体在科迪德自然时期的增长’s One

1月5日,2021年

替代社交媒体

您是否注意到您的Facebook和Instagram内容似乎越来越少,并且每次通过都会越来越少?用于达到的帖子 […]