用途:在各前端框架中渲染与序列化 Portable Text(PT)内容,基于 @portabletext/* 库族。所有库遵循同一组件映射模式:提供 components 对象,将 PT 节点类型映射到框架专属渲染器。
主要能力:支持 React/Next.js(@portabletext/react 或 next-sanity)、Svelte/SvelteKit(@portabletext/svelte)、Vue/Nuxt(@portabletext/vue)、Astro(astro-portabletext)、服务端 HTML(@portabletext/to-html)、Markdown(@portabletext/markdown)、纯文本提取(@portabletext/toolkit)。社区序列化器还包括 React Native、React PDF、Solid、Qwik、Shopify Liquid、PHP、Python、C#/.NET、Dart/Flutter。
PT 结构:PT 是块数组,每个块含 _type、可选 style、children(span)、markDefs、listItem、level。span 含 text 与 marks。marks 分两类:装饰器(如 strong、em、underline、code 字符串)与注解(引用 markDefs 的键,如链接、内部引用)。
组件映射键:types(自定义块/内联类型,如 image、code、CTA,props 为 value)、marks(装饰器与注解,props 为 children 与 value)、block(块样式,props 为 children)、list(列表包裹,props 为 children)、listItem(列表项,props 为 children)、hardBreak(块内换行)。
使用方式:按框架查阅对应规则文件(rules/react.md、rules/svelte.md、rules/vue.md、rules/astro.md、rules/html.md、rules/markdown.md、rules/plain-text.md)。自定义类型需显式提供组件,否则不会渲染。React/Vue 中应将 components 定义在渲染函数外或做记忆化,避免重复渲染。各库支持 onMissingComponent 控制未知类型行为(false 抑制警告,或自定义函数记录上报)。用 GROQ 查询 PT 时应展开自定义块内的引用,例如 body[]{..., _type == "image" => {..., asset->}, markDefs[]{..., _type == "internalLink" => {..., "slug": @.reference->slug.current}}}。
限制:默认仅处理标准块,自定义类型必须显式映射;具体安装命令与版本信息暂未提供。