要在Astro项目中正确地呈现 Prismic 富文本字段中的 HTML 标记,需要在代码中使用 Astro 的内置 html
组件来渲染富文本内容。使用此组件会自动在富文本中解析并呈现 HTML 标记,而无需手动转义。以下是示例代码:
import { useQuery } from '@apollo/client';
import { html } from 'https://cdn.skypack.dev/@astrojs/renderer-remark';
const Index = ({ data }) => {
const { header, body } = data.page.data;
return (
{/* 此处使用 Astro 的 HTML 组件来呈现富文本内容 */}
{html(header)}
{html(body)}
);
};
export const loader = async ({ request }) => {
const query = gql`
query {
page {
data {
header
body
}
}
}
`;
const { data } = await useQuery(query, { context: { request } });
return {
data,
};
};
export default Index;