Sanity Super Pane 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00326/article/details/142276944

Sanity Super Pane 项目教程

sanity-super-pane The Sanity Desk Tool Pane with Super Powers 项目地址: https://gitcode.com/gh_mirrors/sa/sanity-super-pane

1. 项目介绍

Sanity Super Pane 是一个开源项目，旨在增强 Sanity Studio 中的文档类型列表面板的功能。它通过提供更强大的批量编辑和快速扫描功能，同时保持 Sanity 的实时编辑和响应性，来替代传统的文档类型列表面板。Super Pane 的目标是让编辑体验更加高效和直观，同时保持与 Sanity 生态系统的兼容性。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 Yarn。然后，通过以下命令安装 sanity-super-pane：

yarn add sanity-super-pane@alpha

集成到 Sanity Studio

在你的 Sanity Studio 项目中，使用结构构建器（structure builder）来集成 Super Pane。以下是一个简单的示例：

import S from '@sanity/desk-tool/structure-builder';
import { createSuperPane } from 'sanity-super-pane';

export default () =>
  S.list()
    .title('Base')
    .items([
      S.listItem()
        .title('Normal List')
        .child(createSuperPane('movie', S)),
    ]);

本地开发

如果你想要在本地开发环境中运行 Super Pane，可以按照以下步骤进行设置：

克隆仓库：

git clone https://github.com/ricokahler/sanity-super-pane.git
cd sanity-super-pane

安装依赖：
```
npm install
```

创建示例项目：

使用 Sanity CLI 创建一个示例项目，并获取项目 ID：

npx sanity init -y \
  --create-project "super-pane-dev" \
  --dataset production \
  --visibility private \
  --template moviedb \
  --output-path /temp-movie-project

获取项目 ID：

cat /temp-movie-project/sanity.json | grep projectId

配置环境变量：

创建一个 .env.development 文件，并添加项目 ID：
```
echo SANITY_STUDIO_API_PROJECT_ID="ENTER_PROJECT_ID" > .env.development
```
启动开发服务器：
```
npm start
```