组件
内容渲染器
将您的组件从 AST 转换为美妙的模板。
<ContentRenderer> 组件用于渲染通过 queryCollection() 查询获得的文档。
此组件 仅支持
Markdown 文件。属性
| 属性 | 默认值 | 类型 | 描述 |
|---|---|---|---|
value | {} | ParsedContent | 要渲染的文档。 |
tag | 'div' | string | 渲染器元素使用的标签名（如果有使用）。 |
excerpt | false | boolean | 是否仅渲染摘要而不渲染其余内容。 |
components | {} | object | 用于渲染的自定义组件映射。此属性将传递给 Markdown 渲染器，不影响其他文件类型。 |
data | {} | object （必需） | 将注入到 Markdown 内容中的变量映射，用于后续绑定变量。 |
prose | undefined | boolean | 是否渲染 Prose 组件而非 HTML 标签。 |
class | undefined | string 或 object | 用于渲染的根标签的类名。 |
unwrap | false | boolean 或 string | 需要去除包装的标签，多个标签用空格分隔。例如：'ul li'。 |
例子
pages/[...slug].vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('docs').path(route.path).first()
})
</script>
<template>
<ContentRenderer v-if="page" :value="page" />
</template>
处理缺失页面
如果查询的内容缺失，您可以显示自定义的备用提示信息。
pages/[...slug].vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('docs').path(route.path).findOne()
})
</script>
<template>
<template v-if="page">
<ContentRenderer :value="page" />
</template>
<template v-else>
<div class="empty-page">
<h1>页面未找到</h1>
<p>抱歉！您查找的内容不存在。</p>
<NuxtLink to="/">返回首页</NuxtLink>
</div>
</template>
</template>
处理空页面
如果查询的内容为空，您可以显示自定义的备用提示信息。