据我所知,Docusaurus 支持自定义页面,但是有没有办法在一个 Docusaurus 项目中拥有两个文档?
原始导航栏项目有:
- 文档
- 博客
- ...
我想要这样的东西:
- 文档 1
- 文档 2
- 博客
- ...
我知道我可以在一个文档中创建许多子文件夹,但出于某种原因,我想要一个两个文档结构,这为我提供了一种更简洁的方式来访问文档。
如果 Docusaurus 目前无法提供此功能,请问是否有其他文档框架提供此功能?
据我所知,Docusaurus 支持自定义页面,但是有没有办法在一个 Docusaurus 项目中拥有两个文档?
原始导航栏项目有:
我想要这样的东西:
我知道我可以在一个文档中创建许多子文件夹,但出于某种原因,我想要一个两个文档结构,这为我提供了一种更简洁的方式来访问文档。
如果 Docusaurus 目前无法提供此功能,请问是否有其他文档框架提供此功能?
您需要使用plugin-content-docs。
首先,创建另一个docs
文件夹,如docs
, docs-api
, docs-system
。
(1)在您的docusaurus.config.js
文件中,配置您的“默认”文档:
(module.exports = { // start of the module.export declaration
[…]
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
routeBasePath: 'docs',
path: 'docs',
sidebarPath: require.resolve('./sidebars.js'),
lastVersion: 'current',
onlyIncludeVersions: ['current'],
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
[…]
}); // end of the module-export declaration
(2)现在,魔法!:在同一个文件中,配置您的其他文档:
(module.exports = { // start of the module.export declaration
[…]
plugins: [
[…]
[
'@docusaurus/plugin-content-docs',
{
id: 'docs-api',
path: 'docs-api',
routeBasePath: 'docs-api',
sidebarPath: require.resolve('./sidebars.js'),
},
],
[
'@docusaurus/plugin-content-docs',
{
id: 'docs-system',
path: 'docs-system',
routeBasePath: 'docs-system',
sidebarPath: require.resolve('./sidebars.js'),
},
],
],
[…]
}); // end of the module-export declaration
(3)现在您可能希望在您的 NavBar 中使用这些文档,对吧?那就加吧!
(module.exports = { // start of the module.export declaration
[…]
navbar: {
hideOnScroll: true,
title: 'your title',
logo: {
alt: '',
src: 'img/favicon.ico',
},
items: [
{
to: '/docs/Intro', // ./docs/Intro.md
label: 'Docs Title',
position: 'left',
activeBaseRegex: `/docs/`,
},
{
to: '/docs-api/Intro', // ./docs-api/Intro.md
label: 'API',
position: 'left',
activeBaseRegex: `/docs-api/`,
},
{
to: '/docs-system/Introducao', // ./docs-system/Intro.md
label: 'My System',
position: 'left',
activeBaseRegex: `/docs-system/`,
},
],
},
[…]
}); // end of the module-export declaration
重要的
有时你会修改你的docusaurus.config.js
并且不会“工作”,所以关闭 docusaurus service
(在你的终端/电源 shell 中只需 Ctrl+C)并重新启动它——如果之前知道这一点,我可以节省几个小时。
如果您没有 plugin-content-docs 插件,只需安装它:
npm install --save @docusaurus/plugin-content-docs
路线图
我很难弄清楚这一点。我所做的是下载整个 docusaurus 项目,获取网站部分,修剪我不需要的所有内容,这就是我得到的。
参考资料(2022/03/02 更新)
我试过这种方式,它正在工作。
[编辑 1]:但是当我选择 API 时,导航栏中的 API 和文档都变为绿色。你能告诉我们这个@Yangshun Tay背后的原因是什么,你能建议编辑吗?
[编辑 2]:我阅读了文档,它写在@docusaurus/theme-classic中,如果我们设置activeBasePath
属性,那么与该公共路径的链接(docs
在这种情况下)将具有活动属性。
侧边栏.js
module.exports = {
someSidebar: {
Docusaurus: ['doc1', 'doc2'],
Features: ['doc3']
},
someOtherSidebar: {
Test: ['mdx']
}
};
docusaurus.config.js
导航栏链接是这样的 -
links: [
{
to: 'docs/doc1',
// activeBasePath: 'docs', // [Edit 3]
label: 'Docs',
position: 'left'
},
{
to: 'docs/mdx',
label: 'API',
position: 'left'
},
]
docs文件夹的文件夹结构是这样的-
docs
├── docs1.md
├── mdx.md
您需要在 docusaurus 配置中使用 doc 类型。我认为“to”类型适用于页面而不是文档。
要使侧边栏正确,您还需要在配置中设置 activeSidebarClassName 值,以让它知道您要用于此文档的侧边栏(在您在 sidebars.js 中导出的侧边栏)。
activeSidebarClassName: 'navbar__link--active',
https://docusaurus.io/docs/api/themes/configuration#navbar-doc-link
无论您使用的是 v1 还是 v2,sidebars.js
配置都可以包含多个键,每个键都有自己的侧边栏。
特别感谢@d-kastier的评论,它帮助我开始使用多实例 Docusaurus。
由于让一切无缝运行并非易事,我冒昧地设置了一个基本安装,其中包含所有必要的更改以进行多实例,并将其作为 GitHub 模板发布
在这里分叉:
mg0716/docusaurus-multi
对反馈和拉取请求非常开放,所以请随时试一试!
这个解决方案对我有用。在 Docusaurus v2.0.0-beta.15 中使用“自动生成”侧边栏
侧边栏.js
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
// tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
newone: [{type: 'autogenerated', dirName: 'newone'}], // foldername
newtwo: [{type: 'autogenerated', dirName: 'newtwo'}], // foldername
};
module.exports = sidebars;
docusaurus.config.js
navbar: {
title: 'My Site',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [
// {
// type: 'doc',
// docId: 'intro',
// position: 'left',
// label: 'Tutorials',
// },
{
type: 'docSidebar', // docSidebar
position: 'left',
sidebarId: 'newone', // foldername
label: 'NEWONE', // navbar title
},
{
type: 'docSidebar', // docSidebar
position: 'left',
sidebarId: 'newtwo', // foldername
label: 'NEWTWO', // navbar title
},
{to: '/blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
您的文档文件夹:
docs/
newone/
intro.md
newtwo/
intro.md