Componente de Navegação por idiomas language-navigation-component

O componente de Navegação por idiomas fornece uma navegação de idioma/país para um site, para que os visitantes possam navegar para a mesma página em um local diferente.

Uso usage

Geralmente, os sites são fornecidos em vários idiomas para diferentes regiões. O componente de Navegação por idiomas permite que um visitante visualize a mesma página em idiomas/localidades diferentes. Então, se você é um leitor na versão alemã da Suíça do site, você pode facilmente mudar para a versão inglesa dos EUA da mesma página. O componente de Navegação por idiomas lida com a compreensão da estrutura de idioma do site e encontra a página correspondente automaticamente.

O caixa de diálogo de edição permite a definição da raiz de navegação do site global, bem como a profundidade máxima na estrutura da navegação. Usando a caixa de diálogo design, o autor do modelo pode definir os valores padrão para as mesmas opções.

Versão e compatibilidade version-and-compatibility

A versão atual do componente de navegação por idiomas é a v2, introduzida com a versão 2.18.0 dos componentes principais em fevereiro de 2022, e está descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões do AEM com as quais as versões do componente são compatíveis e os links para a documentação das versões anteriores.

Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Exemplo de saída do componente sample-component-output

Para experimentar o componente de Navegação por idiomas, e ver exemplos de suas opções de configuração e de saídas HTML e JSON, visite a Biblioteca de Componentes.

Detalhes técnicos technical-details

A documentação técnica mais recente sobre o componente de Navegação por idiomas pode ser encontrada no GitHub.

Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.

Caixa de diálogo de design design-dialog

A caixa de diálogo de design permite definir a raiz de navegação do site global, bem como a profundidade máxima da estrutura de navegação.

Normalmente, essas configurações só precisam ser feitas no nível do modelo da página. No entanto, elas podem ser alteradas no nível da página pela caixa de diálogo de edição.

Guia Propriedades properties-tab

Exemplo example

Digamos que seu conteúdo seja mais ou menos assim:

/content
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   \-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

Para o site da WKND, talvez você queira colocar o componente de Navegação de idioma em um modelo de página como parte do cabeçalho. Depois de fazer parte do modelo, você pode definir a Raiz de navegação do componente para /content/wknd, já que é onde o conteúdo localizado para esse site começa. Você também pode querer definir a Profundidade da estrutura de idioma para 2, já que sua estrutura é de dois níveis (país, depois idioma).

Com o valor Raiz de navegação, o componente de Idioma sabe que depois de /content/wknd, a navegação começa e pode gerar opções de navegação de idioma reconhecendo os próximos dois níveis na árvore de conteúdo como a estrutura de navegação de idioma do site (conforme definido pelo valor Profundidade da estrutura de idioma).

Independentemente da página que um usuário esteja visualizando, o componente de Navegação por idiomas pode encontrar a página correspondente em outro idioma, sabendo o local da página atual e trabalhando de volta para a raiz. Em seguida, encaminhando para a página correspondente.

Guia Estilos styles-tab

O componente de Navegação de Idioma é compatível com o Sistema de Estilos do AEM.

Caixa de diálogo de edição edit-dialog

Guia Propriedades properties-tab-edit

Normalmente, o componente de navegação por idiomas só precisa ser adicionado e configurado nos modelos de página de um site. No entanto, se o componente de navegação por idiomas precisar ser adicionado a uma página de conteúdo individual, a caixa de diálogo de edição permitirá que um autor de conteúdo configure os mesmos valores, conforme descrito na caixa de diálogo de design

Além disso, você pode definir um ID. Essa opção permite controlar o identificador exclusivo do componente no HTML e na Camada de dados.

Guia Acessibilidade accessibility-tab

Guia Estilos styles-tab-edit

O componente de navegação por idiomas é compatível com o sistema de estilos do AEM.

Use o menu suspenso para selecionar os estilos que deseja aplicar ao componente. As seleções feitas na caixa de diálogo de edição têm o mesmo efeito das selecionadas na barra de ferramentas do componente.

Os estilos devem ser configurados para esse componente na caixa de diálogo de design para que o menu suspenso fique disponível.

Camada de dados de clientes Adobe data-layer

O componente de Navegação por idiomas é compatível com a Camada de dados de clientes Adobe.