[v2] how can i create a docsVersionDropdown

[DyncMark]

This is my docusaurus.config.js:

const path = require('path');
const versions = require('./versions.json');

const allDocHomesPaths = [
  '/docs/',
  '/docs/next',
  ...versions.map((version) => `/docs/${version}/`),
];

module.exports = {
  title: 'anyRTC 实时音视频云Web SDK',
  tagline: 'ArRTC for Web SDK',
  url: 'http://docs.anyrtc.io',
  baseUrl: '/v4/rtc-web/',
  favicon: 'img/favicon.ico',
  organizationName: 'anyRTC', // Usually your GitHub org/user name.
  projectName: 'rtc-web', // Usually your repo name.
  themeConfig: {
    navbar: {
      hideOnScroll: true,
      title: 'anyRTC',
      logo: {
        alt: 'anyRTC Logo',
        src: 'img/favicon.ico',
        srcDark: 'img/docusaurus_keytar.svg',
      },
      items: [
        // {
        //   label: versions[0],
        //   position: 'left', // or 'right'
        //   items: function (path) {
        //     // redirect to /docs from /docs/introduction,
        //     // as introduction has been made the home doc

        //     let itemsPath = [];
        //     versions.map((version) => {
        //       itemsPath.push({
        //         label: version,
        //         to: 'docs/' + version,
        //       })
        //     });

        //     return itemsPath;
        //   }(),
        // },
        {
          type: 'docsVersionDropdown',
          position: 'left',
          nextVersionLabel: '2.0.0-next',
        },
        {
          to: 'docs/',
          activeBasePath: 'docs',
          label: 'Docs',
          position: 'right',
        },
        {
          to: 'docs/api/overview',
          activeBasePath: 'api',
          label: 'API',
          position: 'right',
        },
        // {to: 'blog', label: 'Blog', position: 'right'},
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
        // {
        //   to: '/versions',
        //   label: 'All versions',
        //   position: 'right',
        // },
      ]
    },
    algolia: {
      apiKey: '5789ff188e53e9c3a53bf5a461bfeba4',
      indexName: 'anyrtc',
      appId: '3PL7UR0LOP', // Optional, if you run the DocSearch crawler on your own
      algoliaOptions: {
        // searchParameters: {
        //   facetFilters: [`version:${versions[0]}`],
        // },
      }, // Optional, if provided by Algolia
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: '文档',
          items: [
            {
              label: '产品概述',
              to: 'docs/',
            },
            {
              label: '快速开始',
              to: 'docs/setup',
            },
            {
              label: 'API',
              to: 'docs/api/overview',
            },
          ],
        },
        {
          title: 'RTC其他平台',
          items: [
            {
              label: 'RTC Web SDK',
              href: 'https://docs.anyrtc.io/v4/rtc-web',
            },
            {
              label: 'RTC Android SDK',
              href: 'https://docs.anyrtc.io/v4/rtc-android',
            },
            {
              label: 'RTC iOS&Mac SDK',
              href: 'https://docs.anyrtc.io/v4/rtc-android',
            },
            {
              label: 'RTC window SDK',
              href: 'https://docs.anyrtc.io/v4/rtc-window',
            },
          ],
        },
        {
          title: 'RTM其他平台',
          items: [
            {
              label: 'RTM Web SDK',
              href: 'https://docs.anyrtc.io/v4/rtm-web',
            },
            {
              label: 'RTM Android SDK',
              href: 'https://docs.anyrtc.io/v4/rtm-android',
            },
            {
              label: 'RTM iOS&Mac SDK',
              href: 'https://docs.anyrtc.io/v4/rtm-android',
            },
            {
              label: 'RTM window SDK',
              href: 'https://docs.anyrtc.io/v4/rtm-window',
            },
          ],
        },
        {
          title: '更多',
          items: [
            {
              label: 'GitHub',
              href: 'https://github.com/facebook/docusaurus',
            },
            {
              label: 'anyRTC',
              href: 'https://www.anyrtc.io',
            }
          ],
        },
      ],
      logo: {
        alt: 'anyRTC Logo',
        src: 'img/anyrtc_logo.png',
        href: 'https://www.anyrtc.io',
      },
      copyright: `Copyright © ${new Date().getFullYear()} anyrtc.`,
    },
  },
  plugins: [
    [
      '@docusaurus/plugin-client-redirects',
      {
        fromExtensions: ['html'],
        createRedirects: function (path) {
          // redirect to /docs from /docs/introduction,
          // as introduction has been made the home doc
          if (allDocHomesPaths.includes(path)) {
            return [`${path}/introduction`];
          }
        },
      },
    ]
  ],
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          // It is recommended to set document id as docs home page (`docs/` path).
          homePageId: 'overview',
          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'),
        },
      },
    ],
  ],
};

Has anyone come to help?

[slorber]

Hi,

You can't "create" a docsVersionDropdown, this is a special navbar item type that we introduced.

Please tell me exactly what you want to do and why so that I see what we can do for you.

[DyncMark]

Hi,

You can't "create" a docsVersionDropdown, this is a special navbar item type that we introduced.

Please tell me exactly what you want to do and why so that I see what we can do for you.

Thanks for your reply. I want a control widget that can switch versions.

[slorber]

But isn't it already what it is?

If it's not working great for you please explain why exactly, I clearly need more than 10 words to be able to help you :)

[DyncMark]

But isn't it already what it is?

If it's not working great for you please explain why exactly, I clearly need more than 10 words to be able to help you :)

Thanks again for your patient answer！

ooh, I'm sorry， because my English is very poor, so I didn't describe it very clearly.

This is a documentation website, It opens very slowly, cause of I'm in China. So Today I migrate docusaurus from v1 to v2 and it works now, At the same time, I also want to add a version switch to the site. look like

[slorber]

Your config looks fine, but this dropdown only works if you use versioning. Have you already versioned your docs with the cli?

If you share me the source code it's easier for me to see what's the problem.

[DyncMark]

Your config looks fine, but this dropdown only works if you use versioning. Have you already versioned your docs with the cli?

If you share me the source code it's easier for me to see what's the problem.

Dear friend.

I created a repo, I committed the source code to it, and I invited you to be a collaborator.

[slorber]

The repo is empty, no code was pushed to it.

I suspect your problem is you didn't create any version of your doc with the cli, please tell me if you did that.

If you don't have a "versioned_docs" folder at the root of your site, this dropdown won't do anything

[DyncMark]

The repo is empty, no code was pushed to it.

I suspect your problem is you didn't create any version of your doc with the cli, please tell me if you did that.

If you don't have a "versioned_docs" folder at the root of your site, this dropdown won't do anything

sorry, please try again.

yes, i create the repo with the cli. like this npx @docusaurus/init@next init my-website classic

[slorber]

@DyncMark I see your code, it looks fine, you have 2 versions + the next one.

Can you show me a live deployment of your site, or at least navbar screenshots or something, to show me exactly what is not working for you?

What do you expect, and what do you get?

[DyncMark]

@DyncMark I see your code, it looks fine, you have 2 versions + the next one.

Can you show me a live deployment of your site, or at least navbar screenshots or something, to show me exactly what is not working for you?

What do you expect, and what do you get?

This is our website. but it missing versioning, I would like to have a drop-down menu like https://v2.docusaurus.io/ to select different versions of documents.

[slorber]

@DyncMark this dropdown only works in alpha 59, but your live site is not alpha 59.

And the repo you gave me is alpha 59 BUT it does not build at all because you did not fix the errors reported by the error messages.

I tried it locally, quickfixed some errors locally and got this working:

Please be sure to be on alpha 59 and that your site is building correctly.

You will need to rename "links" to "items" in config

You'll need to fix your image paths (+ provide the correct web/source.png image)

And fix your swizzled SearchBar component (I'd actually recommend you to remove your custom searchbar comp, as alpha 59 is using DocSearch v3)

I've pushed a branch "quick-fix-site" to your repo to help you

[DyncMark]

Hi bro.

I have some problems when I tried to update to alpha59.

first. I change the package.json, and then npm i

{
...
"dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.59",
    "@docusaurus/plugin-client-redirects": "^2.0.0-alpha.59",
    "@docusaurus/preset-classic": "^2.0.0-alpha.59",
    ...
  },
}
...

second, update with npm i @docusaurus/core@next -S, but get @docusaurus/core@2.0.0-alpha.58

[slorber]

I'm sorry but you can see for yourself that the version exist: https://www.npmjs.com/package/@docusaurus/preset-classic/v/2.0.0-alpha.59

It is likely that you use some kind of NPM chinese proxy that is not updated with latest versions, this is not related to Docusaurus at all.

I can't spend all my day helping you on this, I've already done everything I could, by pushing a working version to your repo. Please reach to other users on Discord to get help.

[DyncMark]

I'm sorry but you can see for yourself that the version exist: https://www.npmjs.com/package/@docusaurus/preset-classic/v/2.0.0-alpha.59

It is likely that you use some kind of NPM chinese proxy that is not updated with latest versions, this is not related to Docusaurus at all.

I can't spend all my day helping you on this, I've already done everything I could, by pushing a working version to your repo. Please reach to other users on Discord to get help.

sure，I really appreciate your help ：）, I'll check the problem by my self. Keep safety.

[DyncMark]

@DyncMark this dropdown only works in alpha 59, but your live site is not alpha 59.

And the repo you gave me is alpha 59 BUT it does not build at all because you did not fix the errors reported by the error messages.

I tried it locally, quickfixed some errors locally and got this working:

Please be sure to be on alpha 59 and that your site is building correctly.

You will need to rename "links" to "items" in config

You'll need to fix your image paths (+ provide the correct web/source.png image)

And fix your swizzled SearchBar component (I'd actually recommend you to remove your custom searchbar comp, as alpha 59 is using DocSearch v3)

I've pushed a branch "quick-fix-site" to your repo to help you

Excuse me! I need your help.

Today I have checkout quickfixed branch, it looks like great, but there are some problems with image is undefined 404. Do you know what the problem is

[slorber]

sorry but I can't dedicate too much time helping you. Please try to get help on Discord first.

Your image problem might be related to using baseUrl, and this baseUrl is maybe not added in the image path (we made a PR recently so that you don't need to use useBaseUrl hook, but not released yet, so in the meantime you may need that hook, read the doc to know more)

[chudongvip]

sorry but I can't dedicate too much time helping you. Please try to get help on Discord first.

Your image problem might be related to using baseUrl, and this baseUrl is maybe not added in the image path (we made a PR recently so that you don't need to use useBaseUrl hook, but not released yet, so in the meantime you may need that hook, read the doc to know more)

Thanks for your reply. Because my English is not very good, So I can not find a good solution, but I will always pay attention to you and the official documents. : )

Thanks again.