視頻地址：https://www.bilibili.com/video/BV1qY4y1K7AH/

Sanity 建模

官網及文檔： https://www.sanity.io/

# 起 Sanity 服務 yarn add sanity@dev-preview sanity-plugin-markdown@studio-v3# 客戶端調用 yarn add @sanity/client

創建一個 Sanity 配置文件 sanity.config.ts：

import { createConfig } from 'sanity'; import { deskTool } from 'sanity/desk'; import { markdownSchema } from 'sanity-plugin-markdown';export default createConfig({name: 'default',title: 'willin.wang',projectId: 'crrougir',dataset: 'production',plugins: [deskTool(), markdownSchema()],schema: {types: [{title: 'Post',name: 'post',type: 'document',fields: [{name: 'title',title: 'Title',type: 'string'},{name: 'slug',title: 'Slug',type: 'slug',options: {source: 'title'}},{name: 'content',title: 'Content',type: 'markdown'},{name: 'excerpt',title: 'Excerpt',type: 'string'},{title: 'Tags',name: 'tags',type: 'array',of: [{type: 'reference',to: [{ type: 'tag' }]}]},{name: 'lang',title: 'Language',type: 'string',initialValue: 'zhCN'}]},{name: 'tag',title: 'Tag',type: 'document',fields: [{name: 'name',title: 'Name',type: 'object',fields: [{name: 'zhCN',title: '簡體中文',type: 'string'},{name: 'enUS',title: 'English',type: 'string'}]},{name: 'slug',title: 'Slug',type: 'slug',options: {source: 'title'}}]}]} });

該配置文件包含：

• 文章類型申明
• 標簽類型申明

后續還需要根據文章類型再加上：頁面、文章、代碼片段的區分（做視頻的時候忘了）。

本地啟動 sanity 服務：

npx sanity start

然后訪問： http://localhost:3333 登錄并管理內容。

Sanity 客戶端調用封裝

import createClient from '@sanity/client';const sanityConfig = {projectId: process.env.SANITY_PROJECT_ID || 'crrougir',dataset: process.env.SANITY_DATASET || 'production',useCdn: process.env.NODE_ENV !== 'production',apiVersion: '2021-03-25' };export const sanityClient = createClient(sanityConfig);export const previewClient = createClient({...sanityConfig,useCdn: false,token: process.env.SANITY_API_TOKEN });export const getClient = (preview) => (preview ? previewClient : sanityClient);

因為默認允許有兩個 dataset，其中一個為 Production，所以可以使用 previewClient 來訪問開發環境。

Sanity 查詢

GROQ 查詢語言： https://www.sanity.io/docs/groq

需要好好看看，折騰了半天沒太搞明白。好不容易湊了一個例子跑對了。

const postFields = `_id,title,excerpt,lang,tags[]->{name,"slug": slug.current},"slug": slug.current, `;export const postQuery = ` {"post": *[_type == "post" && slug.current == $slug] | order(_updatedAt desc) [0] {content,${postFields}} }`;

注意 tags 那里，折騰了好久。

寫一個測試接口：

import { json } from '@remix-run/node'; import { postQuery } from '~/lib/query'; import { getClient } from '~/lib/sanity';export const loader = async () => {const data = await getClient().fetch(postQuery, { slug: 'test' });return json(data); };

總結

以上是生活随笔為你收集整理的搭建个人知识付费应用系统-(6)Sanity 集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。