关于 hydrogen-cookbooks
这是一组面向 Shopify Hydrogen 店面的分步功能指南。每篇指南包含前置条件、代码和文件变更、实施说明及故障排查，并提供离线参考和文档搜索工具。
主要功能
- 01独立的功能实现指南
- 02分步代码与文件变更
- 03前置条件和实施说明
- 04故障排查建议
- 05离线参考与文档搜索
适用场景
- 01添加商品捆绑展示
- 02设置 Customer Account API
- 03从 Remix v2 迁移到 React Router v7
- 04实现性能或媒体相关功能
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/hydrogen-cookbooks确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/bundles.mdcombined-listings.mdcustomer-account-api.mdhydrogen-react-router.mdmodel-viewer.mdperformance-best-practices.mdvariant-media-grouping.mdweaverse-hydrogen-integration.md详细介绍
Hydrogen 食谱
用于在 Shopify Hydrogen 店面中构建特定功能的具体分步指南。每份食谱都是独立的方案，包含代码、文件更改和实现说明。
实时文档
请在此技能所在的文件夹中运行这些命令。辅助脚本包含在同级的
shopify-hydrogen 技能中，因此只要安装了整个工具包，../shopify-hydrogen/scripts/ 就会存在。
如果你单独安装了此技能，该文件夹将不存在，下面的命令会因 MODULE_NOT_FOUND 而失败。添加一次辅助脚本即可：
npx skills add Weaverse/shopify-hydrogen-skills --skill shopify-hydrogen
如果你不想安装辅助脚本，此技能中的 references/ 文件仍可作为离线替代方案使用。
获取 Shopify 最新的 Hydrogen 食谱：
node ../shopify-hydrogen/scripts/search_shopify_docs.mjs "hydrogen cookbook <topic>"
获取 Weaverse 专用模式：
node ../shopify-hydrogen/scripts/search_weaverse_docs.mjs "<topic>"
以下参考指南经过精心整理，可能包含实时文档中没有的 Weaverse 专用模式。
可用食谱
| 食谱 | 描述 |
|---|---|
| bundles.md | 在购物车中显示带徽章的产品捆绑包和捆绑变体行项目 |
| combined-listings.md | 处理组合商品列表——工具、筛选器、媒体分组、价格范围显示 |
| customer-account-api.md | 设置 Customer Account API，并使用隧道进行本地开发 |
| hydrogen-react-router.md | 导入替换指南：Remix v2 → React Router v7 |
| model-viewer.md | 使用 ModelViewer 组件和 AR 支持 3D 模型（.glb/.usdz） |
| performance-best-practices.md | 缓存策略、流式传输、延迟数据、第三方脚本、查询优化 |
| variant-media-grouping.md | 按变体选项（如 Color）对产品媒体分组 |
| weaverse-hydrogen-integration.md | 完整的 Weaverse 集成：组件注册、主题架构、数据获取 |
使用方法
每份食谱都会说明：
- 功能——该功能的作用
- 前置条件——首先需要检查的事项
- 分步实现——文件更改、代码片段、差异
- 故障排除——常见问题及解决方法
食谱文件名对应 Hydrogen 骨架模板。请根据项目结构调整文件路径。
评论
支持 Markdown