Componente de Navegação por idiomas

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

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

A versão atual do componente de Navegação por idiomas é a v1, introduzida com a versão 2.0.0 dos Componentes principais em janeiro de 2018, 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.

Versão do componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 Compatível Compatível Compatível

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

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

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

A caixa de diálogo de edição permite a definição da raiz de navegação do site global, bem como a profundidade da estrutura para a 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

Caixa de diálogo de design do componente de Navegação por idiomas

  • Raiz da navegação
    • É aqui que a navegação por idioma do site deve começar.
    • A estrutura do idioma do site começa no próximo nível abaixo dessa raiz.
  • Profundidade da estrutura do idioma
    • Esta é a quantidade de níveis da árvore de conteúdo abaixo de Raiz de navegação que representa a estrutura de idioma do site. Exemplos:
      • 1 normalmente significa que você só tem a escolha de idioma.
      • 2 normalmente significa que você tem uma escolha de idioma e país.
      • 3 normalmente significa que você tem uma escolha de idioma, país e região.

Exemplo

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

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

Caixa de diálogo de edição

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 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.

  • Caso deixado em branco, um ID exclusivo é gerado automaticamente para você e pode ser encontrado ao inspecionar a página resultante.
  • Se um ID for especificado, é responsabilidade do autor garantir que ele seja exclusivo.
  • A alteração do ID pode afetar o rastreamento de CSS, JS e da Camada de Dados.

Caixa de diálogo de edição do componente Navegação por idiomas

Camada de dados de clientes Adobe

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

Nesta página