SuperAPI AI 工具集

twig-templating

前端与建站

查看项目

更新于 10-20 16:12

技能介绍

Twig Templating 是面向 Drupal 10/11 的 Twig 模板开发技能,内容围绕模板组织与编写规范展开。

用途:用于创建或修改 Drupal Twig 模板、规划模板命名与主题建议、搭建可复用的组件化模板结构,并提供模板层面的编码约定。

主要能力:

  • 模板命名约定:说明 Drupal 基于建议(suggestion)的模板发现机制,列举 node、block、field、page 等基础模板及按内容类型、视图模式、节点 ID、字段与 bundle 细分的命名示例,如 node--article--teaser.html.twig、field--node--field-image--article.html.twig、page--front.html.twig。
  • 模板结构示例:以 node--article.html.twig 展示如何用 set 构建 classes 数组,结合 attributes.addClass、title_attributes、content_attributes 输出语义化结构。
  • 常用过滤器:列出 t、raw、escape、clean_class、clean_id、date、length、without、safe_join 等过滤器及其用途,并标注 raw 会跳过自动转义、需谨慎使用。
  • Drupal 专用函数:演示 attach_library 附加资源、path 生成路由链接、link 创建链接、带上下文的 t 翻译、url('<front>') 获取站内 URL、file_url 从 URI 生成文件 URL。
  • 预处理函数:给出 hook_preprocess_node 示例,展示向模板注入自定义变量(如根据正文字数计算阅读时间)和追加条件类。
  • 模板建议:给出 hook_theme_suggestions_node_alter 示例,基于自定义字段值动态追加建议。
  • BEM 组件模式:以 components/card.html.twig 为例,展示 card、card--variant、card__image、card__content、card__title、card__body、card__actions 等类名组织方式与条件渲染写法。
  • 最佳实践:模板内保持逻辑精简,复杂逻辑放入预处理函数;使用 BEM 命名;组件资源统一通过 attach_library() 附加;可翻译字符串使用 |t;模板只接收数据、不负责取数;生产环境关闭 Twig 调试;用 content|without('field_name') 排除字段。

使用方式:该页面为技能说明文档,未提供安装命令或调用步骤,暂未提供具体集成方式。

适用场景:Drupal 主题与模块的模板开发、组件化模板重构、模板命名与建议规则制定、代码评审中的模板规范检查。

限制:内容针对 Drupal 10/11 与 Twig,其他框架不适用;资料未说明版本兼容细节、依赖安装、性能数据或收费信息,暂未提供。