自管理导航

Nuxt Content 提供了一个组件和一个组合式函数，用于基于 content/ 目录结构和文件显示导航。

基于生成的 _id 和 _path 键，Nuxt Content 为你的内容生成整个导航结构。

它允许你创建高级导航组件，而无需维护任何与其相关的查询逻辑。

结构

导航对象可以被视为一棵树，它以 JSON 格式表示你的内容源的结构。

它分为两种类型的节点：页面 和 目录。

content/
  my-directory/
    page.md

自定义键

你可以在内容文件的首部信息中使用 navigation 属性向导航对象添加键。

---
navigation:
  title: 'Home'
  icon: '🏡'
---

# Welcome

或者，导航还允许你通过 _dir.yml 文件配置目录节点。

它允许你覆盖导航中目录节点的 title 和自定义属性。

content/
  my-directory/
    _dir.yml
    page.md

如果你想使用首部信息中的顶级键包含在导航对象中，请在 nuxt.config 中使用 content.navigation.fields 属性。

defineNuxtConfig({
  content: {
    navigation: {
      fields: ['author', 'publishedAt']
    }
  }
})

排除

在页面的 首部信息 中设置 navigation: false 以将其过滤掉。

---
navigation: false
---

此模式在 _dir.yml 文件中也有效，允许你过滤掉内容目录和文件。

navigation: false

你还可以使用 _ 内容前缀来排除内容目录和文件。

content/
  _hidden-directory/
    page.md
    index.md
  not-hidden-directory/
    _dir.yml
    index.md
    page.md

嵌套导航

你可以将 queryContent() 实例传递给 fetchContentNavigation() 实用程序以过滤返回的项目。

这允许创建导航对象，其起点基于特定的内容目录。

const query = queryContent({
  where: {
    _path: { $contains: '/your/navigation/starting/point' }
  }
})