视频地址：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 集成相关推荐

怎么搭建知识付费平台系统
近年来随着移动互联网的快速发展,人们获取信息的方式.渠道变得越来越多,各种信息占据着人们的空闲时间.在国家大力提倡互联网+的政策下,各行各业都大力布局互联网,开启互联网+模式. 从2016年开始,知识 ...
一个知识付费商城系统2022年最新改良版源码
本套系统是基于一个系统知识付费系统改良后的源码,附带N种模板.此模板外面售价599 这边改良后修复已知BUG,免费分享给大家.数据自行对接自行整理.自行上传,内附带易支付接口. 更新10.3 解 ...
从 0 到 1 设计、编码、搭建个人知识付费应用（Remix 全栈框架、集成支付和用户、React、TailwindCSS、Prisma）
感兴趣或者喜欢的请点赞关注我,本文超过 100 个赞正式动工. 变更记录 2022-07-30 初稿,设想提出 2022-07-31 添加需求草稿系统概述类似于个人博客系统,可以发布文章.页面及代 ...
最新改良版彩虹代刷知识付费模板系统
本套系统是彩虹系统改良版源码附带N种模板数据自行对接自行整理.自行上传,内附带易支付更新10.3 解决最新模板首页不见内容解决代码报错解决模板首页布局错乱问题内附教程.自行搭建.其他就不多 ...
云之道知识付费V2系统V2.5.5源码
官方介绍.安装教程文档:云之道知识付费V2介绍 · 云之道知识付费V2 · 看云 (kancloud.cn) 演示地址: 管理后台账号:v2demo密码:v2demo 版本号:2.5.5 – 默认 ...
sap系统搭建教程_詹迟迟：如何搭建知识付费系统？知识付费系统搭建教程
如何搭建知识付费系统? 知识付费一直很火爆,在这个不确定的时代,很多人已经明确知道,学习是终身的事情,也有人在说这只是在制造焦虑,但知识付费越来越火是个明确的事实. 这就有很多知识付费平台产生了,但 ...
知识付费系统搭建需要多少钱以及教程
知识付费系统搭建需要多少钱以及教程.知识付费火了,粗略估算了下我自己,去年买书,买课,付费阅读花了好几大千,知识付费正处于风口当中,这点清源君是感触颇深的. 为什么知识付费行业会这么火? 1.网络信息 ...
知识付费平台网课系统。知识付费平台搭建，具体应该如何去做
知识付费平台系统项目到底能做吗,新人到底如何入局知识付费网课平台本人九星做知识付费将近也一年了,今天就为大家解析一下知识付费平台项目,讲一下本人做知识付费一年来的心得和经验文章星联微课本人原创,请 ...
公众号+搭建知识付费网课分销平台聚合型玩法解析
知识付费火了,粗略估算了下我自己,去年买书,买课,付费阅读花了好几大千,知识付费正处于风口当中,这点童话是感触颇深的. 为什么知识付费行业会这么火? 1.网络信息太发达,信息严重过载,人们只能通过信息 ...

搭建个人知识付费应用系统-(6)Sanity 集成

Sanity 建模

Sanity 客户端调用封装

Sanity 查询

搭建个人知识付费应用系统-(6)Sanity 集成相关推荐

最新文章

热门文章