Lzh on GitHub

ContentRenderer

将你的组件从抽象语法树 (AST) 转换为精美的模板。

<ContentRenderer> 组件用于渲染通过 queryCollections() 查询得到的文档。

此组件仅适用于 Markdown 文件。

Props

PropDefaultTypeDescription
value{}ParsedContent要渲染的文档。
tag'div'string如果使用了渲染器元素，则要使用的标签。
excerptfalseboolean是否仅渲染摘要而不渲染其余内容。
components{}object用于渲染的自定义组件的映射。此 prop 将传递给 Markdown 渲染器，并且不会影响其他文件类型。
data{}object (required)一个变量映射，用于注入到 Markdown 内容中，以便稍后在绑定变量时使用。
proseundefinedboolean是否渲染 Prose 组件而不是 HTML 标签。
classundefinedstring or object用于渲染的根标签。
unwrapfalseboolean or 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>Page Not Found</h1>
      <p>Oops! The content you're looking for doesn't exist.</p>
      <NuxtLink to="/">Go back home</NuxtLink>
    </div>
  </template>
</template>

处理空页面

如果查询到的内容为 空，你可以显示一个 自定义的回退消息。