Nuxt Content中_dir.yml文件在Navigation中不生效？用法解惑

你确实误解了_dir.yml的用途——它不是用来设置单个页面的浏览器标题，而是专门用于配置Nuxt Content站点导航结构中的目录节点信息。

1. _dir.yml的实际作用 #

_dir.yml是给Nuxt Content的导航生成器服务的，用来定义目录在导航菜单里的展示属性，包括但不限于：

• 目录在导航中的显示名称（title字段）
• 目录的导航图标（navigation.icon字段）
• 目录在导航中的排序优先级
• 是否在导航中隐藏该目录

你设置的title: 'My awesome directory'会让这个目录在导航菜单里显示为"My awesome directory"，而不会影响单个文章页面的浏览器标题。

2. 单个页面浏览器标题的正确设置方式 #

单个Markdown页面的浏览器标题，默认会取文章内的第一个一级标题（也就是你写的# welcome）。如果需要自定义，要在Markdown文件的Frontmatter中设置title字段：

---
title: 'My Custom Page Title'
---
# welcome

这样访问http://localhost:3000/new-dir/new-md时，浏览器标题就会显示你自定义的内容。

3. 验证_dir.yml的效果 #

要看到_dir.yml的实际作用，你需要在项目中使用Nuxt Content提供的useNavigation()组合式函数生成导航菜单。示例代码如下：

<template>
  <nav>
    <ul>
      <li v-for="item in navigation" :key="item._path">
        <NuxtLink :to="item._path">
          {{ item.icon }} {{ item.title }}
        </NuxtLink>
      </li>
    </ul>
  </nav>
</template>

<script setup>
const { navigation } = useNavigation()
</script>

此时导航菜单里的new-dir目录会显示为"My awesome directory"，并带有你设置的📁图标。

内容的提问来源于stack exchange，提问作者hamid-davodi