Pular para o conteúdo principal
Version: 2.1.0

Pesquisar

There are a few options you can use to add search to your website:

info

🥇 Docusaurus provides first-class support for Algolia DocSearch.

👥 Other options are maintained by the community: please report bugs to their respective repositories.

🥇 Using Algolia DocSearch​

Docusaurus has official support for Algolia DocSearch.

The service is free for any open-source project: just make sure to read the checklist and apply to the DocSearch program.

DocSearch crawls your website once a week (the schedule is configurable from the web interface) and aggregates all the content in an Algolia index. Esse conteúdo é consultado diretamente do seu front-end usando a API do Algolia.

If your website is not eligible for the free, hosted version of DocSearch, or if your website sits behind a firewall and is not public, then you can run your own DocSearch crawler.

note

By default, the Docusaurus preset generates a sitemap.xml that the Algolia crawler can use.

From the old docsearch?

You can read more about migration from the legacy DocSearch infra in our blog post or the DocSearch migration docs.

Index Configuration​

After your application has been approved and deployed, you will receive an email with all the details for you to add DocSearch to your project. Editing and managing your crawls can be done via the web interface. Indices are readily available after deployment, so manual configuration usually isn't necessary.

tip

It is highly recommended to use a config similar to the Docusaurus 2 website config.

Conectando Algolia​

Docusaurus' own @docusaurus/preset-classic supports Algolia DocSearch integration. If you use the classic preset, no additional installation is needed.

Installation steps when not using @docusaurus/preset-classic
  1. Install the package:
npm install --save @docusaurus/theme-search-algolia
  1. Register the theme in docusaurus.config.js:
docusaurus.config.js
module.exports = {
  title: 'My site',
  // ...
  themes: ['@docusaurus/theme-search-algolia'],
  themeConfig: {
    // ...
  },
};

Em seguida, adicione um campo algolia em seu themeConfig. Solicite ao DocSearch para obter seu índice e chave de API do Algolia.

docusaurus.config.js
module.exports = {
  // ...
  themeConfig: {
    // ...
    algolia: {
      // The application ID provided by Algolia
      appId: 'YOUR_APP_ID',

      // Public API key: it is safe to commit it
      apiKey: 'YOUR_SEARCH_API_KEY',

      indexName: 'YOUR_INDEX_NAME',

      // Optional: see doc section below
      contextualSearch: true,

      // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
      externalUrlRegex: 'external\\.com|domain\\.com',

      // Optional: Algolia search parameters
      searchParameters: {},

      // Optional: path for search page that enabled by default (`false` to disable it)
      searchPagePath: 'search',

      //... other Algolia params
    },
  },
};
info

A opção searchParameters usada para ser nomeada algoliaOptions no Docusaurus v1.

Refer to its official DocSearch documentation for possible values.

warning

The search feature will not work reliably until Algolia crawls your site.

If search doesn't work after any significant change, please use the Algolia dashboard to trigger a new crawl.

Contextual search is enabled by default.

It ensures that search results are relevant to the current language and version.

docusaurus.config.js
module.exports = {
  // ...
  themeConfig: {
    // ...
    algolia: {
      contextualSearch: true,
    },
  },
};

Let's consider you have 2 docs versions (v1 and v2) and 2 languages (en and fr).

When browsing v2 docs, it would be odd to return search results for the v1 documentation. Às vezes os documentos v1 e v2 são bastante semelhantes, e você acabaria com resultados de pesquisa duplicados para a mesma consulta (um resultado por versão).

Similarly, when browsing the French site, it would be odd to return search results for the English docs.

To solve this problem, the contextual search feature understands that you are browsing a specific docs version and language, and will create the search query filters dynamically.

  • on /en/docs/v1/myDoc, search results will only include English results for the v1 docs (+ other unversioned pages)
  • on /fr/docs/v2/myDoc, search results will only include French results for the v2 docs (+ other unversioned pages)
info

When using contextualSearch: true (default), the contextual facet filters will be merged with the ones provided with algolia.searchParameters.facetFilters .

For specific needs, you can disable contextualSearch and define your own facetFilters:

docusaurus.config.js
module.exports = {
  // ...
  themeConfig: {
    // ...
    algolia: {
      contextualSearch: false,
      searchParameters: {
        facetFilters: ['language:en', ['filter1', 'filter2'], 'filter3'],
      },
    },
  },
};

Refer to the relevant Algolia faceting documentation.

Por padrão, o DocSearch vem com um tema fino que foi projetado para acessibilidade, certificando-se de que as cores e contrastes são padrões de respeito.

Still, you can reuse the Infima CSS variables from Docusaurus to style DocSearch by editing the /src/css/custom.css file.

/src/css/custom.css
[data-theme='light'] .DocSearch {
  /* --docsearch-primary-color: var(--ifm-color-primary); */
  /* --docsearch-text-color: var(--ifm-font-color-base); */
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(94, 100, 112, 0.7);
  /* Modal */
  --docsearch-modal-background: var(--ifm-color-secondary-lighter);
  /* Search box */
  --docsearch-searchbox-background: var(--ifm-color-secondary);
  --docsearch-searchbox-focus-background: var(--ifm-color-white);
  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-background: var(--ifm-color-white);
  /* Footer */
  --docsearch-footer-background: var(--ifm-color-white);
}

[data-theme='dark'] .DocSearch {
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(47, 55, 69, 0.7);
  /* Modal */
  --docsearch-modal-background: var(--ifm-background-color);
  /* Search box */
  --docsearch-searchbox-background: var(--ifm-background-color);
  --docsearch-searchbox-focus-background: var(--ifm-color-black);
  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-background: var(--ifm-color-emphasis-100);
  /* Footer */
  --docsearch-footer-background: var(--ifm-background-surface-color);
  --docsearch-key-gradient: linear-gradient(
    -26.5deg,
    var(--ifm-color-emphasis-200) 0%,
    var(--ifm-color-emphasis-100) 100%
  );
}

Personalizando o comportamento de busca do Algolia​

Algolia DocSearch suporta uma lista de opções que você pode passar para o campo algolia no arquivo docusaurus.config.js.

docusaurus.config.js
module.exports = {
  themeConfig: {
    // ...
    algolia: {
      apiKey: 'YOUR_API_KEY',
      indexName: 'YOUR_INDEX_NAME',
      // Options...
    },
  },
};

Editando o componente de pesquisa do Algolia​

Se você preferir editar o componente React de pesquisa do Algolia, passe o componente SearchBar em @docusaurus/theme-search-algolia:

npm run swizzle @docusaurus/theme-search-algolia SearchBar

Suporte​

The Algolia DocSearch team can help you figure out search problems on your site.

You can contact them by email or on Discord.

Docusaurus also has an #algolia channel on Discord.

👥 Using Typesense DocSearch​

Typesense DocSearch works similar to Algolia DocSearch, except that your website is indexed into a Typesense search cluster.

Typesense is an open source instant-search engine that you can either:

Similar to Algolia DocSearch, there are two components:

Read a step-by-step walk-through of how to run typesense-docsearch-scraper here and how to install the Search Bar in your Docusaurus Site here.

You can use a local search plugin for websites where the search index is small and can be downloaded to your users' browsers when they visit your website.

You'll find a list of community-supported local search plugins listed here.

Para usar sua própria pesquisa, passe o componente SearchBar em @docusaurus/theme-classic

npm run swizzle @docusaurus/theme-classic SearchBar

This will create an src/themes/SearchBar file in your project folder. Reinicie o servidor de desenvolvimento e edite o componente, você verá que o Docusaurus utiliza seu próprio componente SearchBar agora.

Notas: Você pode alternativamente deslizar da barra de pesquisa do Algolia e criar seu próprio componente de pesquisa a partir daí.