完整功能的 Sanity Studio + Remix Vite 模板

包含电池的 Remix 网站使用 Vite 与 Vercel 的部署预设，并使用 可视化编辑 进行交互式实时预览，位于 演示 中，由嵌入的 Sanity Studio 提供支持。

Presentation tool in Sanity Studio

Sanity 文档 | Remix 文档

安装

从命令行中，将此项目安装为 Remix 模板

npx create-remix@latest --template SimeonGriggs/sanity-remix-template

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

npx remix init

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

npx sanity@latest init --env

然后，启动开发服务器

npm run dev

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

用假数据填充 Studio

您的新 Sanity 项目从没有内容开始。此仓库中包含一个脚本 使用 Faker 生成内容 以便开始使用。

[!WARNING]
此脚本将在每次运行时删除数据集中已有的内容。它只适用于新的数据集中。

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

包括

有用的 Sanity 示例，带有一些有见地的模式

嵌入式 Studio

从 Remix 应用程序本身访问 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 中具有编辑器权限的令牌。点击记录页面上的喜欢/不喜欢按钮将触发 Remix 操作，该操作将向文档发送突变。这是一个示例，说明网站上的用户操作如何触发 Sanity 数据集的更改。

类型化和验证的响应

由 Zod 提供支持

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

动态 OG 图像

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

其他开发选择

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

Sanity Studio

在 Remix 应用程序中访问 https://127.0.0.1:3000/studio。您需要

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

部署

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

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

使用模板

当您运行 npx create-remix@latest 时，会有一些托管选项。您可以再次运行它来创建一个新项目，然后将您的 app/ 文件夹复制到预先配置为目标服务器的新项目中。

cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app