DocumentaçãoAEM 6.4Guia de desenvolvimento

Designs e Designer designs-and-the-designer

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Desenvolvedor
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.
CAUTION
Este artigo descreve como criar um site com base na interface clássica. O Adobe recomenda o aproveitamento das tecnologias de AEM mais recentes para seus sites, conforme descrito detalhadamente no artigo Introdução ao desenvolvimento do AEM Sites.

O Designer é usado para criar um design para seu site usando o Interface clássica em AEM.

NOTE
Para obter mais informações sobre acessibilidade na Web, consulte AEM e as diretrizes de acessibilidade na Web.

Uso do Designer using-the-designer

Seu design pode ser definido na variável designs da seção Ferramentas guia :

screen_shot_2012-02-01at30237pm

Aqui, você pode criar a estrutura necessária para armazenar o design e, em seguida, fazer upload das folhas de estilos em cascata e imagens necessárias.

Designs são armazenados em /apps/<your-project>. O caminho para o design a ser usado para um site é especificado usando o cq:designPath da jcr:content nó .

chlimage_1-74

NOTE
Todas as alterações feitas em uma página no modo de design são mantidas abaixo do nó de design do site e são automaticamente aplicadas a todas as páginas que têm o mesmo design.

O que você precisará what-you-will-need

Para realizar seu design, você precisará:

CSS - As folhas de estilos em cascata definem os formatos de áreas específicas nas páginas.

Imagens - Qualquer imagem usada para recursos como planos de fundo, botões.

Considerações ao criar seu site considerations-when-designing-your-website

Ao desenvolver um site, é altamente recomendável armazenar imagens e arquivos CSS em /apps/<your-project> assim, você pode fazer referência aos seus recursos com base no design atual, como descrito pelo seguinte trecho.

<%= currentDesign.getPath() + "/static/img/icon.gif %>

O exemplo anterior oferece vários benefícios:

  • Os componentes podem ter uma aparência diferente com base em cada site usando um caminho de design diferente.

  • A reformulação do site pode ser feita simplesmente apontando o caminho do design para um nó diferente na raiz do site design/v1 para design/v2.

  • /etc/designs e /content são as únicas URLs externas que o navegador vê, protegendo você de um usuário externo ficando curioso sobre o que está em seu /apps árvore. Os benefícios do URL acima também ajudam o Administrador do sistema a configurar melhor segurança, pois você está limitando a exposição dos ativos a alguns locais distintos.

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e