SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场drupal-frontend

drupal-frontend

前端与建站

查看项目

更新于 10-15 15:30

技能介绍

用途

本技能用于启用专家级的 Drupal 前端开发能力，为 Drupal 8、9、10、11+ 的主题开发、Twig 模板、预处理、响应式设计与资源管理提供全面指导。

何时使用

在以下场景调用本技能：

  • 主题开发：创建或定制 Drupal 主题
  • Twig 模板：编写或修改 .twig 模板文件
  • 预处理：为模板实现预处理函数
  • 模板建议：添加自定义模板命名模式
  • CSS/JS 库：管理主题资源与依赖
  • 响应式设计：实现断点与移动优先设计
  • 渲染系统：理解 Drupal 渲染管线
  • 主题钩子：实现主题相关钩子与修改

主要能力

1. 主题开发

构建完整且符合标准的 Drupal 主题，包含正确结构。快速开始流程：使用 assets/theme-template/ 中的主题模板作为起点；将 THEMENAME 替换为主题的机器名；将 THEMELABEL 替换为可读名称；定制模板、CSS、JS 与库；启用主题并通过外观界面配置。

主题组件包括：.info.yml（主题元数据与配置）、.libraries.yml（CSS/JS 库定义）、.theme（预处理函数与主题逻辑）、.breakpoints.yml（响应式断点）、templates/（Twig 模板文件）、css/（样式表）、js/（JavaScript 文件）。参考文档：references/theming.md 提供完整主题化指南与示例。

2. Twig 模板系统

掌握 Twig 语法与 Drupal 专用扩展。Twig 基础：{{ variable }} 打印变量；{% if/for/set %} 控制结构与逻辑；{# comment #} 注释与文档；{{ var|filter }} 对变量应用过滤器；{% extends %} 模板继承；{% block %} 定义可覆盖区块。

Drupal 专用 Twig：{{ 'Text'|t }} 翻译字符串；{{ attach_library('theme/library') }} 加载 CSS/JS；{{ url('route.name') }} 生成 URL；{{ path('route.name') }} 生成路径；{{ file_url('public://image.jpg') }} 文件 URL；{{ content|without('field') }} 排除字段。

常见模板：page.html.twig（页面布局结构）、node.html.twig（节点显示）、block.html.twig（区块渲染）、field.html.twig（字段输出）、views-view.html.twig（Views 输出）。

3. 预处理函数

在渲染前修改变量。预处理模式：function THEMENAME_preprocess_HOOK(&$variables) { // 添加或修改变量 // 访问实体、服务、配置 // 为模板准备数据 }。

常见预处理钩子：hook_preprocess_page()（页面级变量）、hook_preprocess_node()（节点特定数据）、hook_preprocess_block()（区块修改）、hook_preprocess_field()（字段修改）、hook_preprocess_html()（HTML 文档）。

最佳实践：逻辑放在预处理中，标记放在模板中；尽可能使用依赖注入；正确使用缓存上下文/标签；为复杂预处理编写文档。

4. 模板建议

为不同上下文提供特定模板。建议模式：page--front.html.twig（首页）、page--node--{nid}.html.twig（特定节点）、page--node--{type}.html.twig（内容类型）、node--{type}--{viewmode}.html.twig（类型 + 视图模式）、block--{plugin-id}.html.twig（特定区块）、field--{entity}--{field}.html.twig（特定字段）。

添加建议：function THEMENAME_theme_suggestions_HOOK_alter(array &$suggestions, array $variables) { // 添加自定义建议 $suggestions[] = 'custom__suggestion'; }。

5. CSS 与 JavaScript 管理

高效组织并加载主题资源。库定义示例（THEMENAME.libraries.yml）：global-styling: version: 1.0; css: base: css/base/reset.css: {}; theme: css/theme/styles.css: {}; js: js/custom.js: {}; dependencies: - core/drupal。

加载方式：全局在 .info.yml 中定义；条件加载在模板中使用 attach_library()；预处理在预处理函数中附加。

最佳实践：将 CSS 分层（base、layout、component、theme）；生产环境启用 CSS 聚合；最小化 JavaScript 依赖；利用 Drupal 资源库系统。

6. 响应式设计

实现移动优先、可访问的设计。断点定义示例（THEMENAME.breakpoints.yml）：THEMENAME.mobile: label: Mobile; mediaQuery: 'screen and (min-width: 0px)'; weight: 0。THEMENAME.tablet: label: Tablet; mediaQuery: 'screen and (min-width: 768px)'; weight: 1。THEMENAME.desktop: label: Desktop; mediaQuery: 'screen and (min-width: 1024px)'; weight: 2。

移动优先方法：先为最小屏幕设计；为更大视口增强；使用响应式图片；跨设备测试；遵循无障碍标准（WCAG）。

使用方式

创建新主题

  1. 搭建主题脚手架：cp -r assets/theme-template/ /path/to/drupal/themes/custom/mytheme/；cd /path/to/drupal/themes/custom/mytheme/；重命名文件：mv THEMENAME.info.yml mytheme.info.yml；mv THEMENAME.libraries.yml mytheme.libraries.yml；mv THEMENAME.theme mytheme.theme。

  2. 更新主题配置：编辑 mytheme.info.yml 设置名称、区域、基础主题；编辑 mytheme.libraries.yml 定义 CSS/JS 库；将 THEMENAME 替换为机器名；将 THEMELABEL 替换为标签。

  3. 启用主题：ddev drush cr；通过 /admin/appearance 界面启用，或执行 ddev drush config:set system.theme default mytheme -y。

  4. 启用 Twig 调试：复制 sites/default/default.services.yml 到 sites/default/services.yml；设置 twig.config.debug: true；设置 twig.config.auto_reload: true；设置 twig.config.cache: false；运行 ddev drush cr。

  5. 开发与迭代：修改 templates/ 中的模板；更新 css/ 中的 CSS；频繁清理缓存：ddev drush cr；检查浏览器控制台错误。

标准开发工作流

启用开发设置（Twig 调试、禁用 CSS/JS 聚合）；根据 Twig 调试给出的建议创建/修改模板；在 .theme 文件中实现预处理以处理复杂数据操作；通过库系统添加 CSS/JS；跨浏览器与设备测试；更改后清理缓存：ddev drush cr。

查找模板名称

启用 Twig 调试后，检查 HTML 源码中的 FILE NAME SUGGESTIONS 注释，其中 x 表示当前活动模板，其他为可创建的建议。

常见模式

在预处理中添加自定义变量：function mytheme_preprocess_page(&$variables) { $variables['site_slogan'] = \Drupal::config('system.site')->get('slogan'); $variables['is_logged_in'] = \Drupal::currentUser()->isAuthenticated(); $variables['attributes']['class'][] = 'custom-page-class'; }。

模板继承：{% extends "page.html.twig" %} {% block content %} <div class="article-wrapper"> {{ parent() }} </div> {% endblock %}。

条件加载库：function mytheme_preprocess_node(&$variables) { if ($variables['node']->bundle() == 'article') { $variables['#attached']['library'][] = 'mytheme/article-styles'; } }。

在 Twig 中访问字段值：{{ node.field_custom.value }}；{% if node.field_image|render %} {{ content.field_image }} {% endif %}；{% for item in node.field_tags %} {{ item.entity.label }} {% endfor %}。

适用场景

适用于 Drupal 8、9、10、11+ 的主题开发、模板定制、预处理逻辑实现、资源库管理、响应式与无障碍设计，以及渲染系统与主题钩子的理解与实现。

限制与注意事项

版本兼容性：Twig 语法在各版本一致；部分旧基础主题在 10+ 中移除；库结构各版本相同；Drupal 9+ 默认不加载 jQuery；Claro 是 9+ 的管理主题标准；Olivero 是 10+ 的前端主题标准。升级时需检查已弃用的基础主题、审查 jQuery 依赖、使用当前 Twig 版本测试、检查已移除的核心模板。

故障排查：模板更改不显示时清理缓存并检查文件位置与命名；CSS/JS 不加载时检查库定义与文件路径；变量不可用时检查预处理函数命名；Twig 调试不工作时验证 services.yml 与配置。

最佳实践涵盖主题开发（选择合适基础主题、逻辑组织 CSS、使用 BEM 等命名方法、注释复杂逻辑、优化性能）、Twig 模板（复杂逻辑放预处理、使用合适过滤器、控制空白、仅开发时启用调试）、预处理（依赖注入、正确缓存、避免重操作）、CSS/JS（分组库、声明依赖、按需加载、生产启用聚合）、无障碍（语义 HTML、ARIA、键盘导航、对比度、替代文本）与响应式设计（移动优先、逻辑断点、响应式图片、跨设备测试、移动网络优化）。

相关技能：drupal-backend（模块开发、钩子、API）、drupal-tooling（DDEV 与 Drush 开发工具）。