DocumentaciónAEM 6.4Guía de desarrollo

Diseños y Designer designs-and-the-designer

Last update: Fri May 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Developer
CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.
CAUTION
Este artículo describe cómo crear un sitio web basado en la IU clásica. Adobe recomienda aprovechar las últimas tecnologías de AEM para sus sitios web como se describe detalladamente en el artículo Introducción al desarrollo de AEM Sites.

El Diseñador se utiliza para crear un diseño para el sitio web mediante la IU clásica en AEM.

NOTE
Para obtener más información sobre la accesibilidad web, consulte AEM y las directrices de accesibilidad web.

Uso de Designer using-the-designer

El diseño se puede definir en la variable diseños de la sección Herramientas pestaña:

screen_shot_2012-02-01at30237pm

Aquí puede crear la estructura necesaria para almacenar el diseño y, a continuación, cargar las hojas de estilo en cascada y las imágenes necesarias.

Los diseños se almacenan en /apps/<your-project>. La ruta al diseño que se utilizará para un sitio web se especifica mediante la variable cq:designPath propiedad de la variable jcr:content nodo .

chlimage_1-74

NOTE
Todos los cambios realizados en una página en modo de diseño se mantienen debajo del nodo de diseño del sitio y se aplican automáticamente a todas las páginas que tienen el mismo diseño.

Lo que necesitará what-you-will-need

Para realizar su diseño necesitará:

CSS - Las hojas de estilo en cascada definen los formatos de áreas específicas en sus páginas.

Imágenes - Imágenes que utilice para funciones como fondos, botones.

Consideraciones Al Diseñar El Sitio Web considerations-when-designing-your-website

Al desarrollar un sitio web, se recomienda encarecidamente almacenar imágenes y archivos CSS en /apps/<your-project> de este modo, puede hacer referencia a sus recursos en función del diseño actual, tal como se describe en el siguiente fragmento de código.

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

El ejemplo anterior ofrece varias ventajas:

  • Los componentes pueden tener una apariencia diferente en función de cada sitio mediante una ruta de diseño diferente.

  • El rediseño del sitio web se puede hacer simplemente señalando la ruta de diseño a un nodo diferente en la raíz del sitio desde design/v1 a design/v2.

  • /etc/designs y /content son las únicas direcciones URL externas que el navegador ve protegiéndole de un usuario externo que tiene curiosidad por saber qué hay debajo de su /apps árbol. Los beneficios de la URL anterior también ayudan al administrador del sistema a configurar una mejor seguridad, ya que limita la exposición de los recursos a unas pocas ubicaciones diferentes.

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