成功为Sanity添加表格支持，太不容易了🫠

Sanity 官方本身是有 Table 插件的 @sanity/table，而且也有使用说明，但是对于我这种刚听说 Sanity 的用户来讲，拿过来直接就能用起来太难了，可能对于 Sanity 的专业选手这些说明就够了😅。如果你和我一样是初步接触 Sanity，那我这篇文章可以帮你搞清楚添加 Table 支持的每一个步骤，希望能帮到你！

整体来讲，必须要关注两个环节：

1. 写文章：在 Studio 写文章时添加表格，配置插件正常使用，决定如何添加表格；
2. 展示文章：博客文章展示表格，添加代码决定怎么渲染表格数据。

网上的资料都讲的是第一步，思路明确了就正式开始操作。

✨用上 Cali.so 的博客后我才知道的 Sanity，默认情况下，cali 没有为博客添加表格添加和渲染的支持！我这里也是以这个项目为例来讲，可能你的项目与我这里文件及目录结构有些差异但不影响，你应该都能找到对应的代码。

安装插件

根据自己使用的包管理工具安装即可，我这里用的是 pnpm

配置插件

有两个地方需要配置，一个是 sanity 的配置文件，一个是自定义的 schema 文件。

Sanity 配置文件

sanity.config.ts一般就在项目根目录下，先 import 一下 table，然后在 plugins 添加：

Schema 的配置

这里的配置主要是为 studio 中写文章内容的地方添加表格支持，所以需要找到对应文章内容（body）的 schema 定义的文件，我这里的话是在目录 sanity/schemas 下的 blockContent.ts 文件。看代码我这里的文章 body 是一个数组元素，文章的内容被抽象成了一个个的数据块，比如添加的图像、代码块、文本块等。表格也不例外，我们只需要 table 类型的块到定义中，studio 就会支持添加表格：

`pnpm dev` 启动应用服务。打开对应的 studio 页面，选择 post 然后新建一篇文章，找到 Body 的字段，在 Body 编辑框中就能看到已经支持添加表格了，比如添加如下表格。

操作如下视频：

页面渲染支持

但这还不够，虽然可以添加表格了，但文章还不能够正常渲染显示表格，所以我们需要保证让应用知道如何渲染。首先我们得知道表格数据是什么样的，然后根据数据实现可以解析数据并渲染显示表格的组件。数据这里大体展示一下，你大概就知道后面我的代码的意思了，后面按照我的代码添加组件即可。

这里需要添加一个组件文件 PortableTextTable.tsx 放到 components/portable-text中，在这个目录你也能看到其它定义的组件，这个组件就是用来渲染表格数据的，代码如下：

添加了组件，得对应指定渲染关系，找到文件 components/PostPortableText.tsx ，先导入新增的组件，然后在 types 中添加对应表格的绑定关系代码：

💡 思路就是这个思路，根据你项目的对应文件结构修改和添加代码即可。

将第二部分新建的文章其它内容填写完，然后 Publish 之后，到博客文章页面查看效果即可：

添加表格渲染的效果

如果顺利的话，就大功告成了🥳！

总结

总结一下添加新的输入支持的关键步骤：

1. 如果使用别人写的插件，需要先安装，并且在 sanity.config.ts 中配置上插件，如果自定义此步骤略过；
2. 找到文章内容 schema ，添加新的块定义，比如上面表格的 Scehma 配置；
3. 如果是自定义的输入项，可能需要自己实现 Preview 组件用于写文章时的显示渲染；
4. 自定义 PortableText 的渲染显示组件，并绑定到 PortableText.ts 文件中。

据此研究我大受启发，文章就写到这里，我去继续添加 Sanity新的支持了：

• 外链图片（2024年01月06日支持 🤩）
• 外链视频（本文顺利发布的话说明已经添加成功🏅）
• 数学公式（2024年01月06日 支持 🎉）

如果你有搞不懂的可以在文章中评论，我收到提醒就会回复。