组件

<ContentNavigation>

从您的内容构建复杂的导航从未如此容易。

<ContentNavigation> 是一个无渲染组件，用于简化对 导航 的访问。

components/Navbar.vue
<template>
  <nav>
    <ContentNavigation v-slot="{ navigation }">
      <ul>
        <li v-for="link of navigation" :key="link._path">
          <NuxtLink :to="link._path">{{ link.title }}</NuxtLink>
        </li>
      </ul>
    </ContentNavigation>
  </nav>
</template>

道具

  • query: 要传递给 fetchContentNavigation() 的查询。
    • 类型: QueryBuilderParams | QueryBuilder
    • 默认: undefined

插槽

可以使用 default 插槽来使用 v-slot="{ navigation }" 语法渲染内容。

查询

通过提供 query 道具，您可以自定义用于导航的内容。

在这里，我们传递一个 QueryBuilder 实例。

<script setup>
const catsQuery = queryContent('cats')
/*
// If you'd prefer to pass along raw `QueryBuilderParams`:
const catsQuery = {
  where: [
    { _path: /^\/cats/ },
  ],
}
*/
</script>

<template>
<ContentNavigation v-slot="{ navigation }" :query="catsQuery">
  <NuxtLink
    v-for="link of navigation"
    :key="link._path"
    :to="link._path"
  >
    {{ link.navTitle || link.title }}
  </NuxtLink>
</ContentNavigation>
</template>

<ContentList>

使用组件查询内容的最快速方式。

<ContentQuery>

查询和显示内容的最快速方式。