共计 2301 个字符,预计需要花费 6 分钟才能阅读完成。
视频地址: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);
};
正文完