Zum Inhalt springen
Deep Thoughts

Wie Sie einen horizontalen Fortschrittsanzeiger für Ihre Starlight-Seite erstellen

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

A beautiful cover image with the text "Progress Bar"
• 2 min Lesezeit • 300 Wörter
Frostybee
Frostybee
 Felix Schneider
Felix Schneider
trueberryless

In diesem Beitrag möchten wir Ihnen zeigen, wie frostybeeFrostyBee einen einfachen horizontalen Fortschrittsanzeiger für Starlight-Seiten erstellt hat.

Voraussetzungen

Sie benötigen eine bestehende Starlight-Website.

Erstellen Sie die Fortschrittsanzeiger-Komponente

Lassen Sie uns eine neue Komponente namens ProgressIndicator.astro im Verzeichnis src/components/ erstellen. Diese Komponente ist für die Darstellung des Fortschrittsanzeigers verantwortlich.

Wir erstellen einen Container, der die gesamte Breite einnimmt, mit der Fortschrittsleiste <div> darin. Die Breite des inneren <div> wird aktualisiert, wann immer der Benutzer scrollt (und wenn die Seite lädt), um die aktuelle Scroll-Position widerzuspiegeln.

src/components/ProgressIndicator.astro
<div class="progress-scroll-container" aria-hidden="true">
  <div id="progress-scroll"></div>
</div>


<script>
  window.addEventListener("scroll", function () {
    updateProgressScroll();
  });
  window.addEventListener("load", function () {
    updateProgressScroll();
  });


  function updateProgressScroll() {
    if (document) {
      const progressScroll = document.getElementById("progress-scroll");
      if (progressScroll) {
        var scrollTop = window.scrollY || document.documentElement.scrollTop;
        var scrollHeight =
          document.documentElement.scrollHeight - window.innerHeight;
        var progress = (scrollTop / scrollHeight) * 100;
        progressScroll.style.width = progress + "%";
      }
    }
  }
</script>


17 ausgeblendete Zeilen
<style>
  html:is(:not([data-has-hero]), [data-has-sidebar], [data-has-toc]) .progress-scroll-container {
    position: fixed;
    top: var(--sl-nav-height);
    left: 0;
    height: 0.25rem;
    width: 100%;
    background-color: transparent;
    z-index: 3;
  }


  #progress-scroll {
    height: 100%;
    width: 0px;
    background-color: var(--sl-color-accent-high);
  }
</style>


<style is:global>
  #starlight__on-this-page--mobile {
    margin-top: 0.25rem;
  }
</style>

In den ausgeblendeten Zeilen befindet sich das Styling, das sicherstellt, dass die Fortschrittsleiste wie eine typische Fortschrittsleiste aussieht. Sie ist auch an Starlight angepasst, da die Leiste automatisch ausgeblendet wird, wenn die Website keine Seitenleiste und Inhaltsübersicht hat, aber ein Hero-Element wie die meisten Landingpages besitzt.

Ein wichtiger Punkt ist, was das globale CSS (Zeile 45) bewirkt: Es schiebt das Dropdown-Menü der mobilen Inhaltsübersicht nach unten, um mehr Leerraum für die Fortschrittsleiste zu schaffen. Dies ist eine persönliche Präferenz, und Sie können es entfernen, wenn Sie möchten.

Starlight-Override

Nun können wir diese Komponente in einem Starlight-Override verwenden. In diesem Fall ergibt es Sinn, die Header.astro-Komponente wie folgt zu überschreiben:

src/components/Header.astro
---
import Default from "@astrojs/starlight/components/Header.astro";
import ScrollIndicator from "./ScrollIndicator.astro";
---


<Default><slot /></Default>
<ScrollIndicator />

Vergessen Sie nicht, diesen Komponenten-Override in Ihrer astro.config.mjs-Datei hinzuzufügen:

astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';


export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs with a Progress Indicator',
      components: {
        // Override the default `Header` component.
        Header: './src/components/Header.astro',
      },
    }),
  ],
});

Quellcode

Den gesamten Projektcode finden Sie auf GitHub und in diesem Stackblitz-Beispiel.

Fazit

Mit dieser Konfiguration wird der Fortschrittsanzeiger auf jeder Seite (außer Landingpages) Ihrer Starlight-Seite angezeigt. 🥳

Sie können auch frostybeeFrostyBee’s Starlight Scroll To Top-Plugin ausprobieren, das seit der Version 0.3.1 auch einen integrierten Progress Ring unterstützt. 🙌

Stichwörter: