SuperAPI AI 工具集

typo3-frontend-patterns

前端与建站

查看项目

更新于 10-16 01:35

技能介绍

用途:为 TYPO3 v13 与 v14.3 LTS 站点包开发提供可复用的前端实现模式,每个模式包含完整的 Fluid 模板、TypeScript 插件、SCSS 局部样式与无障碍考量,避免从零构建并正确处理滚动性能、reduced-motion、键盘导航、ARIA live 区域等边界情况。

主要能力(模式清单):粘性页头(IntersectionObserver、CSS 过渡)、懒加载(延迟组件初始化、占位内容)、面包屑(JSON-LD 结构化数据、Schema.org)、语言切换(b13/menus LanguageMenu、旗帜图标)、动画(滚动触发、支持 prefers-reduced-motion)、锚点滚动(平滑滚动并补偿页头高度)、骨架屏(CSS 占位动画、布局稳定)、Toast 通知(自动消失、ARIA live 区域)、返回顶部(可见阈值、平滑滚动)。

使用方式:每个模式遵循统一结构——Fluid 模板(语义化 HTML 与 ARIA 属性)、TypeScript 插件(DOMContentLoaded 初始化)、SCSS 局部样式(集成 Bootstrap)、Vite 入口(通过 *.entry.ts 做代码分割)。详细说明见 references/ 下对应 Markdown 文件。

v14 注意事项:核心不再拼接或压缩前端 CSS/JS(Breaking #108055),需搭配外部构建工具(参见 typo3-vite-skill);Fluid 5(v14)强制严格 ViewHelper 类型(#108148),模板中所有 VH 必须有类型化参数且 render(): string;Camino(v14.1+,#108539)是 v14 核心默认主题,替代 bootstrap-package,模式保持主题无关。

限制:资料未提供具体安装命令、版本兼容细节、性能数据或收费信息,暂未提供。