Drupal 11 主题开发完全指南：现代化主题开发的新时代

由 hrs, 3 四月, 2026

 

引言

Drupal 11 于 2023 年发布，标志着 Drupal 主题开发进入了一个全新的时代。作为 Drupal 10 的延续，Drupal 11 在主题系统方面带来了许多重要的改进和现代化特性，让主题开发更加高效、灵活和符合现代 Web 开发标准。

Drupal 11 主题系统的主要变化

1. Symfony 6 和 PHP 8.2+ 支持

Drupal 11 基于 Symfony 6 构建，要求 PHP 8.2 或更高版本。这意味着主题开发者可以：

  • 使用 PHP 8.2 的新特性（如只读类、独立类型等）
  • 享受更好的性能和安全性
  • 使用更现代的依赖注入模式

2. 移除弃用代码

Drupal 11 移除了大量在 Drupal 10 中标记为弃用的代码，包括：

  • 移除了对 IE11 的支持
  • 清理了旧的 JavaScript 库
  • 移除了不推荐使用的主题函数

3. 现代化前端工具链

Drupal 11 继续推进前端现代化：

  • Webpack 5 作为默认的构建工具
  • ES6+ 和现代 JavaScript 语法支持
  • 更好的 TypeScript 集成
  • 改进的 CSS 预处理支持

创建 Drupal 11 主题

基础主题结构

my_custom_theme/
├── my_custom_theme.info.yml      # 主题定义文件
├── my_custom_theme.libraries.yml # 库定义
├── my_custom_theme.theme         # 主题预处理函数
├── templates/                    # Twig 模板
│   ├── node/
│   │   └── node--article.html.twig
│   └── block/
│       └── block--system-menu-block.html.twig
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
└── config/                       # 主题配置
    └── install/
        └── my_custom_theme.settings.yml

主题信息文件 (my_custom_theme.info.yml)

name: 'My Custom Theme'
type: theme
description: 'A custom Drupal 11 theme'
core_version_requirement: ^11
base theme: claro  # 或 olivero、stable9
libraries:
  - my_custom_theme/global-styling
regions:
  header: 'Header'
  primary_menu: 'Primary menu'
  content: 'Content'
  sidebar: 'Sidebar'
  footer: 'Footer'

Drupal 11 主题开发新特性

1. 改进的 Twig 支持

Drupal 11 提供了更强大的 Twig 集成：

  • Twig 3.x 支持，带来更多功能和更好的性能
  • 改进的调试工具和错误信息
  • 更好的模板继承和包含机制

2. 单目录组件 (SDC)

Drupal 11 进一步完善了单目录组件系统：

# components/button/button.component.yml
name: Button
props:
  text:
    type: string
    required: true
  variant:
    type: string
    default: primary
    options:
      - primary
      - secondary
      - outline

3. 改进的可访问性

Drupal 11 主题默认包含：

  • WCAG 2.1 AA 合规性改进
  • 更好的键盘导航支持
  • 增强的屏幕阅读器兼容性
  • 自动 ARIA 属性生成

4. 响应式图像改进

{# 在模板中使用响应式图像 #}
{{ include('@my_theme/images/responsive-image.html.twig', {
  uri: node.field_image.entity.uri.value,
  alt: node.field_image.alt,
  responsive_image_style_id: 'responsive',
}) }}

现代化前端工作流

使用 Starterkit 工具

Drupal 11 提供了改进的 Starterkit 工具：

# 从现有主题创建新主题
php core/scripts/drupal generate-theme my_new_theme \
  --starterkit claro

现代 CSS 和 JavaScript

// ES6+ 模块化 JavaScript
import { initMenu } from './modules/menu';
import { initCarousel } from './modules/carousel';

document.addEventListener('DOMContentLoaded', () => {
  initMenu();
  initCarousel();
});
/* 现代 CSS 特性 */
:root {
  --primary-color: #0073b9;
  --spacing-unit: 1rem;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-unit);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #4dabf7;
  }
}

性能优化最佳实践

1. 资源优化

  • 使用 CSS 和 JavaScript 聚合
  • 实现懒加载图像
  • 使用现代图像格式（WebP、AVIF）

2. 缓存策略

  • 合理设置缓存头
  • 使用 CDN 分发静态资源
  • 实现服务端渲染优化

3. 代码分割

# 按需加载库
global-styling:
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}
  dependencies:
    - core/drupal
    - core/jquery

调试和开发工具

1. Twig 调试模式

// 在 settings.local.php 中启用
$settings['twig_debug'] = TRUE;
$settings['twig_auto_reload'] = TRUE;

2. 前端开发工具

  • Drupal Console 或 Drush 用于主题开发
  • BrowserSync 实时重载
  • ESLint 和 Stylelint 代码质量检查

迁移到 Drupal 11

从 Drupal 10 迁移

  1. 更新主题信息文件：修改 core_version_requirement
  2. 检查弃用警告：运行 drush updatedb-status
  3. 测试兼容性：使用 Upgrade Status 模块
  4. 更新依赖：确保所有库和工具兼容 PHP 8.2+

常见迁移问题

  • 移除对已弃用 API 的调用
  • 更新 JavaScript 依赖
  • 调整 CSS 供应商前缀

结论

Drupal 11 为主题开发者提供了一个现代化、高效且强大的平台。通过采用最新的 Web 标准、改进的开发工具和更好的性能优化，Drupal 11 使得创建美观、可访问且高性能的网站变得更加容易。

关键要点：

  • 拥抱现代化前端工具链
  • 充分利用 Twig 3.x 的新特性
  • 优先考虑可访问性和性能
  • 利用单目录组件提高代码复用性
  • 保持与 Drupal 核心更新的同步

Drupal 11 不仅是一个技术升级，更是 Drupal 主题开发理念的演进，为构建下一代 Web 体验奠定了坚实的基础。

内容类型分类
drupal cms
文章归类
drupal11

文章标签

评论