实用类.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

每个元素都有 HTML classes 字段，附带命名类列表。Bootstrap 5 实用类和投影自带。主题可通过 .info.yml 添加自己的分组，模块可通过 alter 钩子添加。本页介绍列表包含的内容和如何注册自己的类，让编辑人员按名称选用品牌外观，而不用手输类名。

应用类

  1. 打开元素的设置并找到 HTML classes（General 面板底部）。
  2. 点击输入框，从列表中挑选类。在框中输入可筛选列表。
  3. 要输入不在列表中的类，请点击 Edit as text 并输入。
  4. 点击对话框中的 Save，再点击构建器工具栏上的 Save。

类进入已保存 HTML 中元素的 class 属性。HTML ID 和类带编辑人员走一遍常见用法。

列表包含的内容

编辑器启动时构建列表，按以下顺序合并三个来源：

  1. 内置列表。它有 Drop shadows 分组、精简的 Bootstrap classes 分组和 Bootstrap 5 实用类，按用途分组：Display & Visibility、Responsive Visibility、Margins、Padding、Text Colors 等。
  2. 每个 .info.yml 中有 dxpr_builder_classes 键的已安装主题各占一个分组。分组以主题名命名。
  3. 模块的更改，请参阅 从模块注册类。

Text 元素 General 面板中打开的 HTML classes 列表，滚动到名为 DXPR Theme 的分组，条目如 Inline Form 和 Background color: DXPR Theme accent1

因此每个网站都有间距类（如 mt-3 和 px-4）、显示类（如 d-none）和文本类（如 text-center 和 fw-bold）。这些无需您设置。

在主题中注册类

将 dxpr_builder_classes 映射添加到主题的 .info.yml 中。每个键是一个类名，或用空格分隔的多个类名；每个值是编辑人员看到的标签。DXPR Theme 就是这样注册它的类的：

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

  1. 向 themes/custom/mytheme/mytheme.info.yml 添加映射：

    dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

  2. 在主题每个页面都加载的库中为这些类写 CSS；请参阅 自定义 CSS。

  3. 用 drush cr 清除缓存，让 Drupal 重新读取 info 文件。

  4. 打开元素的设置，检查 HTML classes 是否显示带主题名的分组和两个条目。

每个带该键的已安装主题都会添加自己的分组，不仅是默认主题。分组始终沿用主题名；info 文件改不了它。

从模块注册类

自定义模块可以用 alter 钩子添加类，或移除主题注册的类。它移除不了内置的 Bootstrap 条目，因为编辑器在浏览器中添加它们。代码见 Hooks API 参考。

Bootstrap 版本

内置列表是 Bootstrap 5。如果主题不加载 Bootstrap 5，请将 Sideload Bootstrap files 设为 Bootstrap 5（Bootstrap 下，DXPR Studio > DXPR Builder > General Settings），让类背后有 CSS。加载的内容请参阅 性能。

如果您看不到自己的类

  • HTML classes 中缺少主题的分组。 Drupal 用的还是主题 info 文件的旧副本。请点击 Clear all caches（Configuration > Development > Performance (/admin/config/development/performance)），或运行 drush cr。
  • 带该键的主题没有添加分组。 只有已安装的主题才算数。请在 Appearance (/admin/appearance) 安装主题；它不必是默认主题。
  • 选了类，元素看起来一样。 页面上没有加载该类的 CSS。请向主题加载的库添加规则，请参阅 自定义 CSS。Bootstrap 类请参阅 Bootstrap 版本。

接下来做什么？