Temas do site

Saiba como AEM temas do site podem ser usados para personalizar o estilo e o design do site.

Visão geral

Um tema de site AEM é um pacote que contém o CSS, o JavaScript e os recursos estáticos que definem o estilo do site AEM e estão em conformidade com a estrutura de um tema de site AEM.

Os sites criados com modelos de site AEM permitem fácil download, personalização e reimplantação dos temas.

OBSERVAÇÃO

AEM temas do site não devem ser confundidos com AEM modelos de site. AEM temas do site contêm apenas as informações de estilo de um site AEM. AEM modelos de site definem a estrutura do site e o conteúdo inicial, bem como contêm um tema de site AEM para permitir criação rápida do site.

Utilização de Temas do Site

Os temas do site são usados de duas maneiras diferentes:

  • Eles são usados como parte de um modelo de site para definir o estilo ao criação de um site.
  • Eles são baixados depois de criar um site com base em um modelo de site, para que um desenvolvedor de front-end possa personalizar ainda mais o estilo.
DICA

Uma descrição completa do processo de criação de um site a partir de um modelo e personalização de seu tema pode ser encontrada no Jornada Rápida de Criação de Site.

Estrutura de Tema do Site

Os temas do site são simplesmente pacotes com uma estrutura lógica que reflete claramente a finalidade do conteúdo do pacote. Um tema de site tem a seguinte estrutura típica de um projeto front-end.

  • src/main.ts: O principal ponto de entrada do seu tema JS & CSS
  • src/site: Arquivos JS e CSS que se aplicam a todo o site
  • src/components: Arquivos JS e CSS específicos para componentes AEM
  • src/resources: Arquivos estáticos como ícones, logotipos e fontes

Tema do Site Padrão

O Adobe fornece um tema de referência de práticas recomendadas que pode ser usado como base para a criação de seu próprio tema. O Tema do site padrão está disponível no GitHub.

Desenvolver temas do site

O Adobe fornece um AEM Criador de Temas do Site como um conjunto de scripts para criar novos temas do site.

O AEM Site Theme Builder está disponível junto com a documentação de uso no GitHub. É necessária experiência de desenvolvimento front-end para personalizar o tema.

Nesta página