Aller au contenu principal
Version : Ancienne (v3.x)

Premiers pas

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

info

Le contenu suivant concerne DocSearch v3. Si vous utilisez DocSearch v2, consultez la documentation héritée.

Si vous recherchez DocSearch v4, consultez la documentation ici.

Introduction​

DocSearch v3 est construit sur la dernière version d'Algolia Autocomplete, qui offre une meilleure accessibilité, une réactivité accrue, une personnalisation thématique, un design intégré amélioré et une adaptabilité dans des conditions de réseau limité.

Cette version a été réécrite en React et expose désormais des composants React. La version JavaScript vanilla repose sur la version React avec un alias vers Preact.

Version stable​

Avec la récente publication de la version stable d'Algolia Autocomplete et l'adoption massive de DocSearch v3, nous commençons à travailler sur une version stable !

Un grand merci à tous les testeurs Alpha et à toutes les intégrations qui le prennent déjà en charge !

Installation​

Les packages DocSearch sont disponibles sur le registre npm.

yarn add @docsearch/js@3
# or
npm install @docsearch/js@3

Without package manager​

If you don't want to use a package manager, you can add the CSS to the <head> of your website:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

And the JavaScript at the end of your <body>:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

Améliorer la vitesse de la première requête​

Vous pouvez indiquer au navigateur d'améliorer la vitesse de la première requête en ajoutant un preconnect, voir #preconnect

Mise en œuvre​

To get started, you need a container for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:

<div id="docsearch"></div>

Then, insert DocSearch into it by calling the docsearch function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (for example, a div), not an input. DocSearch generates a fully accessible search box for you.

import docsearch from '@docsearch/js';

import '@docsearch/css';

docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
});

Tests​

Si vous êtes impatient de tester DocSearch v3 et ne pouvez pas attendre vos identifiants, vous pouvez utiliser les nôtres !

docsearch({
  appId: 'PMZUYBQDAK',
  apiKey: '24b09689d5b4223813d9b8e48563c8f6',
  indexName: 'docsearch',
});

Filtrage de votre recherche​

Si votre site prend en charge les balises meta DocSearch ou si vous avez ajouté des variables personnalisées à votre configuration, vous pourrez utiliser l'option facetFilters pour limiter vos résultats de recherche à une facet.

Cela permet de limiter la portée de la recherche à une langue ou une version spécifique.

docsearch({
  searchParameters: {
    facetFilters: ['language:en', 'version:1.0.0'],
  },
});

Envoi d'événements​

Vous pouvez envoyer des événements de recherche à votre index DocSearch en passant le paramètre insights lors de la création de votre instance DocSearch.

docsearch({
  searchParameters: {
    facetFilters: ['language:en', 'version:1.0.0'],
  },
  insights: true,
});

Optimisation des performances​

Préconnexion (Preconnect)​

En ajoutant cet extrait dans le head de votre site, vous pouvez indiquer au navigateur que le site chargera des données depuis Algolia, lui permettant ainsi d'établir une préconnexion au cluster DocSearch. Cela accélère la première requête, particulièrement sur mobile.

<link rel="preconnect" href="https://YOUR_APP_ID-dsn.algolia.net" crossorigin />