Personalización de DocSearch

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 →

El esquema de color predeterminado de DocSearch utiliza un tema gris con resaltes azules.

Esquema de color

Este tema funciona bien con la mayoría de sitios web, pero te animamos a personalizarlo con tu propio estilo. Puedes lograrlo sobrescribiendo las clases CSS utilizadas en el tema predeterminado.

El siguiente ejemplo anotado te ayudará a estilar cada parte:

/* Main dropdown wrapper */
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
}

/* Main category (eg. Getting Started) */
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
  color: darkgray;
  border: 1px solid gray;
}

/* Category (eg. Downloads) */
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
  color: gray;
}

/* Title (eg. Bootstrap CDN) */
.algolia-autocomplete .algolia-docsearch-suggestion--title {
  font-weight: bold;
  color: black;
}

/* Description description (eg. Bootstrap currently works...) */
.algolia-autocomplete .algolia-docsearch-suggestion--text {
  font-size: 0.8rem;
  color: gray;
}

/* Highlighted text */
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  color: blue;
}

Atribución

Nos complace ofrecer DocSearch gratuitamente para cualquier sitio de documentación, y te animamos a personalizarlo para que coincida con tu propia temática. Solo pedimos que mantengas el logo y enlace "Search by Algolia" junto a tus resultados de búsqueda.

El logo se añade automáticamente en el menú desplegable con el estilo predeterminado. Es nuestra forma de dar a conocer nuestro trabajo y cómo otros podrían beneficiarse de una búsqueda rápida y relevante en sus sitios web.

Si usas tu propia cuenta de pago de Algolia y ejecutas el crawler tú mismo, no necesitas mantener el logo.

Depuración

Para inspeccionar el markup del menú desplegable con las herramientas de desarrollo del navegador, añade debug: true a tu llamada docsearch para evitar que se cierre durante la inspección.

docsearch({
  […],
  debug: true
});

Otras consideraciones

El menú desplegable envuelve las sugerencias seleccionadas en una clase .ds-cursor. Esto significa que puedes usar .ds-cursor .algolia-docsearch-suggestion--content para estilar la sugerencia seleccionada, por ejemplo.

En pantallas pequeñas, DocSearch cambia a un diseño de una columna, mientras que en pantallas más grandes utiliza el diseño de dos columnas mostrado en la captura de pantalla. Puedes añadir media queries (como @media (min-width: 768px) {}) para adaptarte a diferentes pantallas.

Personalización avanzada

Si deseas realizar personalizaciones más profundas, puedes consultar el código fuente SCSS. _variables.scss contiene toda la temática predeterminada, dimensiones y breakpoints.

Puedes generar tu propio archivo CSS clonando el repositorio y ejecutando yarn run build:css. Esto genera el archivo resultante en ./dist/cdn, y deberías usarlo en lugar del predeterminado.