Navigationskomponente (v1) navigation-component

Mit der Navigationskomponente können Benutzer leicht durch eine globalisierte Site-Struktur navigieren.

Nutzung usage

In der Navigationskomponente wird ein Seitenbaum aufgelistet, sodass Benutzer einer Website problemlos in der Site-Struktur navigieren können.

Die Navigationskomponente kann die globale Site-Struktur Ihrer Site automatisch erkennen und automatisch an eine lokalisierte Site anpassen. Darüber hinaus kann eine beliebige Site-Struktur durch die Verwendung von Shadow-Umleitungsseiten zur Darstellung einer anderen Struktur als Ihrer Hauptinhaltsstruktur unterstützt werden.

Das Dialogfeld „Bearbeiten“ ermöglicht es dem Inhaltsautor, die Navigationsstammseite zusammen mit der Navigationstiefe zu definieren. Das Dialogfeld „Design“ ermöglicht es dem Vorlagenautor, Standardwerte für den Navigationsstamm und die Tiefe zu definieren.

Version und Kompatibilität version-and-compatibility

In diesem Dokument wird die v1 der Navigationskomponente beschrieben, die mit Version 2.0.0 der Kernkomponenten im Januar 2018 eingeführt wurde.

Unterstützung für lokalisierte Site-Strukturen localized-site-structure

Webseiten werden oft in verschiedenen Sprachen für verschiedene Regionen angeboten. Normalerweise enthält jede lokalisierte Seite ein Navigationselement, das als Teil der Seitenvorlage enthalten ist. Mit der Navigationskomponente können Sie sie einmal in einer Vorlage für alle Seiten Ihrer Site platzieren. Sie wird dann, basierend auf Ihrer globalisierten Site-Struktur, automatisch an die einzelnen lokalisierten Seiten angepasst.

Beispiel example-localization

Nehmen wir an, dass Ihr Inhalt wie folgt aussieht:

/content
+-- wknd
   +-- language-masters
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- es
      +-- fr
      \-- it
   +-- us
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      \-- es
   \-- ch
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

Für die WKND-Site möchten Sie auf einer Seitenvorlage womöglich die Navigationskomponente als Teil der Kopfzeile platzieren. Sobald die Komponente ein Teil der Vorlage ist, können Sie den Navigationsstamm der Komponente auf /content/wknd/language-masters/en festlegen, da dort Ihr Master-Inhalt für diese Site beginnt. Eventuell möchten Sie auch die Strukturtiefe der Navigation auf 2 festlegen, da Sie wahrscheinlich nicht möchten, dass die gesamte Inhaltsstruktur durch die Komponente angezeigt wird, sondern die ersten beiden Ebenen, sodass dies als Übersicht dient.

Anhand des Wertes des Navigationsstamms weiß die Navigationskomponente, dass nach /content/wknd/language-masters/en die Navigation beginnt, und sie kann somit Navigationsoptionen generieren, indem sie die Struktur der Site auf zwei Ebenen nach unten (wie durch den Wert der Strukturtiefe der Navigation vorgegeben) rekursiv darstellt.

Unabhängig davon, welche lokalisierte Seite ein Benutzer ansieht, kann die Navigationskomponente die entsprechende lokalisierte Seite finden, indem sie den Speicherort der aktuellen Seite kennt, zum Stammverzeichnis zurückkehrt und sich dann zur entsprechenden Seite vorarbeitet.

Wenn ein Besucher also /content/ch/de/experience/arctic-surfing-in-lofoten anzeigt, kann die Komponente die Navigationsstruktur basierend auf /content/wknd/language-masters/de generieren. Wenn der Besucher /content/us/en/experience/arctic-surfing-in-lofoten anzeigt, kann die Komponente dementsprechend die Navigationsstruktur basierend auf /content/wknd/language-masters/en generieren.

Unterstützung für Shadow-Site-Struktur shadow-structure

Manchmal ist es notwendig, ein Navigationsmenü für den Besucher zu erstellen, welches sich von der tatsächlichen Site-Struktur unterscheidet. Vielleicht soll eine Promotion bestimmte Inhalte im Menü hervorheben, indem die Liste der Inhalte neu angeordnet werden. Mithilfe von Shadow-Seiten, die einfach zu anderen Inhaltsseiten umleiten, kann die Navigationskomponente eine beliebige erforderliche Navigationsstruktur generieren.

Dazu müssen Sie Folgendes tun:

Die Navigationskomponente rendert dann das Menü basierend auf der Shadow-Site-Struktur. Die von der Komponente gerenderten Links beziehen sich auf die tatsächlichen Inhaltsseiten, auf die die Shadow-Seiten umleiten, und nicht auf die Shadow-Seiten selbst. Darüber hinaus zeigt die Komponente die Namen der tatsächlichen Seiten an und hebt die aktive Seite korrekt hervor, auch wenn die Navigation auf Shadow-Seiten basiert. Die Navigationskomponente macht die Shadow-Seiten für den Besucher vollständig transparent.

Redirects in der Navigation redirects

Wenn eine Seite ein Redirect-Ziel hat (unabhängig davon, ob sie auf eine externe URL oder eine andere AEM verweist), dann verweist eine Navigationskomponente mit Links darauf direkt auf die URL des Redirect-Ziels.

Beispiel redirect-example

Musterkomponentenausgabe sample-component-output

Um die Navigationskomponente sowie Beispiele für die Konfigurationsoptionen sowie HTML- und JSON-Ausgaben zu erhalten, besuchen Sie die Komponentenbibliothek.

Technische Details technical-details

Die aktuelle technische Dokumentation zur Navigationskomponente finden Sie auf GitHub.

Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.

Dialogfeld „Bearbeiten“ edit-dialog

Im Dialogfeld „Bearbeiten“ kann der Inhaltsautor die Stammseite für die Navigation und die Tiefe der Navigationsstruktur definieren.

Registerkarte „Eigenschaften“ properties-tab

Registerkarte „Erreichbarkeit“ accessibility-tab

Auf der Registerkarte Erreichbarkeit können Werte für die ARIA-Barrierefreiheits-Beschriftungen für die Komponente festgelegt werden.

Dialogfeld „Design“ design-dialog

Das Dialogfeld „Design“ ermöglicht es dem Vorlagenautor, die Standardwerte für die Navigationsstammseite und die Navigationstiefe festzulegen, die den Inhaltsautoren angezeigt werden.

Registerkarte „Eigenschaften“ properties-tab-design

Registerkarte „Arten“ styles-tab

Die Navigationskomponente unterstützt das AEM-Stilsystem.

Adobe Client-Datenschicht data-layer

Die Navigationskomponente unterstützt die Adobe Client-Datenschicht.