如何展示Sanity富文本编辑器编写的博客前100字符？

问题背景 #

开发博客时，此前使用普通文本可通过substring(0, 100)展示前100字符的摘要，但从Sanity API获取的富文本内容为数组格式，直接调用substring会报错。当前React代码通过BlockContent渲染完整富文本，但列表页仅需显示开头部分内容。

解决方案 #

方案1：在GROQ查询中生成摘要

利用Sanity的GROQ查询直接处理富文本数组，提取并截断文本，前端直接获取处理后的字符串。

修改查询语句：

const query = `*[_type == "blog"] | order(publishedAt desc) {
  title,
  slug,
  publishedAt,
  // 拼接所有文本内容并截断前100字符
  excerpt: string::trim(string::join(content[].children[].text, ""))[0..99] + "..."
}`

前端渲染时直接使用blog.excerpt：

<p class="blog-content">{blog.excerpt}</p>

方案2：前端处理富文本数组

编写工具函数遍历富文本数组，提取所有文本内容后再截断。

添加工具函数：

// 提取富文本文本并生成指定长度的摘要
const getExcerpt = (blocks, maxLength = 100) => {
  let fullText = '';
  blocks.forEach(block => {
    block.children?.forEach(child => {
      if (child.text) fullText += child.text;
    });
  });
  const trimmedText = fullText.trim();
  return trimmedText.length > maxLength 
    ? `${trimmedText.substring(0, maxLength)}...` 
    : trimmedText;
};

渲染时调用函数：

<p class="blog-content">{getExcerpt(blog.content)}</p>

替换原代码中的渲染部分 #

将原代码中使用BlockContent渲染完整内容的部分，替换为上述任一方案的摘要渲染即可。

内容的提问来源于stack exchange，提问作者Naveer