docsearch

Le moyen le plus simple d'ajouter une recherche à votre documentation – gratuitement.

Documentation • Terrain de jeu JavaScript • Terrain de jeu React

---

DocSearch explore votre documentation, pousse le contenu vers un index Algolia et offre une expérience de recherche déroulante sur votre site Web.

Aperçu

Lumière	Sombre

Usage

Vous n'avez pas encore vos identifiants Algolia ? Postulez à DocSearch !

Javascript

Installation

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

Si vous ne souhaitez pas utiliser de gestionnaire de packages, vous pouvez utiliser un point de terminaison autonome :

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

Commencer

Pour commencer, vous avez besoin d'un container pour votre composant DocSearch. Si vous n'en avez pas déjà un, vous pouvez en insérer un dans votre balisage :

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

Ensuite, insérez-y DocSearch en appelant la fonction docsearch et en fournissant le conteneur. Il peut s'agir d'un sélecteur CSS ou d'un Element.

Assurez-vous de fournir un container (par exemple, un div ), et non un input . DocSearch génère pour vous un champ de recherche entièrement accessible.

 import docsearch from '@docsearch/js' ;

import '@docsearch/css' ;

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

Réagir

Installation

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

Si vous ne souhaitez pas utiliser de gestionnaire de packages, vous pouvez utiliser un point de terminaison autonome :

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

Commencer

DocSearch génère pour vous un champ de recherche entièrement accessible.

 import { DocSearch } from '@docsearch/react' ;

import '@docsearch/css' ;

function App ( ) {
  return (
    < DocSearch
      appId = "YOUR_APP_ID"
      indexName = "YOUR_INDEX_NAME"
      apiKey = "YOUR_SEARCH_API_KEY"
    / >
  ) ;
}

export default App ; 

Stylisme

Lire la documentation →

Projets connexes

DocSearch est composé des référentiels suivants :

• algolia/docsearch : code source de DocSearch.
• algolia/docsearch/packages/website : Site Web et documentation DocSearch.
• algolia/docsearch-configs : configurations de sites Web DocSearch alimentées par DocSearch.
• algolia/docsearch-scraper : robot DocSearch qui extrait les données de votre documentation.

Licence

MIT