Sveltepress

默认主题支持通过 docsearch 接入 Algolia DocSearch，也支持通过 search 接入自定义搜索组件，包括 @sveltepress/meilisearch。

Algolia DocSearch

向 defaultTheme 传入 docsearch 配置对象，即可在导航栏启用 Algolia DocSearch。

必填字段为 appId、apiKey 和 indexName，同时也支持所有其他 DocSearch 选项。

vite.config.(js|ts)

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'
import { const sveltepress: (options?: SveltepressVitePluginOptions) => PluginOptionsveltepress } from '@sveltepress/vite'
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
UserConfig
object, or a function that returns it.
The function receives a
ConfigEnv
object.defineConfig } from 'vite'

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
UserConfig
object, or a function that returns it.
The function receives a
ConfigEnv
object.defineConfig({
  UserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.plugins: [
    function sveltepress(options?: SveltepressVitePluginOptions): PluginOptionsveltepress({
      SveltepressVitePluginOptions.theme?: ResolvedTheme | undefinedtheme: function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
        DefaultThemeOptions.docsearch?: Omit<DocSearchProps, "theme" | "container"> | undefineddocsearch: {
          appId: stringAlgolia application id used by the search client.appId: 'YOUR_APP_ID',
          apiKey: stringPublic api key with search permissions for the index.apiKey: 'YOUR_SEARCH_API_KEY',
          indexName?: string | undefinedName of the algolia index to query.
@deprecatedindexName will be removed in a future version. Please use indices property going forward.indexName: 'YOUR_INDEX_NAME',
        },
      }),
    }),
  ],
})

申请 DocSearch

DocSearch 对开源文档站点免费，可前往 docsearch.algolia.com 申请。

Meilisearch

@sveltepress/meilisearch 是官方支持的 Meilisearch 搜索组件。先安装依赖：

npm install --save @sveltepress/meilisearch

yarn add @sveltepress/meilisearch

pnpm install @sveltepress/meilisearch

bun add @sveltepress/meilisearch

创建一个包装组件，并传入 Meilisearch 连接配置：

src/lib/MeilisearchSearch.svelte

<script lang="ts">
  import 
type Search = SvelteComponent<Record<string, any>, any, any>
const Search: LegacyComponentTypeSearch from '@sveltepress/meilisearch/Search.svelte'
</script>

<const Search: LegacyComponentTypeSearch
  host: stringhost="https://search.example.com"
  apiKey: stringapiKey="YOUR_SEARCH_ONLY_KEY"
  indexName: stringindexName="docs"
/>

svelte

然后把包装组件路径传给默认主题的自定义搜索入口：

vite.config.(js|ts)

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  DefaultThemeOptions.search?: string | boolean | Component<{}, {}, string> | undefinedsearch: '/src/lib/MeilisearchSearch.svelte',
})

该组件只查询已经建立的 Meilisearch 索引，不负责创建索引。每条记录应提供 id、title、content，以及 url 或 path。浏览器端必须使用仅有搜索权限的 API Key。

已知生产构建缺陷

自定义搜索 API 和 @sveltepress/meilisearch 组件均受支持，上述源码路径配置在开发环境中可以工作。但当前默认主题运行时会把 .svelte 路径留给浏览器动态导入，因此静态生产构建不会打包这个包装组件；直接传入组件对象也会在主题配置序列化时丢失。这是默认主题的生产构建缺陷，并不表示不支持 M Search。在运行时接入修复前，请务必验证实际生产部署。

如需接入其他搜索服务，也可以使用同一个 search 入口提供自己的 Svelte 包装组件。同时配置 search 和 docsearch 时，优先使用 search。

当前页面