Seitentypen

Es gibt eine Vielzahl von Seitentypen, die auf MDN wiederholt verwendet werden. Dieser Artikel beschreibt diese Seitentypen, ihren Zweck und gibt Beispiele für jeden und Vorlagen, die bei der Erstellung einer neuen Seite verwendet werden können.

Es gibt drei Hauptkategorien von Seitentypen auf MDN, obwohl einige Seitentypen in mehr als eine Kategorie fallen können.

  • Referenz-Seiten beschreiben die Details von etwas und sind gemäß der Struktur des beschriebenen Gegenstands organisiert.
  • Leitfaden-Seiten beschreiben, wie man etwas tut oder benutzt, und sind basierend auf den Zielen des Lesers organisiert.
  • Navigations-Seiten existieren hauptsächlich, um Links zu anderen Seiten, üblicherweise zu verwandten Themen, bereitzustellen.

Erstellen einer neuen Seite

Um neue Seiten auf MDN zu erstellen, müssen Sie GitHub verwenden – schauen Sie sich unseren Content-Repo Bereich über das Hinzufügen eines neuen Dokuments für weitere Anweisungen an.

Wie man die Vorlagen verwendet

Beim Erstellen einer neuen Seite können Sie sicherstellen, dass Sie die richtige Seitenstruktur/inhalte verwendet haben, indem Sie sich auf eine unserer Seitentemplates beziehen – siehe die Abschnitte unten. Sie können den exakten Quellcode jeder Vorlage (falls Sie ihn kopieren möchten) finden, indem Sie dem "Source on GitHub" Link am Ende jeder Vorlage folgen. Diese Seitentemplates machen als veröffentlichte Seiten nicht viel Sinn, aber wenn Sie ihren Quellcode betrachten, werden Sie sehen, dass sie viele hilfreiche Kommentare, Platzhalter und Hinweise enthalten, wie man die fehlenden Informationen ausfüllt und Ihre Seite erstellt.

Oben in jeder Vorlage finden Sie einen Abschnitt mit dem Titel Remove before publishing – dieser enthält Informationen darüber, wie Sie den Seitentitel, das Slug, das Seitenleistenmenü und Tags ausfüllen (z. B. Informationen, die nicht tatsächlich im Körper des Artikels erscheinen). Sie müssen diesen Abschnitt löschen, nachdem Sie die Anweisungen darin befolgt haben, bevor die Seite als fertig angesehen werden kann.

Alte Seitendesigns

Manchmal stoßen Sie auf alte Referenzseiten, die sich deutlich von den hier vorgestellten Vorlagen unterscheiden. Beispielsweise hatten alte Schnittstellenseiten alle Informationen zu den Mitgliedern der Schnittstellen auf einer einzigen Seite, und individuelle Methoden-/Eigenschafts-/Konstruktor-/Ereignislistener-Seiten existierten nicht.

Wenn Sie auf eine Gruppe alter Seiten stoßen, würden wir uns freuen, wenn Sie sie auf den neuen Stil aktualisieren! Wir schätzen jedoch, dass dies eine große Menge an Arbeit sein kann. Wenn die zu aktualisierenden Informationen nicht zu umfangreich sind und Sie etwas freie Zeit haben, versuchen Sie bitte, sie auf den neuen Stil zu aktualisieren.

Falls die Arbeit erheblich ist, sollten Sie bei der Priorisierung der Arbeit einige Faktoren berücksichtigen:

  • Wie veraltet sind die Informationen?
  • Wie niedrig ist die Qualität der Informationen?
  • Wie beliebt ist die Funktion? Wie gefragt sind die Informationen?

Wenn Sie ein Team zusammenstellen möchten, um an einem Update zu arbeiten, oder wenn Sie einfach nur einen Inhalt melden oder besprechen möchten, der ein Update benötigt, können Sie gerne ein Content-Problem melden oder uns um Hilfe bitten.

Der "page-type" Front Matter Key

Wir haben einen Front Matter Key page-type definiert, um den Typ von MDN-Seiten klar zu identifizieren. Die unten verlinkten Templates geben an, welche page-type Werte Sie für jeden Seitentyp festlegen sollten.

Für die vollständige Liste der Seitentypen siehe Der "page-type" Front Matter Key.

Seitentemplates

Unten sind Beispiele für die verschiedenen Seiten, die Sie auf MDN finden, zusammen mit Vorlagen, die verwendet werden können, um neue Inhalte basierend auf dem Typ der zu präsentierenden Inhalte zu erstellen, einschließlich der folgenden Seiten:

Jeder Abschnitt enthält Links zu Live-Beispielseiten für diesen Seitentyp.

API-Startseite

Eine API Startseite bietet einen Überblick darüber, was eine bestimmte API macht, sowie Links zur Dokumentation für jede der von der API angebotenen Schnittstellen, Globals, Funktionen etc. Sie verlinkt nicht direkt auf spezifische Methoden oder Eigenschaften innerhalb der API-Klassen, außer im Kontext des Überblickstextes. Sie ist primär eine Navigations Seite, dient aber auch als ein schnell einsehbares Referenz Seite für die API.

Es gibt einige Fälle, in denen mehrere APIs existieren, die eigenständig sind und in ihren eigenen Spezifikationen definiert sind, aber eng verwandt sind und daher sinnvollerweise mit einer einzigen API-Startseite abgedeckt werden könnten. Zum Beispiel deckt die Generic Sensor API allgemeine Sensorbelange ab, aber spezifischere Belange werden in anderen APIs wie der Ambient Light Sensor, Motion Sensor etc. abgedeckt. In solchen Fällen sind viele der grundlegenden Konzepte dieselben, sodass es keinen Sinn macht, diese auf mehreren Startseiten zu wiederholen. In einem solchen Fall wäre es bezüglich Wiederholung und Auffindbarkeit sinnvoller, sie unter einer einzigen "Websensoren" Startseite zu behandeln.

Beispiel

Vorlagen

API-Referenzseite

Hinweis: Auch bekannt als Schnittstellen-Startseite.

Eine API-Referenzseite listet alle Methoden, Eigenschaften, Events usw. auf, die Mitglieder einer bestimmten Schnittstelle oder Klasse sind. Sie bietet einen Überblick darüber, was die Klasse oder Schnittstelle macht oder wofür sie verwendet wird, und gibt Links zur Dokumentation für jedes dieser Mitglieder. Sie ist detaillierter als eine API-Startseite, die typischerweise zu mehreren API-Referenzseiten verlinkt.

Beispiel

Vorlagen

API-Referenz-Unterseite

Eine API-Referenz-Unterseite ist ein Kind einer API-Referenzseite. Sie dokumentiert ein einzelnes Mitglied der Schnittstelle im Detail.

Beispiele

Vorlagen

HTML-Element-Referenzseite

Eine HTML-Referenzseite listet alle Attribute auf, die auf ein HTML-Element angewendet werden können, erklärt den Zweck und die Verwendung des Elements und liefert Beispiele, Browser-Kompatibilitätsinformationen und andere wichtige Daten.

Beispiel

Vorlagen

SVG-Element-Referenzseite

Eine SVG-Referenzseite listet alle Attribute auf, die auf ein SVG-Element angewendet werden können, erklärt den Zweck und die Verwendung des Elements und liefert Beispiele, Browser-Kompatibilitätsinformationen und andere wichtige Daten.

Beispiel

Vorlagen

CSS-Modul-Startseite

Jedes CSS Modul repräsentiert eine CSS-Spezifikation, die Unterstützung für bestimmte Funktionen und Implementierungen in CSS bietet. Zum Beispiel repräsentiert das CSS-Boxmodell Modul die Spezifikation, die die Rand- und Auffüllungseigenschaften beschreibt, mit denen Sie Abstände in und um eine CSS-Box erzeugen können.

Eine CSS-Modul-Startseite bietet einen Überblick über die Funktionen, die das Modul bietet, und listet alle Eigenschaften, Datentypen, CSS-Funktionen usw. auf, die das Modul bietet. Wann immer möglich, bietet die CSS-Modul-Startseite eine schnelle Demo dessen, was mit den Eigenschaften des Moduls erreicht werden kann, durch ein interaktives Beispiel. Die Modul-Startseite dient primär als Navigations Seite, aber auch als ein schnell einsehbares Referenz Seite für das Modul.

Einige verwandte Eigenschaften und Funktionen, die zu anderen Modulen gehören, aber eng mit den vom Modul angebotenen Funktionalitäten verwandt sind, können ebenfalls in einem Abschnitt Verwandte Konzepte behandelt werden. Zum Beispiel sind der <easing-function> Datentyp und die prefers-reduced-motion Media Query nicht im CSS-Animationsmodul abgedeckt, aber da sie eng mit CSS-Animationen verwandt sind, ist es eine gute Idee, sie im Abschnitt Verwandte Konzepte der CSS-Animationsmodul-Startseite hervorzuheben.

Beispiele

Vorlagen

CSS-Feature-Referenzseite

Eine CSS-Referenzseite listet alle verfügbaren Syntaxoptionen für ein CSS-Feature wie einen Selektor oder eine Eigenschaft und erklärt den Zweck und die Verwendung des Features. Sie bietet auch Beispiele, Browser-Kompatibilitätsinformationen und andere wichtige Daten.

Beispiele

Vorlagen

HTTP-Header-Referenzseite

Eine HTTP-Header-Referenzseite listet alle verfügbaren Direktiven auf, die ein HTTP-Header enthalten kann, und erklärt den Zweck und die Verwendung des Headers. Sie bietet auch Beispiele, Browser-Kompatibilitätsinformationen und andere wichtige Erklärungen.

Beispiel

Vorlagen

Konzeptionelle Seite

Eine Konzeptionelle Seite ist eine Leitfaden Seite, die etwas erklärt oder lehrt. Im Allgemeinen, wenn eine Seite hauptsächlich aus Prosa besteht und nicht in einen anderen Seitentyp fällt, ist es wahrscheinlich eine konzeptionelle Seite. Eine erweiterte Diskussion eines Themas könnte über mehrere konzeptionelle Seiten verteilt sein und mit den Makros Next und Previous verlinkt werden.

Beispiele

Glossarseite

Eine Glossarseite enthält eine kurze Erklärung eines Begriffs, Themas oder Konzepts. Der erste Absatz sollte eine einfache, in sich geschlossene Beschreibung des Begriffs sein, die nicht mehr als ein paar Sätze umfasst. Dies kann durch Links zu weiteren Informationen im Abschnitt Siehe auch ergänzt werden. Wenn die Seite mehr als einen Bildschirmvoll oder so umfasst, ist sie zu lang und sollte in eine konzeptionelle Seite umgewandelt werden. Siehe Anleitung zur Erstellung und Verweis auf einen Eintrag im Glossar für weitere Details.

Beispiele

Vorlagen

Startseite

Eine Startseite dient als eine Art Menü für ihre Unterseiten und ist daher primär eine Navigations Seite. Ein Startseitenlayout wird typischerweise für die Wurzel einer Baumstruktur von Seiten zu einem bestimmten Thema verwendet. Sie beginnt mit einem kurzen Überblick über das Thema, dann folgt eine strukturierte Liste von Links zu ihren Unterseiten und optional zusätzliches Material, das für den Leser nützlich sein könnte.

Die Liste der Unterseiten kann automatisch mit den Templates SubpagesWithSummaries, und LandingPageListSubpages generiert werden. In komplexeren Fällen muss die Liste jedoch manuell erstellt (und gepflegt!) werden.

Beispiele

Siehe auch