Navigatie-component navigation-component

Met de navigatiecomponent kunnen gebruikers gemakkelijk door een geglobaliseerde sitestructuur navigeren.

Gebruik usage

In de navigatiecomponent wordt een boomstructuur met pagina's weergegeven, zodat gebruikers van een site gemakkelijk door de sitestructuur kunnen navigeren.

De component van de Navigatie kan automatisch de geglobaliseerde plaatsstructuur van uw plaats ontdekken en aanpassen automatisch aan een gelokaliseerde pagina. Bovendien kan het om het even welke willekeurige plaatsstructuur steunen door schaduw te gebruiken herleidt pagina'som een andere structuur buiten uw belangrijkste inhoudsstructuur te vertegenwoordigen.

Het geeft dialoog uitstaat de inhoudauteur toe om de pagina van de navigatiekarakter samen met de diepte van navigatie te bepalen. De ontwerpdialoogstaat de malplaatjeauteur toe om standaardwaarden voor de navigatiekartel en de diepte te bepalen.

Versie en compatibiliteit version-and-compatibility

De huidige versie van de Navigation Component is v2, die in februari 2022 werd geïntroduceerd met versie 2.18.0 van de Core Components, en in dit document wordt beschreven.

In de volgende tabel staan alle ondersteunde versies van de component, de AEM versies waarmee de versies van de component compatibel zijn en koppelingen naar documentatie voor vorige versies.

Voor meer informatie over de versies en versies van de Component van de Kern, zie de Versies van de Componenten van de Document Kern.

Ondersteuning voor gelokaliseerde sitestructuur localized-site-structure

Websites worden vaak in meerdere talen aangeboden voor verschillende gebieden. Doorgaans bevat elke gelokaliseerde pagina een navigatie-element dat is opgenomen als onderdeel van de paginasjabloon. Met de navigatiecomponent kunt u de component één keer op een sjabloon plaatsen voor alle pagina's van uw site. Vervolgens wordt de component automatisch aangepast voor de afzonderlijke gelokaliseerde pagina's op basis van uw geglobaliseerde sitestructuur.

Voorbeeld example-localization

Laten we zeggen dat uw inhoud er ongeveer als volgt uitziet:

/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

Voor de plaats WKND, zou u waarschijnlijk de Component van de Navigatie op een paginamalplaatje als deel van de kopbal willen plaatsen. Zodra een deel van het malplaatje, kunt u de Wortel van de Navigatie van de component aan /content/wknd/language-masters/en plaatsen aangezien dat is waar uw hoofdinhoud voor die plaats begint. U zou misschien ook de Diepte van de Structuur van de Navigatie willen plaatsen om 2 te zijn aangezien u waarschijnlijk niet de volledige inhoudsboom door de component moet worden getoond, maar eerder de eerste twee niveaus zodat dient het als overzicht.

Met de waarde van de Wortel van de Navigatie, weet de Component van de Navigatie dat na /content/wknd/language-masters/en dat de navigatie begint en het navigatieopties kan produceren door de structuur van de plaats twee niveaus neer te recurderen (zoals die door de waarde van de Diepte van de Structuur van de Navigatie wordt bepaald).

Ongeacht welke gelokaliseerde pagina een gebruiker bekijkt, kan de component van de Navigatie de overeenkomstige gelokaliseerde pagina vinden door de plaats van de huidige pagina te kennen, achterwaarts te werken aan de wortel, en dan door:sturen aan de overeenkomstige pagina.

Dus als een bezoeker /content/ch/de/experience/arctic-surfing-in-lofoten bekijkt, weet de component dat de navigatiestructuur moet worden gegenereerd op basis van /content/wknd/language-masters/de . Op dezelfde manier als de bezoeker /content/us/en/experience/arctic-surfing-in-lofoten bekijkt, weet de component dat de navigatiestructuur moet worden gegenereerd op basis van /content/wknd/language-masters/en .

Ondersteuning voor schaduwsitestructuur shadow-structure

Soms is het nodig om een navigatiemenu voor de bezoeker te maken dat afwijkt van de daadwerkelijke sitestructuur. Mogelijk moet een aanbieding bepaalde inhoud in het menu benadrukken door de lijst met inhoud opnieuw in te delen. Met behulp van schaduwpagina's, die eenvoudig worden omgeleid naar andere inhoudspagina's, kan de navigatiecomponent elke willekeurige navigatiestructuur genereren die nodig is.

Hiervoor moet u:

De component Navigation geeft het menu vervolgens weer op basis van de structuur van de schaduwsite. De koppelingen die door de component worden gerenderd, verwijzen naar de inhoudspagina's die de schaduwpagina's omleiden en niet naar de schaduwpagina's zelf. Bovendien geeft de component de namen van de werkelijke pagina's weer en wordt de actieve pagina correct gemarkeerd, zelfs als de navigatie is gebaseerd op schaduwpagina's. De component Navigation maakt de schaduwpagina's volledig transparant voor de bezoeker.

Omleiding in navigatie redirects

Wanneer een pagina een omleidingsdoel heeft (ongeacht of deze naar een externe URL of naar een andere AEM pagina verwijst), dan een navigatiecomponent die koppelingen naar dat punt rechtstreeks naar de URL van het omleidingsdoel bevat.

Voorbeeld redirect-example

Uitvoer van voorbeeldcomponent sample-component-output

Om de Component van de Navigatie te ervaren evenals voorbeelden van zijn configuratieopties evenals HTML en output te zien JSON, bezoek de Bibliotheek van de Component.

Technische details technical-details

De recentste technische documentatie over de Component van de Navigatie kan op GitHubworden gevonden.

De verdere details over het ontwikkelen van de Componenten van de Kern kunnen in de de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.

Dialoogvenster Bewerken edit-dialog

In het dialoogvenster Bewerken kan de auteur van de inhoud de basispagina voor navigatie en de diepte van de navigatiestructuur definiëren.

Tabblad Eigenschappen properties-tab

Tabblad Toegankelijkheid accessibility-tab

Op het lusje van de Toegankelijkheid, kunnen de waarden voor de toegankelijkheidslabels van ARIAvoor de component worden geplaatst.

Tabblad Stijlen styles-tab-edit

De Component van de Navigatie steunt het AEM Systeem van de Stijl..

Gebruik de vervolgkeuzelijst om de stijlen te selecteren die u op de component wilt toepassen. Selecties in het dialoogvenster Bewerken hebben hetzelfde effect als de selecties op de werkbalk van de component.

De stijlen moeten voor deze component in de ontwerpdialoogworden gevormd opdat het drop-down menu beschikbaar is.

Ontwerpdialoogvenster design-dialog

In het dialoogvenster Ontwerpen kan de sjabloonauteur de standaardwaarden instellen voor de basispagina van de navigatie en de diepte die aan de auteurs van de inhoud worden gepresenteerd.

Tabblad Eigenschappen properties-tab-design

Tabblad Stijlen styles-tab

De component van de Navigatie steunt het AEM Systeem van de Stijl.

Gegevenslaag client-Adobe data-layer

De component van de Navigatie steunt de Gegevens van de Cliënt van de Adobe Laag.