用途:该技能面向 Magento 2 前端主题开发,用于创建自定义主题、子主题及主题修改,并覆盖前端外观与布局定制、响应式设计、布局 XML 与模板处理、前端性能优化等场景。
主要能力:规划与设计分析(设计系统、技术需求、性能目标、浏览器支持、无障碍标准);主题架构搭建(选择 Blank、Luma 或自定义父主题,建立子主题继承,规划资源与构建流程);主题结构涉及 app/design/frontend/Vendor/theme-name/ 下的 etc/view.xml、media/preview.jpg、web/css、web/js、web/images、registration.php、theme.xml;布局开发(页面布局、布局更新、块定制、容器管理、模板层级);样式实现(组件化 CSS、移动优先断点、字体与颜色系统、动画交互)。同时涉及将布局 XML、.phtml 模板(含转义输出)、CSS/LESS、RequireJS 与 KnockoutJS 的 JavaScript 组件,以及电商、响应式和面向无障碍的主题类型。
使用方式:在开发 Magento 2 主题、定制前端、实现响应式设计或修改现有主题时调用。资料给出的结构示例为 app/design/frontend/Vendor/theme-name/,并说明使用输出转义($escaper->escapeHtml() 等)、表单密钥校验、性能预算与核心网页指标验证。
限制与未提供:资料未给出具体安装命令、价格、版本兼容范围或平台限制,均暂未提供。实际应用需结合官方 Adobe Commerce/Magento 前端开发文档核对。