组件
<ContentRenderer>
将您的组件从 AST 转换为一个美妙的模板。
The <ContentRenderer> 组件渲染一个来自 queryContent() 查询的文档。
它将使用 <ContentRendererMarkdown> 组件来渲染 .md 文件类型。
其他类型目前将通过 v-slot="{ data }" 传递到默认插槽，或在 <pre /> 标签中渲染。
属性
value: 要渲染的文档。- 类型:
ParsedContent - 默认值:
{}
- 类型:
tag: 如果使用，用于渲染器元素的标签。- 类型:
string - 默认值:
'div'
- 类型:
excerpt: 是否仅渲染摘录而不渲染其余内容。- 类型:
boolean - 默认值:
false
- 类型:
components: 用于渲染的自定义组件映射。此属性将传递给 Markdown 渲染器，不会影响其他文件类型。- 类型:
object - 默认值:
{}
- 类型:
data: 要注入 Markdown 内容以供以后在绑定变量中使用的变量映射。- 类型:
object - 默认值:
{}
- 类型:
插槽
可以通过 v-slot="{ data }" 语法使用 default 插槽来渲染内容。
pages/[...slug].vue
<script setup lang="ts">
const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())
</script>
<template>
<main>
<ContentRenderer :value="data">
<h1>{{ data.title }}</h1>
<ContentRendererMarkdown :value="data" />
</ContentRenderer>
</main>
</template>
当文档为空时，可以使用 empty 插槽显示默认内容。
pages/[...slug].vue
<script setup lang="ts">
const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())
</script>
<template>
<main>
<ContentRenderer :value="data">
<template #empty>
<p>No content found.</p>
</template>
</ContentRenderer>
</main>
</template>
请注意，当您在模板中使用默认插槽和
<ContentRendererMarkdown> 时，需要将 components 传递给 <ContentRendererMarkdown>。components/CustomParagraph.vue
<template>
<div>
<ContentSlot :use="$slots.default" unwrap="p" />
</div>
</template>
content/index.md
::custom-p
this is my custom paragraph
::
pages/[...slug].vue
<script setup lang="ts">
import { CustomParagraph } from '#components';
const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())
const components = {
'custom-p': CustomParagraph
}
</script>
<template>
<main>
<ContentRenderer :value="data">
<h1>{{ data.title }}</h1>
<ContentRendererMarkdown :value="data" :components="components" />
</ContentRenderer>
</main>
</template>