首页 > 解决方案 > 使用 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 上进行了搜索,但没有任何帮助。

标签: docusaurus

解决方案


秘诀是在docusarus config中使用doc类型,并设置

activeSidebarClassName: 'navbar__link--active',

https://docusaurus.io/docs/api/themes/configuration#navbar-doc-link


推荐阅读