Sidebars

Jede Seite hat eine Sidebar. Diese Sidebars erscheinen, weil ein Sidebar-Makro auf den Seiten enthalten ist, das eine potenziell hierarchische Liste von Links zu anderen Seiten auf dieser Website erstellt.

Wenn ein Sidebar-Makro eingefügt wird, erstellt der Server einen Inhaltsabschnitt, der eine ungeordnete Liste von Links enthält. Die erstellten Links, ihr Anzeigestandort und ihre Darstellungsweise hängen vom verwendeten Makro und den in der Markdown-Makro-Aufruf enthaltenen Parametern ab. Einige Sidebars beinhalten Links basierend auf der Verzeichnisstruktur oder dem Seitentyp. Andere beinhalten eine Liste vordefinierter Seiten, die in Yari festcodiert sind.

Um nur den Inhalt zu inkludieren, der durch ein Sidebar-Makro generiert wird, wird das Makro unmittelbar nach dem Frontmatter und vor dem Inhalt auf jeder Seite eingefügt. Frontmatter ist der Bereich, in dem wir die Metadaten und Optionen für jede Seite festlegen. Das Frontmatter auf MDN umfasst den Seitentitel, den Slug und den Seitentyp, zusammen mit anderen Informationen basierend auf dem Seitentyp, wie der URL der Spezifikation, dem Browser-Kompatibilitätsobjekt usw.

Zum Beispiel sind die ersten Zeilen dieses Dokuments wie folgt geschrieben:

---
title: Sidebars
slug: MDN/Writing_guidelines/Page_structures/Sidebars
page-type: mdn-writing-guide
---

{{MDNSidebar}}

Das Frontmatter ist der Inhalt zwischen den Strichen. Das Sidebar-Makro wird unmittelbar nach dem Frontmatter eingefügt. Das {{MDNSidebar}} ist ein Sidebar-Makro, das die MDN-Sidebar zur Seite hinzufügt. Wenn die Sidebar ein einzelner Makroaufruf ist, wird das Makro unmittelbar nach dem Frontmatter platziert.

Hier sind einige andere Sidebar-Makros und was sie machen:

{{CSSRef}}

Auf jeder CSS-Seite vorhanden, generiert es eine CSS-Sidebar, die Links zu Modulen, Eigenschaften, Selektoren, Kombinatoren, Pseudo-Klassen, Pseudo-Elementen, At-Regeln, Funktionen und Typen enthält, wobei alle Linklisten mit Ausnahme der Linkliste für den aktuellen Seitentyp eingeklappt sind.

{{DefaultAPISidebar("")}}

Die API-Sidebar, die für Übersichtsseiten angezeigt wird; der einzelne Parameter ist der Name der API-Gruppe in GroupData.

{{GlossarySidebar}}

Auf jeder Glossarseite vorhanden, generiert es die Glossar-Sidebar, die die Liste der obersten Glossarbegriffe (nicht die begriffserklärten Begriffe) enthält, vorangestellt durch einen Abschnittsfilter.

{{LearnSidebar}}

Auf jeder Seite innerhalb des Lernbereichs vorhanden, außer bei allgemeinen Fragen und Anleitungsseiten (die das QuickLinksWithSubpages-Makro verwenden), generiert es eine Sidebar basierend auf den festcodierten Links im Yari-Makrofile. Dieses Makro basiert nicht auf der Dateistruktur.

{{HTMLSidebar}}

Generiert die Sidebar für HTML-Dokumentation, einschließlich Tutorials, Referenzen und Leitfäden. Das Makro beinhaltet Aufrufe des {{ ListSubpagesForSidebar}}-Makros für die Element- und Attributreferenzabschnitte, während die Tutorial- und Leitfaden- Links festcodiert sind.

{{HTTPSidebar}}

Generiert die Sidebar für HTTP-Dokumentation, einschließlich Leitfäden und Referenzdokumenten.

{{PWASidebar}}

Generiert die Sidebar für die Dokumentation zu Progressive-Web-Apps (PWA). Das Makro listet alle Seiten auf (es basiert nicht auf der Dateistruktur).

Das geeignete zu verwendende Makro hängt vom Seitentyp ab. Die Vorlage für jeden Seitentyp beinhaltet das passende Makro für diesen Seitentyp.

Sie sollten vorhandene Sidebar-Makros verwenden, ohne sie mit Inhalt zu befüllen. Wenn Sie einen vollkommen neuen Inhaltsbereich erstellen, erstellen Sie ein Makro für Ihre Sidebar in Yari.

Falls Sie in dem unwahrscheinlichen Fall eine temporäre Sidebar erstellen müssen, erklärt dieser Abschnitt, wie das gemacht werden kann. Reichen Sie Ihre temporäre Sidebar nicht zur PR-Bewertung ein, da sie nicht genehmigt wird.

Falls Sie ein neues Sidebar-Makro erstellen müssen, können Sie dies in Ihrer Entwicklungsumgebung entwickeln, indem Sie folgende Schritte befolgen:

1. Entfernen Sie das Sidebar-Makro, das unmittelbar nach dem Frontmatter und vor dem Inhalt erscheint, da jedes Dokument nur eine Sidebar haben kann.
2. Am Ende der Markdown-Datei fügen Sie ein HTML <section>-Element hinzu und setzen die id des Elements auf Quick_links.
3. Fügen Sie ein {{ListSubpagesForSidebar()}}-Makro mit dem Slug des Verzeichnisses für jeden Abschnitt des Inhalts, den Sie in die Sidebar aufnehmen möchten, zusammen mit zusätzlichem Markdown, zwischen den öffnenden und schließenden <section>-Tags hinzu.

Zum Beispiel, wenn wir die Accessibility-Sidebar entwickeln, könnten wir vorübergehend das Folgende am Ende einer Markdown-Datei einfügen (und jedes Sidebar-Makro unter dem Frontmatter entfernen), um eine Sidebar zu erstellen, die die Links zu allen ARIA-Rollen-Seiten enthält, vorangestellt durch einen Link zur ARIA-Rollen-Übersichtsseite:

<section id="Quick_links">

1. [**Accessibility**](/en-US/docs/Web/Accessibility)

   {{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility")}}

2. [**ARIA roles**](/en-US/docs/Web/Accessibility/ARIA/Roles)

   {{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles", "true")}}

3. [**ARIA attributes**](/en-US/docs/Web/Accessibility/ARIA/Attributes)

   {{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Attributes", "true")}}

</section>

Wenn sie als letzter Inhalt auf der Seite gelistet ist, erkennt Yari, die Engine, die MDN rendert, die Quick_links-ID im öffnenden Tag und wandelt den Inhalt des identifizierten <section> in eine Sidebar um.

Das {{ListSubpagesForSidebar()}}-Makro fügt den Baum der Unterseiten für die Seite ein, deren Slug als erster Parameter angegeben ist. Das obige erstellt eine Sidebar, die einen Link zu allen Accessibility-Dokumenten enthält, gefolgt von den ARIA-Rollen und -Attributen.

Sobald Sie die Links bestimmt haben, die Sie in Ihrer Sidebar aufnehmen möchten, reichen Sie eine Pull-Anfrage an Yari mit Ihrem vorgeschlagenen Sidebar-Makro ein.

Der Makro-Quellcode befindet sich auf GitHub. Jedes Makro enthält die Dokumentation für sich selbst, einschließlich, falls vorhanden, der Parameter.

• Verwendung von Makros
• Inhaltslink-Makros
• Seitensektions-Makros
• Banner- und Hinweis-Makros
• Alle Makros auf GitHub