SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场hyva-cms-component

hyva-cms-component

编程与开发

查看项目

更新于 10-15 15:05

技能介绍

用途

Hyvä CMS Component Creator 是一个交互式创建 Magento 2 自定义 Hyvä CMS 组件的技能。当用户希望创建新的 Hyvä CMS 组件、构建 Hyvä 组件，或需要相关帮助时使用。

它支持在新的或已有的模块中创建组件，为常见模式提供字段预设，并自动执行 setup:upgrade。

主要能力

  • 交互式创建自定义 Hyvä CMS 组件
  • 支持在新模块或已有模块中创建组件
  • 提供常见模式的字段预设：Basic Card、Image Card、CTA Block、Text Block、Feature Item、Testimonial、Accordion Item，也允许自定义字段
  • 自动选择图标（从可用的 lucide 图标中挑选未被其他组件使用的合适图标）
  • 支持模板变体（variants）
  • 生成 components.json 与 PHTML 模板文件
  • 创建文件后自动运行 bin/magento setup:upgrade

使用方式

工作流程分为多个步骤：

  1. 模块选择：若未指定，询问组件创建位置。选择新建模块时，需提供 Vendor name（必填，无默认值）和 Module name（默认建议 CmsComponents），随后使用 hyva-create-module 技能，依赖为 ["Hyva_CmsBase"]，composer_require 为 {"hyva-themes/commerce-module-cms": "^1.0"}。选择已有模块时，需提供模块路径，并确认 etc/module.xml 依赖 Hyva_CmsBase、composer.json 依赖 hyva-themes/commerce-module-cms，缺失则补上。

  2. 组件详情：收集 Component name（snake_case）、Label、Category（Layout、Elements、Media、Content 或 Other），并自动选择图标。图标选择先通过 hyva-cms-components-dump 技能导出当前所有 CMS 组件、提取已用图标，再列出 vendor/hyva-themes/magento2-theme-module/src/view/base/web/svg/lucide/ 下的可用图标，挑选语义最匹配且未被占用的图标，格式为 Hyva_Theme::svg/lucide/[icon-name].svg；若找不到合适图标或 lucide 目录不存在，则留空 icon 属性。

  3. 字段选择：提供字段预设或自定义字段。字段类型优先使用项目实时列表，可运行 bin/magento hyva:cms:list-fields（通过 hyva-exec-shell-cmd 包装）；命令不可用时回退到 references/field-types.md。自定义字段需依次询问字段名、字段类型、Label、默认值（可选）、是否必填、额外属性。注意必填等校验属性需放入 attributes 对象，而非直接作为字段属性。

  4. 变体支持：询问是否需要模板变体。需要则收集变体名称与标签（如 default、compact、wide），参见 references/variant-support.md；不需要则使用单一模板。

  5. 生成文件：

    • 新建模块：由 hyva-create-module 创建基础结构，再添加 CMS 相关目录，包括 etc/hyva_cms/components.json 和 view/frontend/templates/elements/[component-name].phtml（变体则为 [component-name]/ 目录）。
    • 已有模块：创建或更新 etc/hyva_cms/components.json（若已存在则合并）和 view/frontend/templates/elements/[component-name].phtml。

  6. 运行安装：使用由 hyva-exec-shell-cmd 技能检测到的命令包装运行 bin/magento setup:upgrade。

适用场景

  • 为 Magento 2 创建新的 Hyvä CMS 组件
  • 在已有模块中扩展 Hyvä CMS 组件
  • 需要常见布局/内容模式的快速字段配置
  • 需要为组件添加模板变体

限制与注意事项

  • 命令执行需在开发环境内运行（如 bin/magento），应通过 hyva-exec-shell-cmd 技能检测环境并确定命令包装
  • 组件级别仅允许特定属性：label（必填）、category、template、icon、children、require_parent、content、design、advanced、disabled、custom_properties。hidden 等未列出的属性会导致 schema 错误
  • children 是根级组件属性，不是 content、design 或 advanced 内的字段类型；模板中通过 $block->getData('children') 访问，而非自定义字段名
  • 字段校验属性（如 required）必须放在 attributes 对象内
  • 模板必须使用声明头，根元素与可编辑元素需使用 getEditorAttrs()，正确转义，不得使用 script 标签，需通过 alpine:init 事件使用 Alpine.js
  • 图片渲染推荐使用 hyva-render-media-image 技能
  • 官方资料未提供具体收费、价格信息