Navigatie-component

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

Gebruik

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

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

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.

• Voor een voorbeeld van hoe de localisatiefunctie van de Component van de Navigatie werkt, zie het onderstaande gedeelte.
• Voor een voorbeeld van hoe de lokalisatiefuncties van de Core Components samenwerken, raadpleegt u de Localisatiefuncties van de pagina Core Components.

Voorbeeld

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

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:

1. Schaduwpagina's maken als lege pagina's die uw gewenste sitestructuur voorstellen. Dit wordt vaak een schaduwsitestructuur genoemd.
2. Stel de Omleiden De waarden in de pagina-eigenschappen op deze pagina's wijzen naar de werkelijke inhoudspagina's.
3. Stel de Verbergen in navigatie in de pagina-eigenschappen van de schaduwpagina's.
4. Stel de Navigatieroot waarde van de component Navigation om naar de hoofdmap van de nieuwe structuur van de schaduwsite te wijzen.

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

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

• Maak een pagina A die wordt omgeleid naar pagina B.
• Een pagina C maken waarnaar wordt omgeleid https://aemcomponents.dev
• Voeg op pagina D een navigatie- of navigatiecomponent in die pagina A en C bevat
• De respectievelijke koppelingen die vervolgens worden gegenereerd, verwijzen rechtstreeks naar pagina B en https://aemcomponents.dev

Uitvoer van voorbeeldcomponent

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

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

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

Tabblad Eigenschappen

• Navigatieroot - De basispagina, die wordt gebruikt om de boomstructuur te genereren.
• Basisniveaus uitsluiten - Vaak mag de hoofdmap niet in de navigatie worden opgenomen. Met deze optie kunt u opgeven hoeveel niveaus boven het basisniveau u wilt uitsluiten. Bijvoorbeeld:
  • 0 = basisniveau weergeven
  • 1 = sluit het wortelniveau uit
  • 2 = sluit de wortel uit en 1 meer niveau omhoog
  • enz.
• Alle onderliggende pagina's verzamelen - Verzamel alle pagina's die afstammen van de basisnavigatie.
• Navigatiestructuurdiepte - Definieert hoeveel niveaus onder de navigatiestructuur de component moet weergeven ten opzichte van de hoofdmap van de navigatie (alleen beschikbaar als Alle onderliggende pagina's verzamelen is niet geselecteerd).
• Schaduwen uitschakelen - Als de pagina in de hiërarchie een omleiding is, wordt de naam van de omleidingspagina weergegeven in plaats van het doel. Zie de Ondersteuning voor schaduwsitestructuur voor meer informatie .
• ID - Met deze optie kunt u de unieke id van de component in de HTML en in de Gegevenslaag.
  • Als deze leeg blijft, wordt automatisch een unieke id voor u gegenereerd. U kunt deze vinden door de resulterende pagina te inspecteren.
  • Als een id is opgegeven, is het de verantwoordelijkheid van de auteur om ervoor te zorgen dat deze uniek is.
  • Het wijzigen van de id kan gevolgen hebben voor het bijhouden van CSS-, JS- en gegevenslagen.

Tabblad Toegankelijkheid

Op de Toegankelijkheid tab, waarden kunnen worden ingesteld voor Toegankelijkheid ARIA labels voor de component.

• Label - Waarde van een ARIA-labelkenmerk voor de component

Tabblad Stijlen

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

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

• Navigatieroot - De standaardwaarde van de basispagina van de navigatiestructuur, die wordt gebruikt om de navigatiestructuur te genereren en die standaard wordt ingesteld wanneer de auteur van de inhoud de component aan de pagina toevoegt.
• Basisniveaus uitsluiten - Vaak mag de hoofdmap niet in de navigatie worden opgenomen. Met deze optie kunt u de standaardinstelling opgeven voor hoeveel niveaus boven het basisniveau u wilt uitsluiten. Bijvoorbeeld:
  • 0 = basisniveau weergeven
  • 1 = sluit het wortelniveau uit
  • 2 = sluit de wortel uit en 1 meer niveau omhoog
  • enz.
• Alle onderliggende pagina's verzamelen - De standaardwaarde van de optie om alle pagina's te verzamelen die afstammelingen van de basisnavigatie zijn.
• Navigatiestructuurdiepte - De standaardwaarde van de diepte van de navigatiestructuur.
• Schaduwen uitschakelen - De standaardwaarde of schaduwen moet worden uitgeschakeld bij het toevoegen van een navigatiecomponent

Tabblad Stijlen

De navigatiecomponent ondersteunt de AEM Stijlsysteem.

Gegevenslaag Adobe-client

De navigatiecomponent ondersteunt de Adobe Client Data Layer.

Business.Adobe.com-bronnen