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

Durch die Verwendung des Starlight Sidebar Topics-Plugins zusammen mit der Starlight Sidebar Topics Dropdown-Komponente können Sie eine Website erstellen, die auf dem Desktop eine Themenliste und im mobilen Bereich ein Dropdown-Menü anzeigt.

Voraussetzungen

Sie benötigen eine bestehende Starlight-Website.

Installieren Sie die Pakete

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

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 Setup-Anleitungen von Starlight Sidebar Topics und Starlight Sidebar Topics Dropdown.

In der Setup-Anleitung der Dropdown-Komponente haben Sie eine Sidebar-Komponente erstellt, die nur das Dropdown-Menü rendert. Jetzt müssen Sie diese Komponente so ändern, dass sie auch die standardmäßige Sidebar rendert, wenn der Benutzer einen Desktop verwendet.

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:

Endgültiges Ergebnis mit der Desktop-Ansicht links und der mobilen Ansicht rechts

Sie finden den vollständigen Quellcode dieses Guides in diesem StackBlitz-Beispiel.

Unendliche Möglichkeiten

Sie könnten es auch umgekehrt machen (Liste auf Mobilgeräten, Dropdown auf Desktops), indem Sie die Eigenschaften display: block und display: none im CSS vertauschen.

Außerdem könnten Sie auch Ihre eigene Anzeige-Komponente erstellen, die die Routendaten aus dem Starlight Sidebar Topics-Plugin verwendet und die Themen auf eine benutzerdefinierte Weise rendert. Dies ist etwas fortgeschrittener, aber Sie finden weitere Informationen dazu in der Dokumentation “Benutzerdefinierte Themenliste”.