Vitepress国际化配置指南：自定义文档标签与搜索提示

理解Vitepress的国际化机制

Vitepress作为基于Vue的静态站点生成器，提供了完善的国际化支持，允许开发者自定义界面中的各种文本内容。在实际项目中，我们经常需要修改默认的界面文本，例如将"Doc"改为其他语言或自定义标签，或者调整搜索框的提示文字。

配置文档大纲标签

Vitepress的文档大纲(Outline)部分默认显示"On this page"文本，可以通过主题配置进行修改。在.vitepress/config.js文件中，我们可以这样配置：

export default {
  themeConfig: {
    outline: {
      label: '本文目录'  // 将默认的"On this page"改为中文
    }
  }
}

自定义本地搜索国际化

对于搜索功能的文本定制，Vitepress提供了search配置项。我们可以通过以下方式修改搜索框的提示文字和搜索结果中的相关文本：

export default {
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        translations: {
          button: {
            buttonText: '搜索文档',
            buttonAriaLabel: '搜索文档'
          },
          modal: {
            noResultsText: '无法找到相关结果',
            resetButtonTitle: '清除搜索条件',
            footer: {
              selectText: '选择',
              navigateText: '切换'
            }
          }
        }
      }
    }
  }
}

高级国际化实践

对于更复杂的多语言场景，Vitepress支持完整的国际化配置。我们可以为每种语言创建单独的配置：

export default {
  locales: {
    '/zh/': {
      lang: 'zh-CN',
      themeConfig: {
        outline: { label: '本文目录' },
        search: {
          provider: 'local',
          options: {
            translations: {
              button: { buttonText: '搜索' }
            }
          }
        }
      }
    },
    '/en/': {
      lang: 'en-US',
      themeConfig: {
        outline: { label: 'On this page' },
        search: {
          provider: 'local',
          options: {
            translations: {
              button: { buttonText: 'Search' }
            }
          }
        }
      }
    }
  }
}

注意事项

1. 确保配置层级正确，search配置应位于themeConfig下
2. 修改后需要重启开发服务器才能看到效果
3. 对于生产环境，构建后才会完全生效
4. 某些文本可能需要同时修改ARIA标签以保证无障碍访问

通过以上配置，开发者可以轻松实现Vitepress项目的全面国际化，创建符合不同地区用户使用习惯的文档网站。