AI Skills
sanity-best-practices

sanity-best-practices

熱門

Sanity 開發最佳實務，涵蓋 Schema 設計、GROQ 查詢、TypeGen、Visual Editing、圖片、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 程式碼庫時，請使用此技能。

162星標
0分支
更新於 2026/7/10
獲取技能源代碼

相關技能

frontend-code-review15萬source-driven-development7.8萬figma3.4萬
SKILL.md
readonlyread-only
name
sanity-best-practices
description

Sanity 開發最佳實務，涵蓋 Schema 設計、GROQ 查詢、TypeGen、Visual Editing、圖片、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
  • 實作 Visual Editing 與即時預覽
  • 處理圖片、Portable Text 或頁面建構器
  • 設定 Sanity Studio 結構
  • 設定 TypeGen 以獲得型別安全
  • 實作在地化
  • 從其他系統遷移內容
  • 使用 Sanity App SDK 建置自訂應用程式
  • 使用 Blueprints 管理基礎架構
  • 使用 Sanity Functions 自動化內容工作流程

全域規則

  • 讓 Sanity 為一般文件產生 _id 值。建立文件時，不要建立確定性 UUID、基於 slug 的 ID 或舊系統 ID。
  • 使用 reference 欄位建立關聯，然後透過 GROQ 查詢、來源鍵欄位或已建立文件回傳的 _id 值來解析相關文件。
  • 僅對由 Studio Structure 控制的單例文件使用明確的文件 ID，包括在地化單例，例如 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 Tool、Stega、覆蓋層、即時預覽
  • page-builder - Page Builder 陣列、區塊元件、即時編輯
  • portable-text - 富文本渲染與自訂元件
  • image - 圖片 Schema、URL 建構器、熱點、LQIP、Next.js Image
  • studio-structure - Desk 結構、單例、導航
  • typegen - TypeGen 設定、工作流程、型別工具
  • seo - 中繼資料、Sitemap、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

每個參考檔案包含：

  • 全面的主題或整合涵蓋範圍
  • 錯誤與正確的程式碼範例
  • 決策矩陣與工作流程指引
  • 適用的框架特定模式