Strapi富文本目录指南：优化内容结构

2024-03-12 22:04:06

Strapi富文本目录指南：让你的内容井井有条

目录：让你的文章轻松导航

目录就像是一篇内容的地图，它可以帮助读者快速找到他们想要的信息。在Strapi中，富文本编辑器提供了强大的功能，可以让你轻松地从内容中提取标题并生成目录。

分步指南

1. 导入组件

第一步是导入BlocksRenderer和BlocksContent组件，它们将用于渲染富文本内容和提取标题。

import { BlocksRenderer, type BlocksContent} from "@strapi/blocks-react-renderer";

2. 提取富文本数据

通过Strapi API请求获取博客数据，然后从响应中提取富文本内容：

const content: BlocksContent = data ? .data ? .attributes ? .content;

3. 提取标题

Strapi富文本内容中的标题被标记为标题块。你需要从这些块中提取

const headings = content
  .filter((block) => block.__component === "header")
  .map((block) => block.header);

4. 生成目录项

遍历提取的标题，为每个标题生成目录项：

const tocItems = headings.map((heading) => {
  return {
    id: heading,
    title: heading,
  };
});

5. 渲染目录

将生成的目录项渲染到你的应用程序中，例如：

<ul>
  {tocItems.map((item) => (
    <li key={item.id}>
      <a href={`#${item.id}`}>{item.title}</a>
    </li>
  ))}
</ul>

提示和注意事项

确保你的富文本内容中使用了适当的标题标签（
、
等）。
为目录项添加锚点，以便单击时跳转到相应标题。
根据你的设计调整目录的样式和布局。

优势

提高内容的可读性和可用性。
为读者提供快速浏览文章内容的便利。
改善网站的搜索引擎优化（SEO）。

示例代码

import { BlocksRenderer, type BlocksContent} from "@strapi/blocks-react-renderer";

const Blog = () => {

  const { data } = useGetBlogsByIdQuery(slug);

  const content: BlocksContent = data ? .data ? .attributes ? .content;

  const headings = content
  .filter((block) => block.__component === "header")
  .map((block) => block.header);

  const tocItems = headings.map((heading) => {
    return {
      id: heading,
      title: heading,
    };
  });

  return (
    <>
      <BlocksRenderer content={content} />
      <ul>
        {tocItems.map((item) => (
          <li key={item.id}>
            <a href={`#${item.id}`}>{item.title}</a>
          </li>
        ))}
      </ul>
    </>
  )
}