Magento 2的主题-从头开始


27

你们中的一些人可能阅读了有关Magento 1:从头开始的主题的主题-从头开始

我想知道,为Magento 2从零开始开发主题的最佳实践是什么?

  • 您使用本机luma还是blank主题进行构建?还是其他?
  • 您是否使用任何扩展名来帮助您开发主题?
  • 从头开始开发主题时应遵循哪些步骤?

我在回答中提供了一些链接,请仔细阅读它,您将了解Magento 2.0的前端架构和开发。
Asheem Patro

Answers:


45

TL:DR

您使用本地亮度还​​是空白主题进行构建?还是其他?

这取决于您,声明父主题是可选的。如果您不声明父母,您仍将回退到提供XML和模板文件但不提供样式的模块(例如Magento_Catalog)。

您是否使用任何扩展名来帮助您开发主题?

因为我更喜欢使用SCSS和GULP,所以现在使用FrontoolsSCSS空白主题。它消除了处理默认Grunt / LESS worflow的许多压力。

从头开始开发主题时应遵循哪些步骤?

  1. 声明主题
  2. 删除父主题CSS(如果需要)
  3. 添加自己的CSS / LESS / SCSS

我个人认为最好是从头开始创建自己的“空白主题”,因为您可以根据自己的需要进行调整。

这就是我从头开始创建主题的方式,我使用NewStore / default作为供应商和主题名称。

现在获取更详细的答案...

创建主题(根据官方文档)

根据官方文档创建主题

(可选)声明一个父对象

app/design/frontend/NewStore/default/theme.xml你宣布父主题与否的选择,在这个例子中我已经离开了3号线(<parent>Vendor/theme</parent>),所以没有父主题。这意味着所有模板/布局文件都将来自模块本身,而不是来自Blank或Luma,并且将没有主题样式,因为这是添加到空白主题中的。

我的theme.xml看起来像这样:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>NewStore default</title>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

删除样式(如果设置了父主题)并添加自己的CSS

如果确实将blank或Luma设置为父级,则需要阻止CSS文件加载。为此,创建app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xml并添加以下XML:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <!-- Remove blank/luma theme styling if you declared a parent -->
        <remove src="css/styles-m.css" />
        <remove src="css/styles-l.css" />
        <remove src="css/print.css" />

        <!-- Add your own CSS files -->
        <css src="css/styles.css" />
    </head>
</page>

这消除styles-m.cssstyles-l.cssprint.css通过空白主题添加。它还会添加styles.css作为您自己的CSS的基础。

如果您未指定父母,则可以删除<remove />上面代码中的3个标记。

添加自己的CSS

现在,您可以随意设置主题样式,因为我是Sass而不是LESS的粉丝,所以我添加了此文件- app/design/frontend/NewStore/default/web/css/styles.scss

我在这里更改了背景颜色只是为了证明这是可行的,理想情况下,您仅将这个文件用于导入其他Sass / Less文件。

结果

我刚刚完成的结果是一个没有样式的主题(除了我美丽的绿色背景),使您无需使用Magento的样式(有时很难使用)即可对主题进行样式设置。

在此处输入图片说明

提示

  • 如果你喜欢用SCSS工作,不必从头开始创建一个主题的时候,我建议使用FrontoolsSCSS空白主题都是由Snowdog应用程序

  • 我发现使用Magento的前端代码最令人沮丧的方面是其样式的具体程度,为避免这种情况,我建议在编写自己的样式时使用BEM命名约定

  • 同样有用的评论也很重要,如果一个曾经与Luma / Blank一起工作的开发人员致力于从头开始构建的主题,他们可能会发现事情的运作方式与他们期望的完全不同。


我已经按照您的指示创建了自己的空白主题,但没有在中定义父主题theme.xml。但是,前端仍然可以看到各种样式。Magento安装处于developer模式,并且所有缓存均已清除。我不知道所有这些样式都来自哪里-您有想法吗?
fritzmg

您是否安装了任何扩展程序/插件?如果已安装,也可以是Varnish,以排除在URL后添加问号和随机字符串的可能性,例如?=123
Ben Crook

是的,我已经排除了Varnish(或类似产品)。没有安装扩展程序或插件。
fritzmg

是完整主题样式还是仅部分样式?对于我来说,不看站点和代码库就很难说。也许问一个新问题并在此发布一些详细信息?如果您标记了我,我会看看是否可以解决。
本·克鲁克

据我所知,这是完整的主题。加上我自己主题中包含的CSS文件。是的,为此最好创建一个新问题:)
fritzmg

8

在Magento 2.0中,有很多教程可以启动主题。我提供一些视频链接和一些常规链接,您可以在其中获得有关magento 2.0中主题开发的良好知识。 点击这里观看视频

从这个链接也参考

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

通过此链接,您将学习有关magento 2.0的前端体系结构

http://inchoo.net/magento-2/frontend-theme-architecture/

还要检查这两个链接

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1



3

开始开发主题的最佳方法是从luma或继承blank。这样做的原因是因为它们具有响应能力(即多分辨率友好)。它还减少了创建不同的模板文件和JS / CSS定义时要做的工作量。您所要做的就是仅覆盖您要用自己定制的部分。有关如何开发主题的不同说明,请参见下面的链接。

Magento文档链接:


模板文件现在来自模块,而不是空白/ luma,因此,如果不需要样式/更改,则可以有效地绕过它们。例如,如果您查看app / design / frontend / Magento / blank / Magento_Catalog,它所做的只是移动一个元素并添加一些样式,则模板来自app / code / Magento / Catalog / view / frontend / templates和app / code / Magento / Catalog / view / base / templates
Ben Crook
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.