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