README

[目录]

有用的文档

指南

遵循 Drupal 指南：https://www.drupal.org/docs/develop/theming-drupal
使用组件 (SDC) 以便所有可重用模板片段
由于 Bootstrap 是框架，因此当涉及到 CSS 类命名约定时，我们必须处理两种不同的约定。Drupal 倾向于 BEM (https://getbem.com/naming)，而 Bootstrap 使用某种类型的 OOCSS。我们利用这一点，并使用 BEM 为我们的自定义页面结构和组件，以便更好地区分它们。如果您认为可以在 Bootstrap 类旁边使用 BEM 类，那么请这样做。例如：‘page__navar navbar’ 是可以接受的。

扩展 Bootstrap

组件

按钮

btn-width-full: 将按钮扩展到 100% 宽度（类似于旧的 btn-block 类）

助手

Body 类

current-breakpoint-is-x: 当前活动断点由 JS 确定。
current-breakpoint-is-smaller-x: 如果当前断点小于断点 x。
current-breakpoint-is-larger-x: 如果当前断点大于断点 x。
current-vw-is-smaller-container-max: 如果当前视口宽度小于 BS .container（最大页面宽度），则设置。

实用工具

文本

text-muted: 自 BS 5.3 起已弃用，并由无意义的类替换。因此我们重新发明了它。

JavaScript

防抖 / 节流

Drupal.drowl_base.functions.debounce(function,delay);

// Example usage:
new ResizeObserver(Drupal.drowl_base.functions.debounce(function(){
  // Do stuff!
}, 600));

获取当前断点

// Returns: Breakpoint Name (string), example: "lg"
Drupal.drowl_base.functions.getCurrentBreakpoint();

获取滚动条宽度

// Returns: Pixel value (decimal), example: 15
Drupal.drowl_base.functions.getScrollbarWidth();

事件

监听视口大小变化

document.addEventListener(
  "drowl_base:resize",
  (e) => {
    /* … */
  },
  false,
);

SDC 单目录组件

组件使用

基本上，您有两种方法可以添加组件

包含

包含一个组件，并传递一些参数，但不要更改其内容。

{% include 'drowl_base:block' with {
  html_tag: 'section',
  block_utility_classes: [
    'my-3',
    'block--local-tasks',
  ],
}%}

嵌入

包含一个组件，并使用块覆盖来更改其内容。

{% embed 'drowl_base:metaheader' with {
  color: 'light',
  navbar_utility_classes: ['bg-light'],
} %}
  {% block left %}
    Replacement
  {% endblock %}

  {% block right %}
    Replacement
  {% endblock %}
{% endembed %}

创建新组件

首选使用 drush generate: drush generate theme:sdc:component

或查看：https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/creating-a-single-directory-component

覆盖现有组件

只有主题可以覆盖组件（模块不能覆盖）。要使主题覆盖组件，请使用 mytheme.component.yml 文件中的 replaces 键。

查看 SDC 文档以获取详细信息

覆盖 DROWL 基础样式表

所有样式表都使用 CSS 变量编写（尽可能）。因此，在大多数情况下，您可能只需修改您的 SASS 变量（因此您的 drowl_child.variables.css 文件已更新）。

如果您需要修改或删除 DROWL 基础样式，可以简单地删除或覆盖相应的 Drupal 库。

库

Slick

DROWL 基础有其自己的 Slick Carousel 主题，使用 CSS 变量进行各种调整。

配置变量

  --grid-gutter: var(--bs-grid-gutter);
  --direction-nav-top: calc(50% - (var(--dot-nav-reserved-outer-space) * 0.5));
  --direction-nav-item-width: var(--icon-size-lg);
  --direction-nav-item-height: var(--icon-size-lg);
  --direction-nav-icon-size: var(--icon-size-md);
  --direction-nav-item-bg: var(--bs-light-glass);
  --direction-nav-item-color: var(--bs-dark-glass);
  --direction-nav-item-bg-hover: var(--bs-light);
  --direction-nav-item-color-hover: var(--bs-dark);
  --dot-nav-item-width: var(--icon-size-xs);
  --dot-nav-item-height: var(--icon-size-xs);
  --dot-nav-item-radius: 50%;
  --dot-nav-grid-gutter: .35rem;
  --dot-nav-item-color: var(--bs-light-glass);
  --dot-nav-item-color-hover: var(--bs-primary);
  --dot-nav-item-color-active: var(--bs-white);
  // Dot nav alignment, available options: start, center, end.
  --dot-nav-alignment: center;

查看 libraries/slick.scss 以获取更多详细信息。

外部控制

要在外部显示方向 + 点导航，请在任何包装器上使用类 slick-controls-outside，或直接在 .slick 包装器上使用 slick--controlsoutside（首选）。

如果 slick__nav 大于视口宽度，则它将切换到由 CSS 变量 --direction-nav-outside-fallback-behavoir 定义的样式（可能是 'overlay'、'inset' 或 'hide'）。

内嵌控制

要在内容之外显示方向 + 点导航，同时不将方向导航移出容器，请在任何包装器上使用类 slick-controls-inset，或在 .slick 包装器上直接使用 slick--controlsInset（推荐）。

有关详细信息，请参阅 libraries/slick.scss。

允许溢出

对于需要可见溢出的幻灯片（例如，因为您在内部有带有 box-shadow 的元素），您可以在任何包装器上设置 slick-allow-overflow。在部分包装器上设置 slick-allow-overflow-parent 非常重要，以防止水平溢出。否则，文档将变为可水平滚动的。

webksde / drowl_base

维护者

详细信息