Saltar al contenido principal
Versión: Estable (v4.x)

Comenzando con la versión 4

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 →

Introducción​

DocSearch v4 ofrece una mejora significativa respecto a versiones anteriores, proporcionando mejor accesibilidad, capacidad de respuesta y una experiencia de búsqueda optimizada para tu documentación. Desarrollado sobre Algolia Autocomplete, DocSearch v4 garantiza una integración fluida utilizada por los principales sitios de documentación del mundo.

Instalación​

¿Buscas la documentación de la API Composable? Puedes encontrarla aquí.

Los paquetes de DocSearch están disponibles en el registro de npm.

yarn add @docsearch/js@4
# or with npm
npm install @docsearch/js@4

Without package manager​

Include CSS in your website's <head>

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

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

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

Optimizar el rendimiento de la primera consulta​

Mejora la primera experiencia de búsqueda de tus usuarios usando preconnect, consulta Optimización de rendimiento más abajo

Implementación​

DocSearch requires a dedicated container in your HTML

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

Initialize DocSearch by passing your container:

import docsearch from '@docsearch/js';

import '@docsearch/css';

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

DocSearch generates an accessible, fully-functional search input for you automatically.

Prueba rápida (sin credenciales)​

Si deseas probar DocSearch inmediatamente sin tus credenciales, usa nuestra configuración de demostración:

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

O utiliza nuestro nuevo DocSearch Playground dedicado

Uso de DocSearch con Ask AI​

DocSearch v4 introduce compatibilidad con Ask AI, la capacidad de búsqueda avanzada impulsada por IA de Algolia. Ask AI mejora la experiencia del usuario al proporcionar respuestas inteligentes y contextualmente relevantes directamente desde tu documentación.

Para habilitar Ask AI, puedes añadir tu Algolia Assistant ID como una cadena, o usar un objeto para una configuración más avanzada (como especificar un índice diferente, credenciales o parámetros de búsqueda):

docsearch({
  appId: 'YOUR_APP_ID',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
  askAi: 'YOUR_ALGOLIA_ASSISTANT_ID',
});

  • Usa el formato de string para una configuración simple.

  • Usa el formato de objeto para personalizar qué índice, credenciales o filtros utiliza Ask AI.

  • La función de preguntas sugeridas se controla en el Panel de control dentro de la sección de Ask AI.

Filtrado de resultados de búsqueda​

Búsqueda por palabras clave​

Si tu sitio usa 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 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'],
  },
});

Ask AI​

El filtrado también se aplica al usar Ask AI. Esto es útil para limitar el alcance de la búsqueda del LLM solo a resultados relevantes.

información

Recomendamos usar la opción facetFilters cuando utilices Ask AI con múltiples idiomas o cualquier índice multifaceta.

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

Puedes usar facetFilters: ['type:content'] para asegurarte de que Ask AI solo utilice registros donde el atributo type sea content (es decir, solo registros que realmente tienen contenido). Esto es útil si tu índice contiene registros para navegación, metadatos u otros tipos que no son de contenido.

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({
   // other options
+  insights: true,
});

Optimización de rendimiento​

Preconexión​

Mejora la velocidad de carga de tu primera solicitud de búsqueda añadiendo este fragmento en la sección <head> de tu sitio:

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

Esto ayuda al navegador a establecer una conexión rápida con Algolia, mejorando la experiencia de usuario especialmente en dispositivos móviles.