Starlight Themen-Dropdown und Liste zusammen

Diese Übersetzung wurde von einer generativen KI mithilfe von Action Continuous Translation erstellt. →

A beautiful cover image with the text "Dropdown and List?"

13.05.2025 • 2 min Lesezeit • 300 Wörter

Mit dem Starlight Sidebar Topics Plugin zusammen mit der Starlight Sidebar Topics Dropdown Komponente können Sie eine Website erstellen, die eine Themenliste auf dem Desktop und ein Dropdown-Menü auf mobilen Geräten bietet.

Voraussetzungen

Sie benötigen eine bestehende Starlight-Website.

Pakete installieren

Zuerst installieren Sie das starlight-sidebar-topics Plugin sowie die starlight-sidebar-topics-dropdown Komponente:

npm install starlight-sidebar-topics starlight-sidebar-topics-dropdown

pnpm add starlight-sidebar-topics starlight-sidebar-topics-dropdown

yarn add starlight-sidebar-topics starlight-sidebar-topics-dropdown

Anschließend folgen Sie den Einrichtungsanleitungen von Starlight Sidebar Topics und Starlight Sidebar Topics Dropdown.

In der Einrichtungsanleitung der Dropdown-Komponente haben Sie eine Sidebar-Komponente erstellt, die nur das Dropdown-Menü rendert. Nun müssen Sie diese Komponente anpassen, sodass sie auch die Standard-Sidebar rendert, wenn der Benutzer am Desktop ist.

1
---
2
import Default from '@astrojs/starlight/components/Sidebar.astro';
3
import Topics from 'starlight-sidebar-topics/components/Sidebar.astro';
4
import TopicsDropdown from 'starlight-sidebar-topics-dropdown/TopicsDropdown.astro';
5
---
6

7
<div class="topics">
8
  <Topics/>
9
</div>
10
<div class="topics-dropdown">
11
  <TopicsDropdown/>
12
</div>
13
<Default><slot /></Default>
14

15
<style>
16
  /* Hide topics by default and show them on medium screens and larger */
17
  .topics {
18
    display: none;
19
  }
20

21
  @media (min-width: 800px) {
22
    .topics {
23
      display: block;
24
    }
25
  }
26

27
  /* Show topics dropdown on small screens and hide it on medium screens and larger */
28
  .topics-dropdown {
29
    display: block;
30
  }
31

32
  @media (min-width: 800px) {
33
    .topics-dropdown {
34
      display: none;
35
    }
36
  }
37
</style>

Ergebnis

Wenn Sie diese Schritte befolgen, sieht Ihre Sidebar folgendermaßen aus:

Endergebnis mit Desktop-Ansicht auf der linken und mobiler Ansicht auf der rechten Seite

Den vollständigen Quellcode dieser Anleitung finden Sie in diesem StackBlitz-Beispiel.

Unbegrenzte Möglichkeiten

Sie könnten es auch umgekehrt machen (Liste auf mobilen Geräten, Dropdown auf dem Desktop), indem Sie die CSS-Eigenschaften display: block und display: none tauschen.

Darüber hinaus könnten Sie auch eine eigene Anzeige-Komponente erstellen, die die Routendaten aus dem Starlight Sidebar Topics Plugin verwendet und die Themen auf eine benutzerdefinierte Weise rendert. Das ist etwas anspruchsvoller, aber Sie finden weitere Informationen dazu in der “Custom Topics List”-Dokumentation.