diff --git a/docs/config/algolia-search.md b/docs/config/algolia-search.md index 0076bcaa..a4e7bb45 100644 --- a/docs/config/algolia-search.md +++ b/docs/config/algolia-search.md @@ -13,4 +13,75 @@ module.exports = { } ``` -For more options, check out [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options). +For more options, check out [Algolia DocSearch's documentation](https://docsearch.algolia.com/docs/behavior). You can pass any extra option alongside other options, e.g. passing `searchParameters`: + +```js +module.exports = { + themeConfig: { + algolia: { + apiKey: 'your_api_key', + indexName: 'index_name', + searchParameters: { + facetFilters: ['tags:guide,api'] + } + } + } +} +``` + +## Internationalization (i18n) + +If you have multiple locales in your documentation and you have defined a `locales` object in your `themeConfig`: + +```js +module.exports = { + themeConfig: { + locales: { + // ... + }, + algolia: { + apiKey: 'your_api_key', + indexName: 'index_name' + } + } +} +``` + +VitePress will automatically add a `language` _facetFilter_ to the `searchParams.facetFilter` array with the correct language value. **Make sure to properly configure your DocSearch config as well** by adding `language` as a _custom attribute for faceting_ and by setting it based on the `lang` attribute of the `` element. Here is a short example of DocSearch config: + +```json +{ + "index_name": "", + "start_urls": [ + { + "url": "" + } + ], + "stop_urls": ["(?:(? .sidebar-links > .sidebar-link .sidebar-link-item.active", + "global": true, + "default_value": "Documentation" + }, + "lvl1": ".content h1", + "lvl2": ".content h2", + "lvl3": ".content h3", + "lvl4": ".content h4", + "lvl5": ".content h5", + "lvl6": ".content p, .content li", + "text": ".content [class^=language-]", + "language": { + "selector": "/html/@lang", + "type": "xpath", + "global": true, + "default_value": "en-US" + } + }, + "custom_settings": { + "attributesForFaceting": ["language"] + } +} +``` + +You can take a look at the [DocSearch config used by Vue Router](https://github.com/algolia/docsearch-configs/blob/master/configs/next_router_vuejs.json) for a complete example. diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue index e16c5ee0..5058651e 100644 --- a/src/client/theme-default/Layout.vue +++ b/src/client/theme-default/Layout.vue @@ -3,7 +3,12 @@ diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue index 638149a1..8b7af040 100644 --- a/src/client/theme-default/components/AlgoliaSearchBox.vue +++ b/src/client/theme-default/components/AlgoliaSearchBox.vue @@ -9,9 +9,13 @@ import { defineProps, getCurrentInstance, onMounted, watch } from 'vue' import docsearch from '@docsearch/js' import type { DefaultTheme } from '../config' import type { DocSearchHit } from '@docsearch/react/dist/esm/types' +import { useSiteDataByRoute } from 'vitepress' + +const siteData = useSiteDataByRoute() const props = defineProps<{ options: DefaultTheme.AlgoliaSearchOptions + multilang?: boolean }>() const vm = getCurrentInstance() @@ -54,11 +58,23 @@ function update(options: any) { } function initialize(userOptions: any) { + // if the user has multiple locales, the search results should be filtered + // based on the language + const facetFilters = props.multilang + ? ['language:' + siteData.value.lang] + : [] + docsearch( Object.assign({}, userOptions, { container: '#docsearch', - searchParameters: Object.assign({}, userOptions.searchParameters), + searchParameters: Object.assign({}, userOptions.searchParameters, { + // pass a custom lang facetFilter to allow multiple language search + // https://github.com/algolia/docsearch-configs/pull/3942 + facetFilters: facetFilters.concat( + userOptions.searchParameters?.facetFilters || [] + ) + }), navigator: { navigate: ({ suggestionUrl }: { suggestionUrl: string }) => { diff --git a/src/shared/config.ts b/src/shared/config.ts index 281ce539..b5f152ab 100644 --- a/src/shared/config.ts +++ b/src/shared/config.ts @@ -47,6 +47,7 @@ export function resolveSiteDataByRoute(siteData: SiteData, route: string) { // clean the locales to reduce the bundle size locales: {} }, + lang: localeThemeConfig.lang || siteData.lang, locales: {} } }