---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-templates'
title: '覆盖 DXPR Builder 模板 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:45:09+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Builder 的元素在浏览器中渲染，所用模板编译进编辑器。没有可复制到主题中的元素模板。模块为自己的页面自带四个 Twig 模板，您可以用常规 Drupal 方法覆盖它们。本页列出它们，解释元素标记为什么不能覆盖，并指向模块支持的替代路线。
  可覆盖的 Twig 模板
  模板位于模块的 templates/ 文件夹中：
tags:
  - 'Je huisstijl toepassen'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+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: |-
        DXPR Builder 的元素在浏览器中渲染，所用模板编译进编辑器。没有可复制到主题中的元素模板。模块为自己的页面自带四个 Twig 模板，您可以用常规 Drupal 方法覆盖它们。本页列出它们，解释元素标记为什么不能覆盖，并指向模块支持的替代路线。
        可覆盖的 Twig 模板
        模板位于模块的 templates/ 文件夹中：
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:45:09+0000'
      dateModified: '2026-10-24T09:09:48+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/customization/custom-templates'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-templates'
      description: |-
        DXPR Builder 的元素在浏览器中渲染，所用模板编译进编辑器。没有可复制到主题中的元素模板。模块为自己的页面自带四个 Twig 模板，您可以用常规 Drupal 方法覆盖它们。本页列出它们，解释元素标记为什么不能覆盖，并指向模块支持的替代路线。
        可覆盖的 Twig 模板
        模板位于模块的 templates/ 文件夹中：
      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
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # 覆盖 DXPR Builder 模板.

 Learn DXPR BuilderManage the siteJe huisstijl toepassen

   ## In this guide

 Related guides

- [从模板开始页面](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)
- [Theming](/hc/documentation/learn-dxpr-builder/development/theming)

DXPR Builder 的元素在浏览器中渲染，所用模板编译进编辑器。没有可复制到主题中的元素模板。模块为自己的页面自带四个 Twig 模板，您可以用常规 Drupal 方法覆盖它们。本页列出它们，解释元素标记为什么不能覆盖，并指向模块支持的替代路线。

## 可覆盖的 Twig 模板

模板位于模块的 `templates/` 文件夹中：

| 模板 | 用途 | 变量 |
|---|---|---|
| `dxpr-license-info.html.twig` | 该 **User Licenses** 和 **Content items** 页面上的用量摘要，以及 **License info** 区块 | `used_count`、`total_count`、`limit`、`block_label`、`total_label`、`used_label`、`more_info_link` |
| `page--dxpr-builder--media-library.html.twig` | Media Library 对话框的页面外层，位于 `/dxpr_builder/media-library` | 标准的 `page` 变量 |
| `html--dxpr-builder--media-library.html.twig` | 同一对话框的 `<html>` 外层 | 标准的 `html` 变量 |
| `page--people-list.html.twig` | 一个 **People** 页面（`/admin/people`）带许可证摘要的起点 | 标准的 `page` 变量，以及 `user_license` |

前三个开箱即用。Drupal 不会从模块加载 `page--people-list.html.twig`。DXPR Builder 只在 People 页面上添加 `page__people_list` 建议和 `user_license` 变量。要在那里显示摘要，请将文件复制到您的管理主题中。

覆盖模板：

1. 将文件从 `modules/contrib/dxpr_builder/templates/` 复制到渲染它的主题的 `templates/` 文件夹中。管理页面和 Media Library 对话框使用管理主题。**License info** 区块使用您放置它的区域的主题。
2. 编辑副本。
3. 用 `drush cr` 清除缓存。

## 元素标记为什么不能覆盖

每个元素的标记是 `dxpr_builder/templates/` 中的 twig.js 模板，例如 `elements/alert/alert.twig.html`。构建将这些模板编译进 `dxpr_builder/dxpr_templates.js`。编辑器在浏览器中渲染它们，并将生成的 HTML 存入字段。由此得出两点：

- 更改模板需要重建编辑器。从 DXPR CDN 加载编辑器的网站完全无法使用更改后的模板。
- 已保存的页面保留保存时的 HTML。新模板只影响更改后渲染的元素。

因此模块不提供元素模板的按站覆盖。请用下文路线之一。

## 支持的定制路线

| 目标 | 路线 |
|---|---|
| 编辑人员可重复使用的布局 | [页面模板](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)和 [用户模板](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)，都在构建器中选用 |
| 更改元素外观 | [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)（主题中），针对自己的类或 `az-*` 类 |
| 给编辑人员命名的样式 | [实用类](/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes)（主题 `.info.yml` 中的），以及文本编辑器的 [自定义样式](/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor#set-up)（文本编辑器用） |
| 额外的图标集 | [图标库](/zh-hans/hc/documentation/learn-dxpr-builder/customization/icon-libraries) |
| 新元素类型 | [创建自定义元素](/zh-hans/hc/documentation/learn-dxpr-builder/development/custom-elements) |

## 接下来做什么？

- [页面模板](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)：编辑人员使用的模板系统。
- [DXPR Builder 主题化](/hc/documentation/learn-dxpr-builder/development/theming)：构建器 CSS 与主题的配合。