如何自定义 Magento 2 主题？

Question

我是 Magento 2 和前端开发的新手我只知道如何使用 html 和 css，我想在 Magento 2 中自定义空白主题以了解其工作原理，我正在阅读 Magento 2 的文档，但我不知道该怎么做，我想自定义主题我应该更改什么？是 css 文件还是孔布局（xml）文件？

我尝试通过一些教程来添加 css 文件，但没有任何改变。

这是default_head_blocks.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>
   <css src="css/source/style.css" />
  </head>
</page>

这是 css 文件

.navigation {
    background: #40e936;
    font-weight: 700;
    height: inherit;
    left: auto;
    overflow: inherit;
    padding: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 3;
}

Answer 1

要将自定义 CSS 主题文件添加到 Magento 2，您需要：

在 pub/media/
转到管理 > 内容 > 配置 > [选择当前使用的主题] > HTML 标题 > 脚本和样式表
输入：<link rel="stylesheet" type="text/css" media="all" href="{{MEDIA_URL}}custom.css" />

但是，在 Magento 2 中不推荐使用上述方法。在 Magento 2 中，您应该通过 creating a child theme 设置样式，然后编辑 CSS 和从 parent 扩展的 LESS 文件主题。

Answer 2

Magento 2 现在可以处理 2 种类型的网站样式文件：CSS 文件和 LESS 文件，让您轻松管理复杂的 CSS 文件。如果您的自定义主题来自 Magento 默认主题 Luma 或 Black，您可以通过例如更改默认文件中的变量值来覆盖 LESS 文件。以下是一些简单的步骤：

新建一个继承Black主题的主题，我们可以称之为Orange主题。
添加重写的代码是 app/design/frontend/OrangeCo/orange/web/CSS/source/_theme.less

在橙色主题文件夹中，您可以更改按钮的颜色或任何您想要的更改。如果您在定制时遇到很多问题，您可以聘请开发人员。这里有一个link如果它可以帮助kodematix

如何自定义 Magento 2 主题？

How to customize Magento 2 theme?

css

xml

magento2