README

Magento 2 主题基础，适用于 DNAFactory。此主题使用了 Bootstrap 4。

开发人员注意事项

css

在扩展此主题时，首先将文件 css/source/_theme.less 复制到子主题中。
此文件包含所有使用的变量（注释中的变量可以直接取消注释使用），因此在进行自定义时，应始终将其作为首选。

始终以移动优先的思维方式进行思考，因此尽可能避免使用 ~~@media ... (max-width: ...)~~ 指令，而应采用 @media ... (min-width:...) 类型的方法。同样，避免使用段：~~@media ... (min-width: ...) and (max-width: ...)~~。

在编写 less 代码时，请确保代码始终包含在一个 less guard（以下称为“守卫”）中。
非常重要！：否则，代码将被处理并包含在所有生成的资产中。

一些示例

要包含在 style-m.css（不受断点影响）中的代码
```
&when(@media-common=true){
  ...il tuo css
}
```

包含在平板电脑及以上的断点中的代码

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  ...il tuo css
}

出于同样的原因，请尽量 不要直接在 css 中编写媒体查询。使用 Magento 2 的 mixin .media-width(@extremum, @break) 以避免断点之间的交集。
然而，如果您确实需要使用特定的媒体查询，请记住将其包含在守卫 &when(@media-common=true) 中。
所有断点都可以通过变量进行配置，如果需要（例如添加断点后），您可以在 css/source/lib/responsive.less 文件中为您的配置添加特定的守卫。
关于此，当在子主题上进行工作时并需要执行结构性的修改时，建议完全覆盖文件，以避免不必要的冗余和过多的 CSS 规则。
始终考虑您的选择，牢记以下事项

如果您有机会使用主题变量，请使用它们。否则...
您有使用（在模板或布局中）一个或多个现有类的能力吗？请使用它们（请始终参考 Bootstrap 文档并记住响应式实用工具）。否则...
您需要添加 CSS 规则吗？在特定的守卫中添加到相关文件 _extend.less。否则...
您需要删除或修改继承的文件中定义的规则吗？执行文件覆盖并指定您的更改。否则...
修改涉及 Bootstrap 的功能吗？从第 1 点开始重新开始，并参考 Bootstrap 的 scss 源代码（存在于依赖项 dnafactory/module-bootstrap 中）。

样式表

主题的样式（不包括打印和电子邮件）分为 4 个 CSS 文件

critical.css
style-m.css
styles-l.css
DNAFactory_Bootstrap/css/bootstrap.css（通过相关模块从 scss 源生成）

1. Critical

包含所有影响关键路径的样式：在首次访问页面时可见的所有内容。已添加特定于编译此文件的守卫，并且

类型 'critical'

&when (@media-type='critical'){
...il tuo css
}

在不同断点上的媒体查询。它们与 .media-width() 混合使用，与常规媒体查询一样工作，但需要在参数 @extremum='c-min' 上指定守卫。
```
.media-width(@extremum, @break) when (@extremum = 'c-min') and (@break = @screen__m) {
  ...il tuo css
}
```
从移动优先的角度来看，没有预定义的 c-max。

这些样式将直接添加到 html 文档中，因此请注意您要插入的内容。

2. styles-m.css

与原始版本（包含在magento/theme-frontend-blank中）没有变化。

3. styles-l.css

与原始版本（包含在magento/theme-frontend-blank中）没有变化。

4. Bootstrap.css

该主题基于 Bootstrap 4，因此请始终优先使用 Bootstrap 类而不是添加其他 CSS 代码。
仅在使用 mixin、函数或 scss 中定义的变量的情况下使用/扩展这些源代码。
与 less 中使用守卫的用法一样，良好的 @extend 指令和 mixin 的组合可以显著减少代码行数和生成资产的冗余。

修改/添加主题颜色

添加一个断点

与任何其他 less 变量一样，所有断点都与 Bootstrap 的 scss 源代码共享。此外，还有一个（实验性）系统允许将项目 less 中定义的断点与 JS 组件共享。我将使用 CSS->JS 来引用此功能。它分为两步

断点作为 CSS 变量插入到文档的 style 中
当需要时，组件 js/lib/dna-responsive 会返回所需断点的值，直接从文档中读取

现有的变量（从 @screen__xxs 到 @screen_xl）应该足以覆盖所有可能的必要性。然而，当需要时，可以按照以下指示添加自定义变量，以保留所有相关功能

在子主题的 _variables.less 文件内定义你的断点作为变量；
将 lib/_responsive.less 文件复制到子主题中，并修改/添加你需要的守卫；
为了生成 Bootstrap 类： 在子主题内创建（如果不存在）文件 DNAFactory_Bootstrap/web/css/source/scss/themes/_extends.scss 并按照官方文档中定义的方式扩展变量)；
仅针对 CSS->JS 功能： 将 _responsive-vars.less 文件复制到子主题中，并添加你的断点（请参阅内部文档以获取详细信息）；

建议避免（或至少限制）使用自定义断点，并且在 less 代码中始终使用特定守卫。

使用全宽布局

添加一个图标或一组图标

模板化

翻译/本地化

当您为此主题工作时，请始终使用英语作为基础语言：本地化必须能够通过引用一个单一的起始语言来完成，而 Magento 2 默认使用 en_US 代码。

JS

为了允许在 JS 中实现和执行 AMD 模块，实现了一个微型框架。

能够依赖于可扩展的模块（通过 mixin 或简单覆盖）对于与特定 DOM 元素无关的功能也非常有用，例如浏览器兼容性修复、基本输入功能的扩展等...

因此，创建了一个基本插件（在 js/lib/vanilla-plugin.js 中），它允许创建 JS 组件（以下简称 JSComponent），其依赖项以异步方式加载。

轮播示例标记

boxed

<div data-mage-init='{ "dnaCarousel": { "middleWrapperClass":"row", "innerWrapperClass":"w-100" } }' class="slider flex-row d-flex flex-nowrap overflow-hidden">
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-success py-5 px-4">Slide 1</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill bg-warning py-5 px-4">Slide 2</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-primary py-5 px-4">Slide 3</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-secondary py-5 px-4">Slide 4</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-success py-5 px-4">Slide 5</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill bg-warning py-5 px-4">Slide 6</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-primary py-5 px-4">Slide 7</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-secondary py-5 px-4">Slide 8</div>
  </div>
</div>

full width

<div data-mage-init='{ "dnaCarousel": { "middleWrapperClass":"full-width-container overflow-hidden", "innerWrapperClass":"mx-auto container-lg px-0" } }' class="slider flex-row d-flex flex-nowrap overflow-hidden">
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-success py-5 px-4">Slide 1</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill bg-warning py-5 px-4">Slide 2</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-primary py-5 px-4">Slide 3</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-secondary py-5 px-4">Slide 4</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-success py-5 px-4">Slide 5</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill bg-warning py-5 px-4">Slide 6</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-primary py-5 px-4">Slide 7</div>
  </div>
  <div class="slide col-3 d-inline-flex">
    <div class="flex-fill text-white bg-secondary py-5 px-4">Slide 8</div>
  </div>
</div>

dnafactory / theme-frontend-blank

维护者

详细信息