Wie Sie die Elemente Ihrer Starlight-Seitenleiste verbessern können
Haben Sie sich jemals gefragt, warum Ihre [Starlight][starlight]-Seitenleiste nicht so ansprechend aussieht? Wussten Sie, wie wichtig der Platz zwischen den Elementen in Ihrer Seitenleiste unbewusst ist? Die Schriftgröße, das Gewicht und kleine Farbabstufungen? In diesem Leitfaden werfen wir einen Blick darauf, wie Sie das Erscheinungsbild Ihrer Starlight-Seitenleiste mit ein paar schnellen und einfachen Schritten anpassen können.
Zuerst müssen Sie Ihre [Starlight-Seite einrichten][starlight-getting-started]. Anschließend bietet Starlight einen [Leitfaden zur Anpassung von Stilen, die auf Ihre Starlight-Seite angewendet werden][starlight-css], und genau dieses Feature werden wir heute verwenden.
Wie in [diesem Leitfaden][starlight-css-custom] beschrieben, müssen Sie eine .css-Datei irgendwo in Ihrem src/-Verzeichnis erstellen, in der Sie Ihre CSS-Stile definieren können. Vergessen Sie nicht, den Pfad zu dieser .css-Datei in Starlight’s customCss-Array in astro.config.mjs hinzuzufügen:
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', ], }), ],});Nach Abschluss dieser Vorbereitungsschritte sind Sie bereit, einige schöne Anpassungen am Design der Starlight-Seitenleiste auszuprobieren.
Es gibt unendlich viele Möglichkeiten, mit Ihrem benutzerdefinierten CSS zu experimentieren. Ich werde Ihnen einige Ideen geben, die ich selbst beim Spielen mit dem Design der Seitenleiste sehr hilfreich fand. Auch wenn einige dieser Ideen für Sie albern erscheinen mögen, verspreche ich, dass die Kombination einiger davon Ihre Starlight-Seitenleiste noch besser aussehen lassen wird.
Aber bevor ich das tue, zeige ich Ihnen, wie das Standarddesign der Starlight-Seitenleiste derzeit aussieht:
Auf der Root-Ebene Ihrer Starlight-Seitenleiste gibt es zwei verschiedene Arten von Elementen: Seiten und Gruppen. Während das Standarddesign ziemlich anständig ist, fand ich die Leerzeichen – der Abstand zwischen den Elementen, der selbst keinen Inhalt enthält – etwas zu groß, besonders zwischen Elementen auf Root-Ebene. Mit diesem Beispiel benutzerdefinierten CSS unten habe ich den Abstand zwischen den Elementen auf Root-Ebene verkleinert, während der Abstand zwischen den Gruppen gleich bleibt. Die wichtigen CSS-Stile sind im Codeblock hervorgehoben.
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 */}
Vielleicht ist dies für Sie nicht so nützlich, weil Sie keine Root-Level-Seiten in Ihrer Seitenleiste verwenden, sodass dieser Effekt für Sie nicht bemerkbar ist. Aber wenn doch, probieren Sie es aus.
[IMHO][imho], das eine, was mich an den Root-Level-Elementen in der Starlight-Seitenleiste am meisten stört, ist deren Fettdruck. Das ist wahrscheinlich eine sehr subjektive Meinung, aber wenn Sie mich fragen: Eine einzige Seite kann unmöglich so wichtig sein wie eine ganze Gruppe Seiten in Ihrer Dokumentation. Daher habe ich das Schriftgewicht der Elemente auf Root-Ebene dünner gemacht, wie Sie im folgenden Codeblock sehen können.
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;}
Eine kleine, aber subtile Änderung: Ich habe unselektierte Root-Level-Einträge in der Seitenleiste mit einem schwächeren Erscheinungsbild versehen, wie im folgenden Codeblock gezeigt.
Wenn Sie sich entscheiden, dieses Design ebenfalls zu verwenden, empfehle ich, nur die zweite CSS-Manipulation anzuwenden, da die erste nur zur Demonstration dient, wie Sie das Styling von ausgewählten Root-Level-Elementen anpassen könnten – diese Regel gilt auch für andere Codeblöcke in diesem Blog, wenn sie als default value gekennzeichnet sind.
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);}
Obwohl ich es nicht empfehle, können Sie auch die Schriftgröße der Seitenleisten-Elemente anpassen. Mit diesem Beispiel benutzerdefinierten CSS unten habe ich die Schriftgröße der Elemente auf Root-Ebene verkleinert.
sl-sidebar-state-persist ul.top-level > li > a { font-size: var(--sl-text-sm);}
Zusammenfassend empfehle ich, dass Sie eine Mischung aus den oben genannten Anpassungsoptionen anwenden, die Sie bequem in einer einzigen .css-Datei sehen können.
Beachten Sie, dass ich auch [Cascade Layers][starlight-css-cascade-layers] verwende, die seit [Starlight 0.34.0][starlight-0-34] unterstützt werden, und empfehle, diese zu verwenden, um die Reihenfolge der angewendeten CSS-Stile festzulegen.
@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); }}