从Sanity获取干净的正文文本：告别杂乱无章，拥抱可读性！

2024-03-18 03:00:49

如何从 Sanity 中获取干净的正文文本

问题陈述

从 Sanity 中获取正文文本时，经常会遇到拉取到不必要的元素的问题。这会使输出结果杂乱无章，难以阅读。

解决方法

解决此问题的方法是使用 body.children 而不是 body。body.children 返回一个包含所有正文块的数组。然后，你可以循环遍历这些块并提取文本内容。

let bodyText = "";
post.body.children.forEach((block) => {
  bodyText += block.text;
});

代码示例

以下是更新后的代码示例：

<template>
  <Header />
  <h1>This is the blog page!</h1>
  <div v-for="post in posts" :key="post._id" class="post">
    <div class="post-img">
      <img :src="$urlFor(post.mainImage).url()" :alt="`${post.title}`" />
    </div>
    <div class="post-text">
      <div class="post-text__title">
        <a :href="`${post.slug.current}`"
          ><h2>{{ post.title }}</h2></a
        >
      </div>
      <div class="post-text__description">
        <p>{{ bodyText }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const query = groq`*[ _type == "post" ]{title, slug, mainImage, body} | order(_publishedAt desc)`;
const { data: posts } = await useSanityQuery(query);

let bodyText = "";
posts.forEach((post) => {
  post.body.children.forEach((block) => {
    bodyText += block.text;
  });
});
</script>