Vitepress 搜索框中文配置指南

在 Vitepress 项目中配置中文搜索框是一个常见的需求，本文将详细介绍如何实现这一功能。

本地搜索配置

对于使用本地搜索的项目，可以通过修改主题配置来实现中文搜索界面。在 Vitepress 配置文件中，需要设置 search 选项的国际化配置。如果项目是单语言站点（仅中文），应该使用 root 作为键名：

themeConfig: {
  search: {
    locales: {
      root: {
        placeholder: '搜索文档',
        translations: {
          button: {
            buttonText: '搜索',
            buttonAriaLabel: '搜索'
          },
          modal: {
            noResultsText: '无法找到相关结果',
            resetButtonTitle: '清除查询条件',
            footer: {
              selectText: '选择',
              navigateText: '切换'
            }
          }
        }
      }
    }
  }
}

Algolia 搜索配置

如果项目使用的是 Algolia 搜索服务，同样可以配置中文界面。在 Vitepress 配置中，Algolia 的国际化配置方式与本地搜索类似：

themeConfig: {
  algolia: {
    locales: {
      root: {
        placeholder: '搜索文档',
        translations: {
          button: {
            buttonText: '搜索',
            buttonAriaLabel: '搜索'
          }
        }
      }
    }
  }
}

注意事项

1. 对于单语言中文站点，必须使用 root 作为键名，而不是 zh
2. 不需要额外安装任何插件即可实现搜索框的中文化
3. 配置完成后，建议清除浏览器缓存以确保新配置生效
4. 可以根据实际需求调整翻译文本，使其更符合项目风格

通过以上配置，开发者可以轻松地为 Vitepress 项目添加中文搜索功能，提升中文用户的使用体验。