---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/theming'
title: 'DXPR Builder 主题定制 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:16:24+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  构建器内容是您页面中的普通 HTML，因此您的主题像处理其他内容一样为其应用样式。本页介绍主题继承的内容、如何向编辑器添加类，以及覆盖样式的位置。
  主题负责样式的内容
  已发布的构建器内容会继承您主题的样式：
tags:
  - 'Build on it'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:16:24+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'DXPR Builder 主题定制'
      description: |-
        构建器内容是您页面中的普通 HTML，因此您的主题像处理其他内容一样为其应用样式。本页介绍主题继承的内容、如何向编辑器添加类，以及覆盖样式的位置。
        主题负责样式的内容
        已发布的构建器内容会继承您主题的样式：
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:16:24+0000'
      dateModified: '2026-10-24T19:16:24+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/theming'
      articleSection: 基于它开发
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/theming'
      description: |-
        构建器内容是您页面中的普通 HTML，因此您的主题像处理其他内容一样为其应用样式。本页介绍主题继承的内容、如何向编辑器添加类，以及覆盖样式的位置。
        主题负责样式的内容
        已发布的构建器内容会继承您主题的样式：
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[扩展](/zh-hans/hc/documentation/learn-dxpr-builder/extend) /[基于它开发](/zh-hans/hc/documentation/learn-dxpr-builder/extend/build-on-it) # DXPR Builder 主题定制.

 学习 DXPR Builder扩展基于它开发

   ## 本指南内容

构建器内容是您页面中的普通 HTML，因此您的主题像处理其他内容一样为其应用样式。本页介绍主题继承的内容、如何向编辑器添加类，以及覆盖样式的位置。

## 主题负责样式的内容

已发布的构建器内容会继承您主题的样式：

- 标题、正文和链接使用您主题的样式。
- 布局使用 Bootstrap 5 的行和列，因此 Bootstrap 5 主题与之对齐。对于其他主题，请前往 **DXPR Studio > DXPR Builder > General Settings**，将 **Sideload Bootstrap files** 设为 **Bootstrap 5**。
- 每个元素按类型有一个类，例如 `az-card` 或 `az-button`，大多数还带有 `az-element`；请参见 [CSS 架构](/zh-hans/hc/documentation/learn-dxpr-builder/development/css-architecture)。

## 向编辑器添加类

### 在主题的 info.yml 中

在您主题的 `.info.yml` 中，在 `dxpr_builder_classes` 下列出类。只要主题处于启用状态，它们就会出现在每个元素的 **HTML classes** 列表中，位于以主题命名的选项组里：

```yaml
# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

```

### 通过模块

实现 `hook_dxpr_builder_classes_alter()`。名称必须以 `_alter` 结尾；请参见 [Hooks API 参考](/zh-hans/hc/documentation/learn-dxpr-builder/development/hooks-api)。

```php
/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

```

## 按钮样式

按钮元素提供 Bootstrap 样式 Primary、Secondary、Success、Info、Warning、Danger、Link、Light 和 Dark。该列表在编辑器中是固定的；按钮文件夹钩子不会改变它。要让按钮呈现您的品牌外观，请在您的主题中为 Bootstrap 的 `btn-*` 类设置样式，或通过 **HTML classes** 添加您自己的类。

## CSS 覆盖

在您主题的 CSS 中覆盖构建器输出：

```css
/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

```

编辑人员在样式选项卡中所做的设置会写为内联样式。内联样式优先于不使用 `!important` 的主题规则，因此请使用主题 CSS 设置默认值，并让编辑人员按元素覆盖它们。

## 编辑器与您的主题

编辑器运行在显示字段的页面上，也就是在您的前端主题中，而不是管理主题中。它的控制栏、菜单和对话框带有 `dxpr-builder-ui` 类，并加载自己的样式表 `dxpr_builder_backend.css`。针对宽泛选择器（例如 `button` 或 `.modal`）的主题规则仍可能影响它们；请将您的规则限定在内容区域内，以避免这种情况。