Saltar al contenido principal
Versión: Legado (v3.x)

Primeros pasos

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

información

El siguiente contenido es para DocSearch v3. Si estás usando DocSearch v2, consulta la documentación legacy.

Si buscas DocSearch v4, consulta la documentación aquí.

Introducción​

DocSearch v3 está construido sobre la última versión de Algolia Autocomplete, que ofrece mejor accesibilidad, mayor capacidad de respuesta, personalización temática, diseño integrado mejorado y adaptabilidad en condiciones de red limitada.

Esta versión ha sido reescrita en React y ahora expone componentes React. La versión vanilla JavaScript se basa en la versión React con un alias a Preact.

Versión estable​

¡Con el reciente lanzamiento de la versión estable de Algolia Autocomplete y la gran adopción de DocSearch v3, comenzaremos a trabajar en un lanzamiento estable!

¡Gracias a todos los probadores Alpha y a todas las integraciones que ya lo soportan!

Instalación​

Los paquetes de DocSearch están disponibles en el registro de 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>

Mejorar velocidad de primera consulta​

Puedes sugerir al navegador mejorar la velocidad de la primera consulta añadiendo un preconnect, consulta #preconnect

Implementación​

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',
});

Pruebas​

Si estás ansioso por probar DocSearch v3 y no puedes esperar tus credenciales, ¡puedes usar las nuestras!

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

Filtrar tu búsqueda​

Si tu sitio web soporta etiquetas meta de DocSearch o has añadido variables personalizadas a tu configuración, podrás usar la opción facetFilters para delimitar tus resultados de búsqueda a un facet

Esto es útil para limitar el alcance de la búsqueda a un idioma o versión específica.

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

Envío de eventos​

Puedes enviar eventos de búsqueda a tu índice de DocSearch pasando el parámetro insights al crear tu instancia de DocSearch.

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

Optimización de rendimiento​

Preconexión​

Al añadir este fragmento al head de tu sitio web, puedes indicar al navegador que cargará datos de Algolia, permitiéndole preconectarse al clúster de DocSearch. Esto acelera la primera consulta, especialmente en móviles.

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