页面配置
在 Nextra 中，站点和页面结构可以通过共置的 _meta.js 文件进行配置。在文档主题中，提供了一些额外的选项来进一步自定义它。
这些配置会影响主题的整体布局，特别是导航栏和侧边栏。
阅读有关 Nextra 的 _meta.js 文件的更多信息 此处。
页面
在侧边栏中显示的页面的标题和顺序应在 _meta.js 文件中配置为键值对。例如，如果您有以下文件结构
- _meta.js
- about.mdx
- contact.mdx
- index.mdx
您可以通过 _meta.js 文件定义页面在侧边栏中的显示方式
export default {
index: 'My Homepage',
contact: 'Contact Us',
about: 'About Us'
}如果任何路由未在 _meta.js 文件中列出，它们将附加到侧边栏的末尾并按字母顺序排序，标题将使用 Title 根据文件名进行格式化。
文件夹
文件夹的配置方式与页面相同。例如
- _meta.js
- apple.mdx
- banana.mdx
- _meta.js
- about.mdx
- contact.mdx
- index.mdx
顶级 _meta.js 文件包含顶级页面和文件夹的元信息
export default {
index: 'My Homepage',
contact: 'Contact Us',
fruits: 'Delicious Fruits',
about: 'About Us'
}嵌套的 _meta.js 文件包含同一文件夹中页面的元信息
export default {
apple: 'Apple',
banana: 'Banana'
}这样，页面信息就会在目录中进行分组。您可以移动目录，而无需更改 _meta.js 文件。
包含索引页的文件夹
如果我想拥有一个包含索引页的文件夹怎么办？我们可以在与文件夹同名且在同一目录中添加一个 MDX 页面。假设我们想在上面的示例中添加 /fruits 路由，我们可以在 pages 中创建一个 fruits.mdx 文件
- _meta.js
- apple.mdx
- banana.mdx
- _meta.js
- about.mdx
- contact.mdx
- fruits.mdx
- index.mdx
然后 Nextra 就会知道 _meta.js 中的 fruits 键定义了一个包含索引页的文件夹。如果您在侧边栏中单击该文件夹，它将打开该文件夹并同时显示 fruits.mdx 页面。
外部链接
您可以通过在 _meta.js 中添加包含 href 的项目来向侧边栏添加外部链接
export default {
index: 'My Homepage',
contact: 'Contact Us',
fruits: 'Delicious Fruits',
about: 'About Us',
github_link: {
title: 'Nextra',
href: 'https://github.com/shuding/nextra'
}
}要始终在新标签页中打开链接，请启用 "newWindow": true 选项
export default {
index: 'My Homepage',
contact: 'Contact Us',
fruits: 'Delicious Fruits',
about: 'About Us',
github_link: {
title: 'Nextra',
href: 'https://github.com/shuding/nextra',
newWindow: true
}
}您也可以使用此选项链接到相对内部链接。
隐藏路由
默认情况下，文件系统中的所有 MDX 路由都将在侧边栏中显示。但是，您可以使用 "display": "hidden" 配置隐藏特定页面或文件夹
export default {
index: 'My Homepage',
contact: {
display: 'hidden'
},
about: 'About Us'
}该页面仍然可以通过 /contact URL 访问，但它不会显示在侧边栏中。
导航栏项目
子文档
通过将顶级页面或文件夹定义为 "type": "page"，它将作为导航栏上的特殊页面显示，而不是侧边栏。使用此功能，您可以拥有多个“子文档”，以及始终可见的特殊页面或链接，例如“联系我们”。
例如，您可以在项目中拥有 2 个文档文件夹 frameworks 和 fruits
- react.mdx
- svelte.mdx
- vue.mdx
- apple.mdx
- banana.mdx
- _meta.js
- about.mdx
- index.mdx
在您的顶级 _meta.js 文件中，您可以将所有内容设置为页面，而不是普通的侧边栏项目
export default {
index: {
title: 'Home',
type: 'page'
},
frameworks: {
title: 'Frameworks',
type: 'page'
},
fruits: {
title: 'Fruits',
type: 'page'
},
about: {
title: 'About',
type: 'page'
}
}它看起来像这样
您还可以使用 "display": "hidden" 选项从导航栏隐藏 Home 等链接。
菜单
您还可以使用 "type": "menu" 和 "items" 选项向导航栏添加菜单
export default {
company: {
title: 'Company',
type: 'menu',
items: {
about: {
title: 'About',
href: '/about'
},
contact: {
title: 'Contact Us',
href: 'mailto:[email protected]'
}
}
}
}链接
与 外部链接 选项相同，您也可以在导航栏中使用外部链接
export default {
index: {
title: 'Home',
type: 'page'
},
about: {
title: 'About',
type: 'page'
},
contact: {
title: 'Contact Us',
type: 'page',
href: 'https://example.com/contact',
newWindow: true
}
}回退
在上面的 子文档 示例中，我们必须为每个页面定义 "type": "page" 选项。为了简化操作，您可以使用 "*" 键为该文件夹中的所有项目定义回退配置
export default {
'*': {
type: 'page'
},
index: 'Home',
frameworks: 'Frameworks',
fruits: 'Fruits',
about: 'About'
}它们是等效的，其中所有项目都设置了 "type": "page"。
分隔符
您可以使用一个带有 "type": "separator" 的“占位符”项目在侧边栏中的项目之间创建分隔线
export default {
index: 'My Homepage',
'---': {
type: 'separator'
},
contact: 'Contact Us'
}使用 JSX 元素更改侧边栏中标题和分隔线的外观。
高级
主题组件
您可以使用 "theme" 选项为每个页面配置主题。例如，您可以为特定页面禁用或启用特定组件
export default {
index: {
title: 'Home',
theme: {
breadcrumb: false,
footer: true,
sidebar: false,
toc: true,
pagination: false
}
}
}如果设置为文件夹，此选项将由所有子页面继承。
布局
默认情况下，每个页面在其主题配置中都有 "layout": "default"，这是默认行为。
原始布局
默认情况下，Nextra 会在内容容器内使用主题组件渲染 MDX 内容（例如 h1、h2、h3 等）。您可以使用 "raw" 布局让 Nextra 不向内容注入任何样式
export default {
index: {
title: 'Home',
theme: {
layout: 'raw'
}
}
}完整布局
您可能希望使用完整容器宽度和高度渲染某些页面，但保留所有其他样式。您可以使用 "full" 布局来实现
export default {
index: {
title: 'Home',
theme: {
layout: 'full'
}
}
}排版
"typesetting" 选项控制排版细节，如字体特性、标题样式以及 li 和 code 等组件。文档主题中提供了 "default" 和 "article" 排版。
默认选项适用于大多数情况（如文档），但您可以使用 "article" 排版使其看起来像一个优雅的文章页面
export default {
about: {
title: 'About Us',
theme: {
typesetting: 'article'
}
}
}