为什么我的 Astro 网站显示内容数据的 HTML 标签？

Question

我对 Astro 还很陌生。被这个特定问题困扰了这么久。

正如标题所提到的，如果没有正确的格式，我无法正确呈现内容数据。它显示 html 标签而不是它应该完成的格式。下面是我的 .astro 文件。另一件值得一提的重要事情是我为我的 Astro 项目使用了预定义的模板。所以不确定这是否相关。

提前致谢。

---
import { contentfulClient } from "../../lib/contentful";
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
import type { BlogPost } from "../../lib/contentful";

export async function getStaticPaths() {
  const entries = await contentfulClient.getEntries<BlogPost>({
    content_type: "blogPost",
  });

  const pages = entries.items.map((item) => ({
    params: { slug: item.fields.slug },
    props: {
      title: item.fields.title,
      content: documentToHtmlString(item.fields.content),
      date: new Date(item.fields.date).toLocaleDateString(),
      description: item.fields.description,
      slug: item.fields.slug,
      tags: item.metadata.tags
    },
  }));
  return pages;
}
const { title, content, date, description, slug, tags } = Astro.props; 
---

<BaseLayout title={title} description={description}>
    <div class="stack gap-20">
        <div class="stack gap-15">
            <main class="wrapper">
                <div class="stack gap-10 content">
                    <div class="content">
                        {content}
                    </div>
                </div>
            </main>
            
        </div>
        <ContactCTA />
    </div>
</BaseLayout>

Answer 1

其实你只需要把内容按照下面的格式输入即可。

<article set:html={content} />

这解决了我的问题。