文件组织

Nextra 首先从 pages 目录中收集所有 Markdown 文件和配置，然后生成整个站点的“页面映射信息”，以渲染诸如导航栏和侧边栏之类的内容。

默认行为

默认情况下，页面映射包含所有 .md 和 .mdx 文件名以及目录结构，并按字母顺序排序。然后，Nextra 将使用 title 包从文件名获取格式化的页面名称。

例如，如果您有以下结构

解析后的页面映射将为（注意所有名称都已按字母顺序排序）

[
  {
    "name": "About",
    "children": [{ "name": "Index" }, { "name": "Legal" }]
  },
  { "name": "Contact" },
  { "name": "Index" }
]

全局页面映射将由 Nextra 导入到每个页面。然后，配置的主题将使用该页面映射渲染实际的 UI。

_meta.js

自定义每个页面的标题，而不是仅仅依赖文件名，这很常见。标题为“Index”的页面缺乏清晰度。最好分配一个有意义的标题，准确地反映内容，例如“首页”。

这就是 _meta.js 文件的作用。您可以在每个目录中都放置一个 _meta.js 文件，它将用于覆盖每个页面的默认配置。

允许的扩展名

也可以对 _meta 文件使用 .jsx、.ts 和 .tsx 扩展名（例如 _meta.ts）。

按字母顺序排序页面

您可以使用 ESLint 的内置 sort-keys 规则，在 _meta 文件顶部添加 /* eslint sort-keys: error */ 注释，您将收到关于错误顺序的 ESLint 错误。

与 next-sitemap 结合使用

如果您使用的是 next-sitemap，您可能需要在 next-sitemap.config.js 文件中添加 exclude: ['*/_meta']，因为它 很难从构建中排除 _meta 文件。

允许的键值

_meta 键的类型应始终为 string，而不是 number，因为对于 JavaScript 对象，数字始终首先排序。

以下

export default {
  foo: '',
  1992_10_21: '',
  1: ''
}

将转换为

export default {
  '1': '',
  '19921021': '',
  foo: ''
}

示例

将此内容放入您的 pages/_meta.js 文件中

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  about: 'About Us'
}

它告诉 Nextra 每个页面的顺序以及正确的标题。

或者，您可以使用 title 属性并在其中进行其他配置。

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  about: {
    title: 'About Us'
    // ... extra configurations
  }
}

额外的配置作为附加信息传递给主题。查看相应的页面以获取更多信息。