视频地址：https://www.bilibili.com/vide...
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);};