中英文切换

docusaurus.config.js

@@ -73,10 +73,25 @@ module.exports = {
           dropdownActiveClassDisabled: true
         },
         // {
-        //   type:'html',
+        //   type: 'localeDropdown',
-        //   position:"right",
+        //   position: 'right',
-        //   value:"<div>22221114444</div>"
         // },
+        {
+          position: 'right',
+          component:'./src/components/LanguageSwitcher',
+          // label:"language",
+          to:"#"
+          // items: [
+          //   {
+          //     label: 'English',
+          //     onClick: () => handleLocaleChange('en')
+          //   },
+          //   {
+          //     label: '简体中文',
+          //     onClick: () => handleLocaleChange('zh-Hans')
+          //   }
+          // ]
+        }
         // {
         //   href: 'https://github.com/boxyhq',
         //   position: 'right',
@@ -191,8 +206,14 @@ module.exports = {
     defaultLocale: 'zh-cn',
     locales: ['zh-cn','en'],
     localeConfigs: {
-      en: { label: 'English' },
+      en: {
-      'zh-cn': { label: '简体中文' },
+        label: 'English',
+        htmlLang: 'en',
+      },
+      'zh-cn': {
+        label: '简体中文',
+        htmlLang: 'zh-CN',
+      },
     },
   },
 };

src/components/LanguageSwitcher.js

@@ -0,0 +1,38 @@
+// src/components/LanguageSwitcher.js
+import React from 'react';
+import { useDocusaurusContext } from '@docusaurus/useDocusaurusContext';
+
+export default function LanguageSwitcher() {
+  const { i18n } = useDocusaurusContext();
+
+  const locales = [
+    { code: 'en', label: 'English' },
+    { code: 'zh-Hans', label: '简体中文' }
+  ];
+
+  return (
+    <div style={{ marginRight: '1rem' }}>
+      <select
+        value={i18n.currentLocale}
+        onChange={(e) => {
+          localStorage.setItem('preferredLocale', e.target.value);
+          window.location.href = `/${e.target.value}/`;
+        }}
+        style={{
+          padding: '0.5rem 1rem',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          backgroundColor: 'white',
+          fontSize: '0.9rem',
+          cursor: 'pointer',
+        }}
+      >
+        {locales.map((locale) => (
+          <option key={locale.code} value={locale.code}>
+            {locale.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}