如何为Docusaurus多语言网站设置专属标题与关键词？

当然可以为中文版本设置专属的标题与关键词，下面提供两种实用的实现方案，适配你的Docusaurus 2.0.0-beta.18版本：

方法一：通过配置函数动态生成多语言配置 #

Docusaurus允许将配置文件导出为函数，该函数会接收包含当前语言环境的上下文参数，以此动态返回对应语言的SEO配置，这是最直接的全局多语言SEO方案。

修改你的docusaurus.config.js，将原本的对象导出改为函数形式：

const path = require('path');

module.exports = function (context) {
  const { locale } = context;
  // 定义各语言专属的SEO配置
  const localeSEO = {
    'en': {
      siteTitle: 'my website, toSEO',
      siteTagline: 'The tagline of my site',
      siteKeywords: 'word, toSEO'
    },
    'zh-CN': {
      siteTitle: '我的网站 - 中文专属标题',
      siteTagline: '中文站点标语',
      siteKeywords: '中文关键词, SEO优化'
    }
  };
  // 读取当前语言的配置，默认 fallback 到英文
  const currentSEO = localeSEO[locale] || localeSEO['en'];

  return {
    title: currentSEO.siteTitle,
    tagline: currentSEO.siteTagline,
    onBrokenLinks: 'ignore',
    url: 'https://www.mywebsite.com',
    baseUrl: '/',
    favicon: 'img/favicon.ico',
    organizationName: 'softtimur',
    projectName: 'docusaurus',
    trailingSlash: false,
    plugins: [
      path.resolve(__dirname, './plugins/monaco-loader'),
    ],
    themeConfig: {
      metadata: [
        {name: 'keywords', content: currentSEO.siteKeywords},
      ],
      navbar: {
        // 同时适配导航栏标题的多语言
        title: locale === 'zh-CN' ? '我的网站' : 'my website',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        // 保留原导航栏菜单项配置
        items: [
          // ...原items内容
        ],
      },
      footer: {
        // 保留原页脚配置
      },
    },
    presets: [
      // 保留原presets配置
    ],
    scripts : [
      '/js/patch.js'
    ],
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'zh-CN'],
      localeConfigs: {
        en: {
          label: 'English',
          htmlLang: 'en-GB',
        },
        'zh-CN': {
          label: '简体中文',
          htmlLang: 'zh-Hans',
        },
      },
    }
  };
};

方法二：利用i18n翻译文件覆盖全局配置 #

如果你更倾向于Docusaurus原生的翻译流程，可以通过生成翻译文件来覆盖全局SEO内容：

1. 运行命令生成中文翻译文件：

npm run write-translations -- --locale zh-CN

该命令会在项目根目录生成i18n/zh-CN目录，其中包含code.json文件。

2. 打开i18n/zh-CN/code.json，修改对应键值的翻译内容：

{
  // ...其他翻译项
  "title": "我的网站 - 中文专属标题",
  "tagline": "中文站点标语"
}

3. 对于关键词这类主题配置中的元数据，可以结合方法一的动态逻辑，或者在翻译文件中新增对应键值后，在配置文件中使用翻译函数（注：beta.18版本中配置文件直接使用翻译函数需额外处理，推荐优先使用方法一）。

验证效果 #

运行中文站点启动命令：

npm run start -- --locale zh-CN

访问中文页面后，查看HTML源代码，即可确认title、keywords等元数据已切换为中文专属内容。

内容的提问来源于stack exchange，提问作者SoftTimur