Navigatie-component navigation-component

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

Gebruik usage

De navigatiecomponent geeft een lijst met pagina's weer, zodat gebruikers van een site gemakkelijk door de sitestructuur kunnen navigeren.

De navigatiecomponent kan automatisch de geglobaliseerde sitestructuur van uw site detecteren en automatisch aanpassen aan een gelokaliseerde pagina. Bovendien kan het elke willekeurige sitestructuur ondersteunen door omleidingspagina's schaduwen om een andere structuur te vertegenwoordigen dan de belangrijkste inhoudsstructuur.

De dialoogvenster bewerken Hiermee kan de auteur van de inhoud de basispagina voor navigatie definiëren samen met de diepte van de navigatie. De ontwerpdialoogvenster Hiermee kan de sjabloonauteur standaardwaarden definiëren voor de basis en diepte van de navigatie.

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.

Raadpleeg het document voor meer informatie over versies en releases van de Core Component Core Components-versies.

Ondersteuning voor gelokaliseerde sitestructuur localized-site-structure

Websites worden vaak in meerdere talen aangeboden voor verschillende regio's. 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. Als een deel van de sjabloon is gemaakt, kunt u de Navigatieroot van de component /content/wknd/language-masters/en omdat dat de plaats is waar uw master inhoud voor die plaats begint. Misschien wilt u ook de Navigatiestructuurdiepte te worden 2 aangezien u waarschijnlijk niet de volledige inhoudsboom door de component, maar eerder de eerste twee niveaus wilt worden getoond zodat dient het als overzicht.

Met de Navigatieroot waarde, weet de component van de Navigatie dat na /content/wknd/language-masters/en dat de navigatie begint en navigatieopties kan genereren door de structuur van de site twee niveaus omlaag te recurderen (zoals gedefinieerd door de Navigatiestructuurdiepte waarde).

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 bekijkt /content/ch/de/experience/arctic-surfing-in-lofotenkan de component de navigatiestructuur genereren op basis van /content/wknd/language-masters/de. Evenzo als de bezoeker de weergave uitvoert /content/us/en/experience/arctic-surfing-in-lofotenkan de component de navigatiestructuur genereren 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

Als u de navigatiecomponent wilt ervaren en voorbeelden wilt zien van de configuratieopties en van de HTML- en JSON-uitvoer, gaat u naar de Componentbibliotheek.

Technische details technical-details

De meest recente technische documentatie over de navigatiecomponent kan op GitHub worden gevonden.

Meer informatie over het ontwikkelen van kerncomponenten vindt u in de Documentatie voor ontwikkelaars van kerncomponenten.

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 de Toegankelijkheid tab, waarden kunnen worden ingesteld voor Toegankelijkheid ARIA labels voor de component.

Tabblad Stijlen styles-tab-edit

De navigatiecomponent ondersteunt de AEM Stijlsysteem..

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 worden gevormd ontwerpdialoogvenster zodat het vervolgkeuzemenu 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 navigatiecomponent ondersteunt de AEM Stijlsysteem.

Gegevenslaag Adobe-client data-layer

De navigatiecomponent ondersteunt de Adobe Client Data Layer.