Personnalisation de DocSearch
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 →
La palette de couleurs par défaut de DocSearch utilise un thème gris avec des surbrillances bleues.
Palette de couleurs
Ce thème convient à la plupart des sites, mais nous vous encourageons à l'adapter à votre propre charte graphique. Pour cela, vous pouvez surcharger les classes CSS utilisées par le thème par défaut.
L'exemple annoté suivant vous aidera à styliser chaque élément :
/* 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;
}
Reconnaissance
Nous sommes heureux de fournir DocSearch gratuitement pour toute documentation, et vous pouvez le personnaliser selon votre thème. Nous vous demandons simplement de conserver le logo "Search by Algolia" avec son lien à côté des résultats de recherche.
Le logo est automatiquement ajouté dans le menu déroulant avec le style par défaut. C'est notre façon de faire connaître nos services et comment vos visiteurs pourraient bénéficier d'une recherche rapide et pertinente sur leur site.
Si vous utilisez votre propre compte Algolia payant et exécutez le crawler vous-même, vous n'êtes pas obligé de conserver le logo.
Débogage
Pour inspecter le balisage du menu déroulant avec les outils de développement, ajoutez debug: true à votre appel docsearch pour empêcher sa fermeture pendant l'inspection.
docsearch({
[…],
debug: true
});
Autres considérations
Le menu déroulant encapsule les suggestions sélectionnées dans une classe .ds-cursor. Vous pouvez donc utiliser .ds-cursor .algolia-docsearch-suggestion--content pour styliser la suggestion sélectionnée par exemple.
Sur les petits écrans, DocSearch utilise une disposition sur une colonne, tandis que les écrans plus larges utilisent la disposition à deux colonnes illustrée dans la capture. Vous pouvez ajouter des media queries (par exemple @media (min-width: 768px) {}) pour cibler différents affichages.
Personnalisation avancée
Si vous souhaitez effectuer des personnalisations plus poussées, consultez le code source SCSS. Le fichier _variables.scss contient toutes les variables par défaut pour le thème, les dimensions et les points de rupture.
Vous pouvez générer votre propre fichier CSS en clonant le dépôt et exécutant yarn run build:css. Le fichier résultat se trouve dans ./dist/cdn, que vous devrez utiliser à la place de la version par défaut.