AI Skills
sanity-best-practices

sanity-best-practices

热门

Sanity 开发最佳实践，涵盖 schema 设计、GROQ 查询、TypeGen、可视化编辑、图片、Portable Text、Studio 结构、本地化、迁移、Sanity Functions、Blueprints 以及框架集成（如 Next.js、Nuxt、Astro、Remix、SvelteKit、Angular、Hydrogen 和 App SDK）。在处理 Sanity schema、defineType 或 defineField、GROQ 或 defineQuery、内容建模、Presentation 或预览设置、基于 Sanity 的前端集成、Sanity Functions、documentEventHandler、defineDocumentFunction、defineMediaLibraryAssetFunction、@sanity/functions、@sanity/blueprints、sanity.blueprint.ts、事件驱动的内容自动化，或审查和修复 Sanity 代码库时，请使用此技能。

162Star
0Fork
更新于 2026/7/10
获取 Skill源代码

相关 Skills

i18n-localization4.4万javascript-testing-patterns3.8万developer-growth-analysis6.9万
SKILL.md
readonly只读
name
sanity-best-practices
description

Sanity 开发最佳实践，涵盖 schema 设计、GROQ 查询、TypeGen、可视化编辑、图片、Portable Text、Studio 结构、本地化、迁移、Sanity Functions、Blueprints 以及框架集成（如 Next.js、Nuxt、Astro、Remix、SvelteKit、Angular、Hydrogen 和 App SDK）。在处理 Sanity schema、defineType 或 defineField、GROQ 或 defineQuery、内容建模、Presentation 或预览设置、基于 Sanity 的前端集成、Sanity Functions、documentEventHandler、defineDocumentFunction、defineMediaLibraryAssetFunction、@sanity/functions、@sanity/blueprints、sanity.blueprint.ts、事件驱动的内容自动化，或审查和修复 Sanity 代码库时，请使用此技能。

Sanity 最佳实践

由 Sanity 维护的全面最佳实践和集成指南。使用下面的快速参考，仅加载与任务匹配的一两个主题文件。

何时应用

在以下情况下参考这些指南：

  • 设置新的 Sanity 项目或入职
  • 将 Sanity 与前端框架集成（Next.js、Nuxt、Astro、Remix、SvelteKit、Hydrogen）
  • 编写 GROQ 查询或优化性能
  • 设计内容 schema
  • 实现可视化编辑和实时预览
  • 处理图片、Portable Text 或页面构建器
  • 配置 Sanity Studio 结构
  • 设置 TypeGen 以实现类型安全
  • 实现本地化
  • 从其他系统迁移内容
  • 使用 Sanity App SDK 构建自定义应用
  • 使用 Blueprints 管理基础设施
  • 使用 Sanity Functions 自动化内容工作流

全局规则

  • 让 Sanity 为普通文档生成 _id 值。创建文档时，不要创建确定性 UUID、基于 slug 的 ID 或遗留系统 ID。
  • 使用 reference 字段建模关系，然后通过 GROQ 查找、源键字段或创建文档返回的 _id 值来解析相关文档。
  • 显式文档 ID 主要用于由 Studio Structure 控制的单例文档，包括本地化的单例，如 homePage-en。

快速参考

集成指南

  • get-started - 新 Sanity 项目的交互式入门
  • nextjs - Next.js App Router、Live Content API、独立 Studio
  • nuxt - 使用 @nuxtjs/sanity 的 Nuxt 集成
  • angular - 使用 @sanity/client、signals、resource API 的 Angular 集成
  • astro - 使用 @sanity/astro 的 Astro 集成
  • remix - React Router / Remix 集成
  • svelte - 使用 @sanity/svelte-loader 的 SvelteKit 集成
  • hydrogen - Shopify Hydrogen 与 Sanity
  • project-structure - 独立 Studio 和 monorepo 模式
  • app-sdk - 使用 Sanity App SDK 的自定义应用
  • blueprints - 基础设施即代码：blueprint 文件、堆栈、计划/部署工作流、错误恢复、CI 部署
  • functions - 使用 Sanity Functions 自动化内容工作流

主题指南

  • groq - GROQ 查询模式、类型安全、性能优化
  • schema - Schema 设计、字段定义、验证、弃用模式
  • visual-editing - Presentation 工具、Stega、叠加层、实时预览
  • page-builder - 页面构建器数组、块组件、实时编辑
  • portable-text - 富文本渲染和自定义组件
  • image - 图片 schema、URL 构建器、热点、LQIP、Next.js Image
  • studio-structure - Desk 结构、单例、导航
  • typegen - TypeGen 配置、工作流、类型工具
  • seo - 元数据、站点地图、Open Graph、JSON-LD
  • localization - i18n 模式、文档级与字段级、语言环境管理
  • migration - 内容导入概述（另见 migration-html-import）
  • migration-html-import - 使用 @portabletext/block-tools 将 HTML 转换为 Portable Text

使用方法

从最匹配需求的单个框架或主题指南开始，仅在任务涉及多个方面时阅读其他参考资料。使用这些参考文件获取详细解释和代码示例：

references/groq.md
references/schema.md
references/nextjs.md

每个参考文件包含：

  • 全面的主题或集成覆盖
  • 错误和正确的代码示例
  • 决策矩阵和工作流指导
  • 框架特定模式（如适用）