你们中的一些人可能阅读了有关Magento 1:从头开始的主题的主题-从头开始
我想知道,为Magento 2从零开始开发主题的最佳实践是什么?
- 您使用本机
luma
还是blank
主题进行构建?还是其他? - 您是否使用任何扩展名来帮助您开发主题?
- 从头开始开发主题时应遵循哪些步骤?
你们中的一些人可能阅读了有关Magento 1:从头开始的主题的主题-从头开始
我想知道,为Magento 2从零开始开发主题的最佳实践是什么?
luma
还是blank
主题进行构建?还是其他?Answers:
您使用本地亮度还是空白主题进行构建?还是其他?
这取决于您,声明父主题是可选的。如果您不声明父母,您仍将回退到提供XML和模板文件但不提供样式的模块(例如Magento_Catalog)。
您是否使用任何扩展名来帮助您开发主题?
因为我更喜欢使用SCSS和GULP,所以现在使用Frontools和SCSS空白主题。它消除了处理默认Grunt / LESS worflow的许多压力。
从头开始开发主题时应遵循哪些步骤?
我个人认为最好是从头开始创建自己的“空白主题”,因为您可以根据自己的需要进行调整。
这就是我从头开始创建主题的方式,我使用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>
如果确实将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.css
,styles-l.css
并print.css
通过空白主题添加。它还会添加styles.css作为您自己的CSS的基础。
如果您未指定父母,则可以删除<remove />
上面代码中的3个标记。
现在,您可以随意设置主题样式,因为我是Sass而不是LESS的粉丝,所以我添加了此文件- app/design/frontend/NewStore/default/web/css/styles.scss
我在这里更改了背景颜色只是为了证明这是可行的,理想情况下,您仅将这个文件用于导入其他Sass / Less文件。
我刚刚完成的结果是一个没有样式的主题(除了我美丽的绿色背景),使您无需使用Magento的样式(有时很难使用)即可对主题进行样式设置。
如果你喜欢用SCSS工作,不必从头开始创建一个主题的时候,我建议使用Frontools和SCSS空白主题都是由Snowdog应用程序。
我发现使用Magento的前端代码最令人沮丧的方面是其样式的具体程度,为避免这种情况,我建议在编写自己的样式时使用BEM命名约定。
同样有用的评论也很重要,如果一个曾经与Luma / Blank一起工作的开发人员致力于从头开始构建的主题,他们可能会发现事情的运作方式与他们期望的完全不同。
theme.xml
。但是,前端仍然可以看到各种样式。Magento安装处于developer
模式,并且所有缓存均已清除。我不知道所有这些样式都来自哪里-您有想法吗?
?=123
在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
我从空白处继承,但是正迅速尝试创建一个具有更简单CSS结构的轻量级基本主题。
值得注意的是,Magento在2015年问世,并表示他们不建议从luma继承,因为他们保留出于自己的营销和演示目的而对其进行暗中更改的权利。后来,他们说允许继承是他们的目标,从而修改了该声明。
开始开发主题的最佳方法是从luma
或继承blank
。这样做的原因是因为它们具有响应能力(即多分辨率友好)。它还减少了创建不同的模板文件和JS / CSS定义时要做的工作量。您所要做的就是仅覆盖您要用自己定制的部分。有关如何开发主题的不同说明,请参见下面的链接。
Magento文档链接: