FacebookDocusaurus中⽂⽂档导航和侧边栏
此系列⽂章的应⽤⽰例已发布于 . 可以 Fork 帮助改进或 Star 关注更新. 欢迎 Star.
导航和侧边栏
引⽤⽹站⽂档
如果你想在 docs ⽂件夹中引⽤另⼀个⽂档（或者你通过可选 customDocsPath路径站点配置选项设置的位置），那么你只需要使⽤你想引⽤的⽂档名称。
例如，如果你在 doc2.md 中，⽽你想引⽤ doc1.md：
这⾥引⽤了⼀个 [⽂档](doc1.md).
Docusaurus ⽬前不⽀持嵌套⽂件夹中的⽂件; 只能是在⼀个平⾯⽂件结构中。 我们正在考虑添加对嵌套⽂件夹的⽀持。
⽂档如何链接
docs 中的新 markdown ⽂件将在⽹站上显⽰为页⾯。 这些⽂档的链接⾸先通过在每个⽂档的头部使⽤ i
d 来创建。 如果没有 id 字段，那么⽂件的名称将作为链接名称。
例如，创建诸如 "docs/getting-started.md" 之类的空⽂件将使新页⾯ URL 成为 /docs/getting-started.html。
假设您将其添加到您的⽂档中：
---
id: intro
title: ⼊门
---
这是⽂档的 *新内容*...
如果您在⽂件的标记标题中设置了 id 字段，那么⽂档将从 /docs/intro.html 形式的 URL 访问。
您需要⼀个 id 字段才能将⽂档添加到侧边栏。
添加⽂档到侧边栏
很多时候，您将需要添加⼀个⽂档到侧边栏，这个侧边栏将与⽹站顶部导航栏中的⼀个标题相关联。 最常见的补充⼯具栏，以及在Docusaurus 初始化时安装的⼯具栏是 docs ⼯具栏。
"docs" 只是⼀个名字。 它没有继承的意义。 你可以随意更改。
您可以在 website/sidebars.json ⽂件中配置侧边栏的内容以及⽂档的顺序。
在将⽂档添加到 website/sidebars.json 之前，只能通过直接的URL访问它们。 该⽂档不会显⽰在任何侧边栏。
在 sidebars.json 中，将在⽂档头中使⽤的 id 添加到现有的侧边栏/类别中。 在下⾯的情况下，docs 是侧边栏的名称，Getting Started 是侧边栏中的⼀个类别。
{
"docs": {
"Getting Started": [
"getting-started"
或者你可以在侧边栏中创建⼀个新的类别：
{
js导航栏下拉菜单
"docs": {
...
"My New Sidebar Category": [
"getting-started"
],
...
添加新侧边栏
您也可以将⽂档放在新的侧边栏中。 在下⾯的例⼦中，我们在 sidebars.json ⾥⾯创建⼀个名为 My Example Category 的类别为 examples-sidebar 的⼯具栏，⾥⾯包含⼀个 id 为 my-examples 的⽂档。
{
"examples-sidebar": {
"My Example Category": [
"my-examples"
],
},
...
重要的是要注意，直到你，它将会被隐藏。
添加到⽹站导航栏
要展开侧边栏，您需要将可点击的标签添加到⽹站顶部的⽹站导航栏中。 您可以添加⽂档，页⾯和外部链接。
添加⽂档
通过将其到 sidebars.json，为该⽹站创建⼀个新的侧边栏后，您可以通过编辑 siteConfig.js 的 headerLinks 字段来从顶部导航栏中展开新的侧边栏。
headerLinks: [
...
{ doc: 'my-examples', label: 'Examples' },
...
],
⼀个名为 Examples 的标签将被添加到⽹站导航栏中，当您在⽹站顶部点击它时，将会显⽰ examples-sidebar，默认⽂档将是 my-examples。
添加⾃定义页⾯
要将⾃定义页⾯添加到⽹站导航栏，可将条⽬添加到 siteConfig.js 的 headerLinks 中。 例如，如果我们在 website/pages/help.js 中有⼀个页⾯，我们可以通过添加以下内容来链接到它：
headerLinks: [
...
{ page: 'help', label: 'Help' },
...
],
⼀个名为 Help 的标签将被添加到站点导航栏中，当您在站点顶部点击它时，将显⽰ help.js 页⾯的内容。
添加外部链接
⾃定义链接可以通过 siteConfig.js 中的以下条⽬添加到⽹站导航栏中：
headerLinks: [
...
{ href: 'github/facebook/Docusaurus', label: 'GitHub' },
...
],
⼀个名为 GitHub 的标签将被添加到站点导航栏中，当您在站点顶部点击它时，外部链接的内容将被显⽰。
要在新选项卡中打开外部链接，请在标题链接配置中提供⼀个 external: true 标志。
⽹站导航栏定位
在⽹站顶部的⽹站导航栏中显⽰搜索和语⾔下拉列表元素时，您的控制权限有限。
搜索
如果在您的⽹站上启⽤搜索，您的搜索栏将显⽰在您的链接的右侧。 如果您想要在搜索栏中的链接之间添加⼀个搜索条⽬，在 headerLinks 配置数组中：
headerLinks: [
{ doc: 'foo', label: 'Foo' },
{ search: true },
{ doc: 'bar', label: 'Bar' },
],
语⾔下拉菜单
如果在您的⽹站上启⽤了翻译，则语⾔下拉菜单将显⽰在您的链接的右侧（如果启⽤搜索，则会显⽰在搜索栏的左侧）。 如果要将语⾔选择放在标题中的链接之间，请在 headerLinks 配置数组中添加⼀个语⾔条⽬：
headerLinks: [
{ doc: 'foo', label: 'Foo' },
{ languages: true },
{ doc: 'bar', label: 'Bar' },
],
如果这篇⽂章对您有帮助, 感谢 下⽅点赞 或 Star ⽀持, 谢谢.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。