docusaurus - 使用 Docusaurus v2 创建一个新的文档页面
问题描述
我正在尝试 Docusaurus v2,我想要两个不同的文档页面:一个用于文档,一个用于 API。
这是我的文件结构:
docusaurus.config.js
module.exports = {
title: 'My Site',
tagline: 'The tagline of my site',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
favicon: 'img/favicon.ico',
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name.
themeConfig: {
navbar: {
title: 'My Site',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [
{
to: 'docs/documentation',
activeBasePath: 'docs',
label: 'Documentation',
position: 'left',
},
{
to: 'docs/api',
activeBasePath: 'docs',
label: 'API',
position: 'left',
},
{ to: 'blog', label: 'Blog', position: 'left' },
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Style Guide',
to: 'docs/',
},
{
label: 'Second Doc',
to: 'docs/doc2/',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: 'blog',
},
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
},
},
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
}
侧边栏.js
module.exports = {
documentation: {
Example: ['documentation/documentation1'],
// Docusaurus: ['doc1', 'doc2', 'doc3'],
// Features: ['mdx'],
},
api: {
'Color formats': ['api/api1'],
},
}
文档1.md
---
id: documentation1
title: Documentation 1
sidebar_label: Style Guide
slug: /
---
...
api1.md
---
id: api1
title: Api 1
sidebar_label: Style Guide
slug: /
---
...
但它不起作用。当我单击文档按钮时,它会转到localhost:3000/docs/documentation
并且我得到Page Not Found
. 当我单击 API 按钮时,它会转到localhost:3000/docs/api
并且我得到相同的错误。如果我去/localhost:3000/docs/
,我会看到 api1 markdown 文件内容。
我也收到此警告:
warn Duplicate routes found!
Attempting to create page at /docs/, but a page already exists at this route
Attempting to create page at /docs/, but a page already exists at this route
This could lead to non-deterministic routing behavior
我做错了什么?
我只是想要一个Documentation
链接到/documentation
的按钮和链接到/api
.
我想我必须在这里修改一些东西,但我不知道是什么:
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {...},
theme: {...},
},
],
],
我阅读了文档并在 Google 上进行了搜索,但没有任何帮助。
解决方案
秘诀是在docusarus config中使用doc类型,并设置
activeSidebarClassName: 'navbar__link--active',
https://docusaurus.io/docs/api/themes/configuration#navbar-doc-link
推荐阅读
- javascript - javascript 在我输入时不影响 html
- javascript - 使 jquery 选择器动态化
- database - 查找 .accde Access 可执行文件引用的数据库或文件?
- c++ - 在 Visual Studio 2017 中构建程序时出错
- java - Maven 正在寻找 settings.xml 或 pom.xml 中不存在的存储库
- mysql - Laravel LeftJoin 从第一列返回重复值(mysql)
- python - 在 python 2.7 中加入两个列表列表
- jquery - 如何在 Symfony / Twig 中并行运行简单的 jQuery AJAX 调用?
- javascript - 更新一组
- unit-testing - DataTable/DataSet 到 IFormFile(Excel) 到单元测试