Comment rendre les éléments de la barre latérale Starlight plus attrayants
Cette traduction a été générée par une IA générative à l'aide de la traduction continue Action. →
Vous êtes-vous déjà demandé pourquoi votre barre latérale [Starlight][starlight] n’est pas si attrayante ? Saviez-vous combien l’espace entre les éléments de votre barre latérale est inconsciemment important ? La taille de la police, le poids et les petites différences de couleur ? Dans ce guide, nous examinerons comment personnaliser l’apparence de votre barre latérale Starlight avec des étapes rapides et faciles.
Tout d’abord, vous devez [configurer votre site Starlight][starlight-getting-started]. Ensuite, Starlight offre un [guide sur la personnalisation des styles appliqués à votre site Starlight][starlight-css], qui est la fonctionnalité que nous utiliserons dans cet article.
Comme décrit dans [ce guide][starlight-css-custom], vous devez créer un fichier .css quelque part dans votre répertoire src/, où vous pouvez définir vos styles CSS. N’oubliez pas d’ajouter le chemin vers ce fichier .css dans le tableau customCss de Starlight dans le fichier astro.config.mjs :
import { defineConfig } from 'astro/config';import starlight from '@astrojs/starlight';
export default defineConfig({ integrations: [ starlight({ title: 'Docs With Custom CSS', customCss: [ // Relative path to your custom CSS file './src/styles/custom.css', ], }), ],});Après avoir terminé ces étapes de préparation, vous êtes prêt à essayer quelques ajustements intéressants à la conception de la barre latérale de Starlight.
Il existe une infinité de possibilités différentes auxquelles vous pouvez jouer simplement avec votre CSS personnalisé. Je vais vous donner quelques idées que j’ai trouvées très utiles en expérimentant avec la conception de la barre latérale. Bien que certaines de ces idées puissent sembler absurdes, je vous promets que la combinaison de quelques-unes d’entre elles rendra votre barre latérale Starlight encore meilleure.
Mais avant cela, je vais vous montrer à quoi ressemble actuellement le style par défaut de la barre latérale Starlight :
Au niveau racine de votre barre latérale Starlight, il existe deux types d’éléments différents : pages et groupes. Bien que le style par défaut soit assez correct, je trouve que les espaces blancs - c’est-à-dire la marge entre les éléments qui n’inclut aucun contenu - sont un peu trop grands, surtout entre les éléments de niveau racine. Avec cet exemple de CSS personnalisé ci-dessous, j’ai réduit la marge entre les éléments de niveau racine tout en conservant la marge entre les groupes. Les styles CSS importants sont surlignés dans le bloc de code.
sl-sidebar-state-persist ul.top-level > li:not(:has(details)) { margin-top: 0rem;}sl-sidebar-state-persist ul.top-level > li:has(details) { margin-block: 0.5rem; /* default value */}
Peut-être que cela ne sera pas aussi utile pour vous parce que vous n’utilisez pas de pages de niveau racine dans votre barre latérale, donc cet effet ne sera pas perceptible pour vous. Mais si c’est le cas, essayez-le.
[À mon avis][imho], ce qui me dérange le plus avec les éléments de niveau racine de la barre latérale de Starlight, c’est leur caractère gras. C’est probablement une opinion très subjective, mais si vous me demandez, une seule page ne peut pas être aussi importante qu’un groupe entier de pages dans votre documentation. Par conséquent, j’ai rendu le poids de la police des éléments de niveau racine plus léger, comme vous pouvez le voir dans le bloc de code ci-dessous.
sl-sidebar-state-persist ul.top-level > li > a[aria-current="page"] { font-weight: 600; /* default value */}sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { font-weight: 400;}
Un petit changement mais subtil : j’ai rendu les éléments de niveau racine non sélectionnés plus ternes dans le bloc de code ci-dessous.
Si vous choisissez d’utiliser ce design également, je recommande de n’appliquer que la deuxième règle CSS puisque la première revient simplement à démontrer comment ajuster le style des éléments de niveau racine sélectionnés — cette règle s’applique également aux autres blocs de code dans ce blog s’ils sont marqués comme valeur par défaut.
sl-sidebar-state-persist ul.top-level > li > a[aria-current="page"] { color: var(--sl-color-text-invert); /* default value */}sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { color: var(--sl-color-gray-2);}
Bien que je ne le recommande pas, vous pouvez également ajuster la taille de la police des éléments de la barre latérale. Avec cet exemple de CSS personnalisé ci-dessous, j’ai réduit la taille de la police des éléments de niveau racine.
sl-sidebar-state-persist ul.top-level > li > a { font-size: var(--sl-text-sm);}
Pour résumer, je recommande d’appliquer un mélange des options de personnalisation ci-dessus, que vous pouvez facilement vérifier dans un seul fichier .css.
Notez que j’utilise également les [niveaux de cascade][starlight-css-cascade-layers], pris en charge depuis [Starlight 0.34.0][starlight-0-34], et je recommande de les utiliser pour spécifier l’ordre dans lequel les styles CSS sont appliqués.
@layer starlight, my-starlight-sidebar;
@layer my-starlight-sidebar { sl-sidebar-state-persist ul.top-level > li:not(:has(details)) { margin-block: 0rem; } sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { font-weight: 400; color: var(--sl-color-gray-2); }}