vitepress/docs/zh/reference/default-theme-search.md

outline
deep

搜索

本地搜索

得益于 minisearch，VitePress 支持使用浏览器内索引进行模糊全文搜索。要启用此功能，只需在 .vitepress/config.ts 文件中将 themeConfig.search.provider 选项设置为 'local' 即可：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local'
    }
  }
})

示例结果：

或者，你可以使用 Algolia DocSearch 或一些社区插件，例如：https://www.npmjs.com/package/vitepress-plugin-search 或者 https://www.npmjs.com/package/vitepress-plugin-pagefind。

i18n

你可以使用这样的配置来使用多语言搜索：

import { defineConfig } from 'vitepress'

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

MiniSearch 配置项

你可以像这样配置 MiniSearch ：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        miniSearch: {
          /**
           * @type {Pick<import('minisearch').Options, 'extractField' | 'tokenize' | 'processTerm'>}
           */
          options: {
            /* ... */
          },
          /**
           * @type {import('minisearch').SearchOptions}
           * @default
           * { fuzzy: 0.2, prefix: true, boost: { title: 4, text: 2, titles: 1 } }
           */
          searchOptions: {
            /* ... */
          }
        }
      }
    }
  }
})

参阅 MiniSearch 文档了解更多信息。

自定义渲染内容

可以在索引之前自定义用于渲染 Markdown 内容的函数：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        /**
         * @param {string} src
         * @param {import('vitepress').MarkdownEnv} env
         * @param {import('markdown-it-async')} md
         */
        async _render(src, env, md) {
          // 返回 html 字符串
        }
      }
    }
  }
})

该函数将从客户端站点数据中剥离，因此你可以在其中使用 Node.js API。

示例：从搜索中排除页面

你可以通过将 search: false 添加到页面的 frontmatter 来从搜索中排除页面。或者：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        async _render(src, env, md) {
          const html = await md.renderAsync(src, env)
          if (env.frontmatter?.search === false) return ''
          if (env.relativePath.startsWith('some/path')) return ''
          return html
        }
      }
    }
  }
})

::: warning 注意 如果提供了自定义的 _render 函数，你需要自己处理 search: false 的 frontmatter。此外，在调用 md.renderAsync 之前，env 对象不会完全填充，因此对可选 env 属性 (如 frontmatter) 的任何检查都应该在此之后完成。 :::

示例：转换内容——添加锚点

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        async _render(src, env, md) {
          const html = await md.renderAsync(src, env)
          if (env.frontmatter?.title)
            return await md.renderAsync(`# ${env.frontmatter.title}`) + html
          return html
        }
      }
    }
  }
})

Algolia Search

VitePress 支持使用 Algolia DocSearch 搜索文档站点。请参阅他们的入门指南。在你的 .vitepress/config.ts 中，你至少需要提供以下内容才能使其正常工作：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        appId: '...',
        apiKey: '...',
        indexName: '...'
      }
    }
  }
})

i18n

你可以使用这样的配置来使用多语言搜索：

点击展开

<<< @/snippets/algolia-i18n.ts

更多信息请参考官方 Algolia 文档。想要快速开始，你也可以从我们的 GitHub 仓库复制此站点使用的翻译。

Algolia Ask AI 支持

如果需要启用 Ask AI，只需在 options 中添加 askAi：

options: {
  appId: '...',
  apiKey: '...',
  indexName: '...',
  askAi: {
    assistantId: 'XXXYYY'
  }
}

::: warning 提示 若仅需关键词搜索，可省略 askAi。 :::

Ask AI 侧边栏

DocSearch v4.5+ 支持可选的 Ask AI 侧边栏。启用后，默认可通过 Ctrl/Cmd+I 打开。完整的选项列表请参阅侧边栏 API 参考。

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        appId: '...',
        apiKey: '...',
        indexName: '...',
        askAi: {
          assistantId: 'XXXYYY',
          sidePanel: {
            // 镜像 @docsearch/sidepanel-js SidepanelProps API
            panel: {
              variant: 'floating', // 或 'inline'
              side: 'right',
              width: '360px',
              expandedWidth: '580px',
              suggestedQuestions: true
            }
          }
        }
      }
    }
  }
})

如果需要禁用键盘快捷键，请使用侧边栏的 keyboardShortcuts 选项：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        appId: '...',
        apiKey: '...',
        indexName: '...',
        askAi: {
          assistantId: 'XXXYYY',
          sidePanel: {
            keyboardShortcuts: {
              'Ctrl/Cmd+I': false
            }
          }
        }
      }
    }
  }
})

模式 (auto / sidePanel / hybrid / modal)

你可以选择性地控制 VitePress 如何集成关键词搜索和 Ask AI：

• mode: 'auto'（默认）：当配置了关键词搜索时推断为 hybrid，否则当配置了 Ask AI 侧边栏时推断为 sidePanel。
• mode: 'sidePanel'：强制仅使用侧边栏（隐藏关键词搜索按钮）。
• mode: 'hybrid'：启用关键词搜索模态框 + Ask AI 侧边栏（需要关键词搜索配置）。
• mode: 'modal'：将 Ask AI 保留在 DocSearch 模态框内（即使你配置了侧边栏）。

仅 Ask AI（无关键词搜索）

如果你想仅使用 Ask AI 侧边栏，可以省略顶级关键词搜索配置，并在 askAi 下提供凭据：

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        mode: 'sidePanel',
        askAi: {
          assistantId: 'XXXYYY',
          appId: '...',
          apiKey: '...',
          indexName: '...',
          sidePanel: true
        }
      }
    }
  }
})

爬虫配置

以下是基于此站点使用的示例配置：

<<< @/snippets/algolia-crawler.js