`<ContentDoc>`

该 <ContentDoc> 组件获取并渲染单个文档。

可以使用 path prop 将显式路径传递给组件。如果未提供，则将使用 $route.path。

它在后台使用 <ContentRenderer> 和 <ContentQuery>。

道具

tag: 用于渲染器元素的标签（如果未提供默认插槽）。
- 类型: string
- 默认值: 'div'
path: 要从内容源加载的内容的路径。
- 类型: string
- 默认值: $route.path
excerpt: 是否渲染摘要。
- 类型: boolean
- 默认值: false
query: 要传递给 queryContent() 的查询。
- 类型: QueryBuilderParams
- 默认值: undefined
head: 切换 useContentHead 的使用。
- 类型: boolean
- 默认值: true

插槽

该 default 插槽可用于通过 v-slot="{ data }" 语法渲染内容

pages/dataviz.vue

<template>
  <main>
    <ContentDoc v-slot="{ doc }">
      <article>
        <h1>{{ doc.title }}</h1>
        <ContentRenderer :value="doc" />
      </article>
    </ContentDoc>
  </main>
</template>

该 not-found 插槽可用于在未找到文档时使用

pages/dataviz.vue

<template>
  <main>
    <ContentDoc>
      <template #not-found>
        <h1>Document not found</h1>
      </template>
    </ContentDoc>
  </main>
</template>

该 empty 插槽可用于在渲染文档之前显示默认内容。

pages/dataviz.vue

<template>
  <main>
    <ContentDoc>
      <template #empty>
        <h1>Document is empty</h1>
      </template>
    </ContentDoc>
  </main>
</template>

示例

默认

pages/[...slug].vue

<template>
  <main>
    <!-- Similar to <ContentDoc :path="$route.path" /> -->
    <ContentDoc />
  </main>
</template>

显式路径

app.vue

<template>
  <main>
    <ContentDoc path="/about" />
  </main>
</template>

插槽

pages/[...slug].vue

<template>
  <main>
    <ContentDoc>
      <template v-slot="{ doc }">
        <article>
          <h1>{{ doc.title }}</h1>
          <ContentRenderer :value="doc" />
        </article>
      </template>
      <template #not-found>
        <h1>Document not found</h1>
      </template>
    </ContentDoc>
  </main>
</template>

searchContent()

将您的组件从 AST 转换为一个很棒的模板。