Video address: https://www.bilibili.com/video/BV1qY4y1K7AH/
Sanity Modeling
Official website and documentation: https://www.sanity.io/
# 起 Sanity 服务
yarn add sanity@dev-preview sanity-plugin-markdown@studio-v3
# 客户端调用
yarn add @sanity/client
Create a Sanity configuration file 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'
}
}
]
}
]
}
});
The configuration file contains:
- Article Type Statement
- Label type declaration
In the follow-up, it is necessary to add according to the type of article: the distinction between pages, articles, and code snippets (forgotten when making videos).
Start the sanity service locally:
npx sanity start
Then visit: http://localhost:3333 to log in and manage content.
Sanity client call wrapper
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);
Because two datasets are allowed by default, one of which is Production, you can use previewClient to access the development environment.
Sanity query
GROQ query language: https://www.sanity.io/docs/groq
Need to take a good look, tossing for a long time did not quite understand. Finally got together an example to get it right.
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}
}
}`;
Pay attention to the tags there, I have been tossing for a long time.
Write a test interface:
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);
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。