功能全面的 Sanity Studio + React Router Vite 模板

[!WARNING]
此模板已更新到 React Router 7，但目前无法部署到 Vercel，因为他们的构建插件尚未更新。请自行更新以适应您选择的服务器。当 Vercel 更新构建插件时，它将会被更新。

--

开箱即用的 React Router 7 网站，使用 Vite 并具有 Vercel 的部署预设，通过嵌入式 Sanity Studio 支持 可视化编辑，以便在 演示文稿 中进行交互式实时预览。

Presentation tool in Sanity Studio

Sanity 文档 | React Router 文档

安装

从命令行，将此项目安装为 React Router 模板

npx create-react-router@latest --template SimeonGriggs/sanity-react-router-template

此模板附带一个初始化脚本，如果您选择不运行它，您可以稍后使用以下命令运行它

npx react-router init

此脚本应使用新的或现有 Sanity 项目的 ID 和数据集名称的详细信息填充您的 .env 文件，并创建会话密钥和一个具有查看者权限的 API 令牌。如果初始化脚本已被删除，您可以通过运行以下命令轻松重置您的 .env 文件

npx sanity@latest init --env

然后，启动开发服务器

npm run dev

现在打开 localhost:5173/studio 上的 Studio 并开始创作内容！

使用虚假内容填充 Studio

您的新 Sanity 项目开始时没有任何内容。此存储库中包含一个脚本，使用 Faker 生成内容，以便开始使用。

[!WARNING]
此脚本每次运行时都会删除数据集中的现有内容。它仅适用于新数据集。

npx sanity@latest exec ./scripts/createData.ts --with-user-token

包括

有用的 Sanity 示例，其中包含少量个人风格的模式

嵌入式 Studio

从 React Router 应用程序本身访问 Sanity Studio v3。现在整个 Studio 都是一个组件，它位于 /studio 路由。

在演示文稿中进行交互式实时预览的可视化编辑

由 演示文稿 和 @sanity/react-loader 提供支持

Sanity Studio 内的经过身份验证的用户可以使用演示文稿工具浏览网站并定位要编辑的特定字段 - 并实时查看更改。

演示文稿使用的资源路由 (/resource/preview) 将设置会话令牌，以便即使在演示文稿之外也可以看到叠加层。

预配置的 Studio

Studio 已预配置了基本的“唱片集”架构，以及一个基本的工作区结构，以在视图窗格中包含实时预览。

可移植文本组件

由 @portabletext/react 提供支持

此组件允许自定义和扩展可移植文本在您的应用程序中的呈现方式。Sanity 中的富文本字段是一个对象数组。内容即数据！

图像 URL 构建器

由 @sanity/image-url 提供支持

<RecordCover /> 组件有一个示例，说明如何仅基于资产的 ID 生成完整的 Sanity CDN 资产 URL。这很有用，因为我们不需要在查询中解析完整的图像文档。

示例装饰输入

由 @sanity/ui 提供支持

创建“装饰”输入从未像在 Sanity Studio v3 中那样容易。./app/sanity/components/Duration.tsx 是一个 13 行的示例，其中一个 number 字段类型以秒为单位存储持续时间，也可以以分钟为单位进行可视化。开发人员只需付出极少的努力，即可实现作者的最大影响。

Sanity 客户端变更

由 @sanity/client 提供支持

需要 .env 中具有编辑器权限的令牌。单击唱片页上的赞/踩按钮将触发一个 React Router 操作，该操作将向文档发送变更。这是一个示例，说明网站上的用户操作如何触发 Sanity 数据集上的更改。

类型化和验证的响应

由 Zod 提供支持

./app/routes/$slug.tsx 中 Sanity 查询的结果将使用 Zod 验证器进行解析。这确保内容始终在运行时以预期的形状返回，并自动生成从 loader 馈送到 useLoaderData() 中的类型。

动态 OG 图像

record 类型使用 ~/routes/resource.og 资源路由生成动态开放图谱图像。

其他开发选择

  • eslint 和 Prettier
  • 带有 @sanity/demo 预设的 Tailwind CSS
  • Tailwind Prose 和 Prettier 插件

Sanity Studio

在您的 React Router 应用程序中访问 https://127.0.0.1:5173/studio。您将需要

  1. 将 .env.template 重命名为 .env
  2. 从您的 Sanity Manage 中的项目设置正确的项目 ID、数据集名称和首选 API 版本
  3. 将 https://127.0.0.1:5173 添加到该项目的 CORS 设置中，并具有“允许凭据”权限

部署

此 React Router 模板专门配置为在 Vercel 上托管。

  1. 将此存储库检入您自己的源代码控制（如 GitHub）并部署到 Vercel。