使用
渲染内容
以富文本格式渲染 Markdown 文档的主体。
<ContentDoc />
<ContentDoc> 组件获取文档并以富文本格式渲染。
默认情况下，它获取当前路由（$route.path），但可以使用 path 道具将显式路径传递给组件。
创建一个名为 pages/[...slug].vue 的 通配符路由 并添加组件
pages/[...slug].vue
<template>
<main>
<ContentDoc />
</main>
</template>
它将获取与 $route.path 相对应的文档并将其渲染。它还将使用 useContentHead() 部分处理头部管理。
您可以使用 <ContentDoc> 组件通过指定 path 属性来渲染特定文档
app.vue
<template>
<main>
<ContentDoc path="/about" />
</main>
</template>
转到
<ContentDoc> API 部分。<ContentRenderer />
<ContentRenderer> 组件以富文本格式渲染由 queryContent() 返回的 Markdown 文档的主体。如果内容不是 Markdown，它将回退到在 <pre> 标签中渲染内容（源代码）。
<ContentRenderer> 接受包含数据的 value 道具。
app.vue
<script setup>
const { data } = await useAsyncData('hello', () => queryContent('/hello').findOne())
</script>
<template>
<ContentRenderer :value="data" />
</template>
转到
<ContentRenderer> 和 queryContent() API 部分以了解更多信息。