--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-theme/creating-a-sub-theme/creating-a-dxpr-theme-subtheme' title: '创建 DXPR Theme 子主题 (Drupal 11) | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:17:42+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Theme 通过设置面板更改颜色、字体、页眉、间距和布局，因此大多数网站连一行 CSS 都不需要写。子主题是为其余需求准备的：您自己的样式表、模板覆盖、额外的库，或随代码发布的调色板。子主题继承 DXPR Theme 的所有样式表和模板，拥有自己的设置，更新 DXPR Theme 不会影响它。 本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2。其使用的入门套件随主题一起提供，位于dxpr_theme/dxpr_theme_STARTERKIT；不使用 Drupal 核心的generate-theme命令，因为 DXPR Theme 自带入门套件和命令。 tags: - 'Een subthema maken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T08:17:42+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - '@type': FAQPage mainEntity: - '@type': Question name: 只改颜色和字体需要子主题吗？ acceptedAnswer: '@type': Answer text: '

不需要。颜色、字体、页眉、页脚、间距和布局都是 DXPR Theme 面板中的设置。只有在需要自己的 CSS、模板覆盖、额外的库或随代码发布的调色板时，才需要子主题。

' - '@type': Question name: 'AI 智能体可以创建子主题并完成设置吗？' acceptedAnswer: '@type': Answer text: '

可以。在运行drush dxt:setup-ai后，智能体了解主题设置并根据简介更改它们，还可以用drush dxt:subtheme:create自行创建子主题。您只需在网站上查看结果。

' - '@type': Question name: 'DXPR Theme 子主题支持哪些 Drupal 版本？' acceptedAnswer: '@type': Answer text: '

与 DXPR Theme 8.2 相同：Drupal 10.3 及更高版本，以及 Drupal 11。入门套件的 info 文件也声明了更早的版本，但 DXPR Theme 8.2 依赖的模块需要 Drupal 10.3。

' - '@type': Question name: '更新 DXPR Theme 会覆盖我的子主题吗？' acceptedAnswer: '@type': Answer text: '

不会。Composer 只替换themes/contrib/dxpr_theme；您的子主题位于themes/custom。更新后保存一次子主题的设置表单，以便其样式表获取新变量。

' - '@type': TechArticle headline: '创建 DXPR Theme 子主题 (Drupal 11)' description: |- DXPR Theme 通过设置面板更改颜色、字体、页眉、间距和布局，因此大多数网站连一行 CSS 都不需要写。子主题是为其余需求准备的：您自己的样式表、模板覆盖、额外的库，或随代码发布的调色板。子主题继承 DXPR Theme 的所有样式表和模板，拥有自己的设置，更新 DXPR Theme 不会影响它。 本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2。其使用的入门套件随主题一起提供，位于dxpr_theme/dxpr_theme_STARTERKIT；不使用 Drupal 核心的generate-theme命令，因为 DXPR Theme 自带入门套件和命令。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:17:42+0000' dateModified: '2026-10-24T08:17:42+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-theme/creating-a-sub-theme/creating-a-dxpr-theme-subtheme' articleSection: 'Een subthema maken' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-theme/creating-a-sub-theme/creating-a-dxpr-theme-subtheme' description: |- DXPR Theme 通过设置面板更改颜色、字体、页眉、间距和布局，因此大多数网站连一行 CSS 都不需要写。子主题是为其余需求准备的：您自己的样式表、模板覆盖、额外的库，或随代码发布的调色板。子主题继承 DXPR Theme 的所有样式表和模板，拥有自己的设置，更新 DXPR Theme 不会影响它。 本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2。其使用的入门套件随主题一起提供，位于dxpr_theme/dxpr_theme_STARTERKIT；不使用 Drupal 核心的generate-theme命令，因为 DXPR Theme 自带入门套件和命令。 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 Theme](/hc/documentation/learn-dxpr-theme) /[Een subthema maken](/hc/documentation/learn-dxpr-theme/een-subthema-maken) # 创建 DXPR Theme 子主题 (Drupal 11). Learn DXPR ThemeEen subthema maken ## In this guide DXPR Theme 通过设置面板更改颜色、字体、页眉、间距和布局，因此大多数网站连一行 CSS 都不需要写。子主题是为其余需求准备的：您自己的样式表、模板覆盖、额外的库，或随代码发布的调色板。子主题继承 DXPR Theme 的所有样式表和模板，拥有自己的设置，更新 DXPR Theme 不会影响它。 本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2。其使用的入门套件随主题一起提供，位于`dxpr_theme/dxpr_theme_STARTERKIT`；不使用 Drupal 核心的`generate-theme`命令，因为 DXPR Theme 自带入门套件和命令。 ## 开始之前 添加 DXPR Theme 并启用其辅助模块（Drupal 只有在完成这一步后才会安装该主题）： ``` composer require drupal/dxpr_theme drush en dxpr_theme_helper ``` ## 1. 从入门套件生成子主题 最快的方式是使用 DXPR Theme Helper 提供的 Drush 命令。在项目根目录运行它；它会验证机器名，将入门套件复制到`themes/custom`并为您重命名所有内容： ``` drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme" ``` 不带参数时，该命令会询问这两个名称。不使用 Drush 时，请使用主题自带的脚本：进入`web/themes/contrib/dxpr_theme`，用`chmod +x scripts/*`将脚本设为可执行（只需执行一次），运行`./scripts/create_subtheme.sh`，并在提示时输入显示名称和机器名。该脚本只能在该文件夹中运行。 无论哪种方式，您都会得到`web/themes/custom/northwind_theme`，入门套件的文件和配置已重命名为您的机器名，info 和 schema 文件中的`THEMETITLE`占位符已被替换。 ## 2. 启用子主题并保存一次设置 1. 进入*外观*，为您的子主题选择*安装并设为默认*。 2. 打开子主题的*设置*，不做任何更改，直接按*保存配置*。 首次保存会为新主题生成设置样式表。子主题从入门套件的默认设置开始，而不是从您在 DXPR Theme 中所做的设置开始。要沿用这些设置，请从 DXPR Theme 导出它们并导入子主题： ``` drush dxt:config:export --theme=dxpr_theme --file=theme.yml drush dxt:config:import theme.yml --theme=northwind_theme ``` 从此面板的操作与 DXPR Theme 完全一致：颜色、排版、页眉、页脚和间距都属于子主题。 保持子主题的区域与基础主题一致。入门套件声明了与 DXPR Theme 相同的 14 个区域，DXPR Theme Helper 在内容上的*隐藏区域*选项按名称引用它们。 ## 3. 入门套件包含的内容 - `northwind_theme.info.yml`：`base theme: dxpr_theme`、区域，以及一个加载您样式表的库 `global-styling`。注释掉的 `libraries-override` 块列出了您最可能关闭的 DXPR Theme 库，从 `dxpr_theme/bootstrap-5` 到 `dxpr_theme/helper-classes`。 - `css/dxpr_theme_subtheme.css`：在主题自身样式表之后加载到每个页面。您的 CSS 写在这里。 - `templates/`：除 README 外为空。要覆盖某个模板，请将其从 `dxpr_theme/templates` 复制到这里。 - `config/install` 和 `config/schema`：已重命名为您的主题的默认设置及其架构。 - `color-settings.json`：您自己命名的调色板，显示在配色方案列表中内置方案的旁边。 - `logo.svg`、`favicon.ico`、`screenshot.png`：替换为您的文件。 ## 4. 编写跟随设置的 CSS DXPR Theme 将设置写入 CSS 变量：`--dxt-color-*`用于调色板，`--dxt-setting-*`用于排版、间距和布局，并将它们映射到 Bootstrap 的`--bs-*`变量。在样式表中使用这些变量而不是固定值，当有人更改颜色或字体时，您的 CSS 仍会跟随面板。 ``` /* css/dxpr_theme_subtheme.css */ .card { border-radius: 1rem; border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent); } .dxpr-theme-footer h2 { font-family: var(--dxt-setting-headings-font-face); color: var(--dxt-color-footertext); } ``` 基础色、强调色、文本、标题、链接、卡片和页脚都有对应的变量。完整列表在主题 README 的*CSS 自定义属性（变量）参考*下。 ## 5. 覆盖模板和库 将要修改的模板从`themes/contrib/dxpr_theme/templates`复制到子主题的`templates`文件夹，保持文件名不变，编辑它，并清空缓存。Drupal 会优先使用子主题的副本。 要移除基础主题的某个样式表或脚本，请在 info 文件中取消注释`libraries-override:`行，以及要移除的库对应的行；它们已设为`false`。要添加自己的库，请在`northwind_theme.libraries.yml`中声明更多库，并在 info 文件的`libraries`下列出它们，就像入门套件为`global-styling`。 ## 6. 在 DXPR Builder 中向编辑提供您的类 在子主题 info 文件的`dxpr_builder_classes:`下声明的类会出现在 DXPR Builder 的类选择器中，编辑无需输入类名即可应用您的深色横幅或玻璃面板。请在`dxpr_theme_subtheme.css`中设置该类的样式，作用范围限定为其适用的 DXPR Builder 元素。 ## 7. 随主题发布调色板 在子主题根目录的`color-settings.json`中添加命名的方案。每个方案设置的键与面板使用的相同：`base`, `basetext`, `link`, `accent1`, `accent2`, `text`, `headings`, `card`, `footer`, `header`, `pagetitle`等。该方案会出现在设置表单的配色方案列表中，网站可以一键切换到品牌调色板。 ## 8. 以后更新 DXPR Theme 1. 用 Composer 更新基础主题：`composer update drupal/dxpr_theme --with-dependencies`。 2. 运行数据库更新并清空缓存。 3. 打开子主题的设置表单并再次保存，以便用所有新变量重新生成设置样式表。 4. 阅读发行说明，了解模板或区域的变更，并将您覆盖过的模板与新版本对比。 ## 让 AI 智能体为您完成主题设置 DXPR Theme 8.1.1 及更高版本附带智能体技能。在项目中运行`drush dxt:setup-ai`，您的编码智能体（Claude Code、Codex、Gemini CLI 或 Cursor）就会学习主题的设置及其含义。描述品牌，智能体就会通过面板写入的相同设置来设置颜色、排版、页眉布局和间距，供您在网站上检查。它还可以用`drush dxt:subtheme:create`。 DXPR Builder 技能为页面做同样的事，Drush Webmaster 为内容和视图做同样的事。[查看智能体技能实战](/drupal-agent-skills)。 ## 关于 DXPR Theme 子主题的常见问题 ### 只改颜色和字体需要子主题吗？ 不需要。颜色、字体、页眉、页脚、间距和布局都是 DXPR Theme 面板中的设置。只有在需要自己的 CSS、模板覆盖、额外的库或随代码发布的调色板时，才需要子主题。 ### AI 智能体可以创建子主题并完成设置吗？ 可以。在运行`drush dxt:setup-ai`后，智能体了解主题设置并根据简介更改它们，还可以用`drush dxt:subtheme:create`自行创建子主题。您只需在网站上查看结果。 ### DXPR Theme 子主题支持哪些 Drupal 版本？ 与 DXPR Theme 8.2 相同：Drupal 10.3 及更高版本，以及 Drupal 11。入门套件的 info 文件也声明了更早的版本，但 DXPR Theme 8.2 依赖的模块需要 Drupal 10.3。 ### 更新 DXPR Theme 会覆盖我的子主题吗？ 不会。Composer 只替换`themes/contrib/dxpr_theme`；您的子主题位于`themes/custom`。更新后保存一次子主题的设置表单，以便其样式表获取新变量。