Show Menu
TEMAS×

Plantillas de página: estáticas

Se utiliza una plantilla para crear una página y define qué componentes se pueden utilizar dentro del ámbito seleccionado. Una plantilla es una jerarquía de nodos que tiene la misma estructura que la página que se va a crear, pero sin ningún contenido real.
Cada plantilla le presentará una selección de componentes disponibles para su uso.
  • Las plantillas están compuestas de Componentes ;
  • Los componentes utilizan y permiten el acceso a los widgets y se utilizan para representar el contenido.
Las plantillas editables también están disponibles y son el tipo de plantillas recomendado para mayor flexibilidad y las funciones más recientes.

Propiedades y nodos secundarios de una plantilla

Una plantilla es un nodo de tipo cq:Template y tiene las siguientes propiedades y nodos secundarios:
Nombre Tipo Descripción
. cq:Template Plantilla actual. Una plantilla es del tipo de nodo cq:Template.
allowChildren Cadena[] Path of a template that is allowed to be a child of this template.
allowParents Cadena[] Path of a template that is allowed to be a parent of this template.
allowPaths Cadena[] Ruta de una página que puede basarse en esta plantilla.
jcr:created Fecha Fecha de creación de la plantilla.
jcr:description Cadena Descripción de la plantilla.
jcr:title Cadena Title of the template.
clasificación Largo Clasificación de la plantilla. Se utiliza para mostrar la plantilla en la interfaz de usuario.
jcr:content cq:PageContent Nodo que contiene el contenido de la plantilla.
thumbnail.png nt:file Miniatura de la plantilla.
icon.png nt:file Icono de la plantilla.
Una plantilla es la base de una página.
Para crear una página, la plantilla debe copiarse (nodo-árbol /apps/<myapp>/template/<mytemplate> ) en la posición correspondiente del árbol del sitio: esto es lo que sucede si se crea una página con la ficha Sitios web.
Esta acción de copia también proporciona a la página su contenido inicial (generalmente solo contenido de nivel superior) y la propiedad sling:resourceType, la ruta al componente de página que se utiliza para representar la página (todo en el nodo secundario jcr:content).

Cómo se estructuran las plantillas

Hay dos aspectos que deben considerarse:
  • la estructura de la plantilla misma
  • la estructura del contenido producido al utilizar una plantilla

La estructura de una plantilla

Se crea una plantilla bajo un nodo de tipo cq:Template .
Se pueden definir varias propiedades, en particular:
  • jcr:title - título de la plantilla; aparece en el cuadro de diálogo al crear una página.
  • jcr:description - descripción de la plantilla; aparece en el cuadro de diálogo al crear una página.
Este nodo contiene un nodo jcr:content (cq:PageContent) que se utiliza como base para el nodo de contenido de las páginas resultantes; esto hace referencia, mediante sling:resourceType, al componente que se utilizará para procesar el contenido real de una página nueva.
Este componente se utiliza para definir la estructura y el diseño del contenido cuando se crea una página nueva.

El contenido producido por una plantilla

Las plantillas se utilizan para crear páginas de tipo cq:Page (como se mencionó anteriormente, una página es un tipo especial de componente). Cada página de AEM tiene un nodo estructurado jcr:content . Así pues:
  • es del tipo cq:PageContent
  • es un tipo de nodo estructurado que contiene una definición de contenido definida
  • tiene una propiedad sling:resourceType para hacer referencia al componente que contiene las secuencias de comandos de sling utilizadas para procesar el contenido

Plantillas predeterminadas

AEM incorpora varias plantillas predeterminadas disponibles de forma predeterminada. En algunos casos, es posible que desee utilizar las plantillas tal cual. En ese caso, debe asegurarse de que la plantilla está disponible para su sitio Web.
Por ejemplo, AEM incluye varias plantillas, incluidas una página de contenido y una página principal.
Título
Componente
Ubicación
Función
Página principal
homepage
geometrixx
La plantilla de la página principal de Geometrixx.
Página de contenido
contentpage
geometrixx
La plantilla de la página de contenido de Geometrixx.

Visualización de plantillas predeterminadas

Para ver una lista de todas las plantillas en el repositorio, siga este procedimiento:
  1. En CRXDE Lite, abra el menú Herramientas y haga clic en Consulta .
  2. En la ficha Consulta
  3. Como Tipo , seleccione XPath .
  4. En el campo de entrada Consulta , escriba la cadena siguiente:
    //element(&ast;, cq:Template)
  5. Haga clic en Ejecutar . Se muestra la lista en el cuadro de resultados.
En la mayoría de los casos, tomará una plantilla existente y desarrollará una nueva para su propio uso. Consulte Desarrollo de plantillas de página para obtener más información.
Para habilitar una plantilla existente para el sitio Web y desea que se muestre en el cuadro de diálogo Crear página al crear una página directamente en Sitios web desde la consola Sitios web, establezca la propiedad permissionPaths del nodo de plantilla en: /content(/.&ast;)?

Aplicación de los diseños de plantilla

Cuando los estilos se definen en la interfaz de usuario mediante el modo de diseño, el diseño se mantiene en la ruta exacta del nodo de contenido para el que se está definiendo el estilo.
Adobe solo recomienda aplicar diseños a través del modo Configurar componentes en modo Diseño de diseño.
La modificación de diseños en CRX DE, por ejemplo, no es recomendable y la aplicación de dichos diseños puede diferir del comportamiento esperado.
Si los diseños solo se aplican mediante el modo Diseño, las siguientes secciones, Resolución de ruta de diseño, Árbol de decisiones y Ejemplo , no son aplicables.
En esta sección se describe el comportamiento de la resolución de rutas de diseño a partir de AEM 6.4.2.0.

Resolución de ruta de diseño

Al procesar contenido basado en una plantilla estática, AEM intentará aplicar el diseño y los estilos más relevantes al contenido en función de una inversión de la jerarquía de contenido.
AEM determina el estilo más relevante para un nodo de contenido en el orden siguiente:
  • Si hay un diseño para la ruta completa y exacta del nodo de contenido (como cuando el diseño se define en el modo de diseño), utilice ese diseño.
  • Si hay un diseño para el nodo de contenido del elemento principal, utilice dicho diseño.
  • Si hay un diseño para cualquier nodo en la ruta del nodo de contenido, utilice ese diseño.
En los dos últimos casos, si hay más de un diseño aplicable, utilice el más cercano al nodo de contenido.

Árbol de decisiones

Es una representación gráfica de la lógica de resolución de ruta de diseño.

Ejemplo

Considere una estructura de contenido simple como se indica a continuación, donde un diseño podría aplicarse a cualquiera de los nodos:
/root/branch/leaf
En la tabla siguiente se describe cómo AEM elegirá un diseño.
Búsqueda De Diseño Para Existen diseños para Diseño seleccionado Comentario
leaf
root
branch
leaf
leaf La coincidencia más exacta siempre se toma.
leaf
root
branch
branch Volvamos a la coincidencia más cercana en la parte inferior del árbol.
leaf root root Si todo lo demás falla, tome lo que queda.
branch branch branch
branch
branch
leaf
branch
branch
root
branch
branch
branch
root
leaf
root
Si no hay una coincidencia exacta, tome la una parte inferior del árbol.
Se supone que esto siempre será aplicable, pero más arriba el árbol puede ser demasiado específico.

Desarrollo de plantillas de página

Las plantillas de página de AEM son sencillamente modelos utilizados para crear nuevas páginas. Pueden contener tan poco contenido inicial como sea necesario, y su función consiste en crear las estructuras de nodos iniciales correctas, con las propiedades necesarias (principalmente sling:resourceType) definidas para permitir la edición y el procesamiento.

Creación de una nueva plantilla (basada en una plantilla existente)

Huelga decir que una nueva plantilla se puede crear completamente desde cero, pero a menudo se copiará y actualizará una plantilla existente para ahorrarle tiempo y esfuerzo. Por ejemplo, las plantillas de Geometrixx se pueden usar para empezar.
Para crear una nueva plantilla basada en una plantilla existente:
  1. Copie una plantilla existente (preferiblemente con una definición lo más cercana posible a lo que desea lograr) en un nuevo nodo.
    Las plantillas generalmente se almacenan en /apps/<nombre-sitio web>/templates/<nombre-plantilla> .
    La lista de plantillas disponibles depende de la ubicación de la nueva página y de las restricciones de colocación especificadas en cada plantilla. Consulte Disponibilidad de plantillas .
  2. Cambie el jcr:title del nuevo nodo de plantilla para reflejar su nueva función. También puede actualizar jcr:description si es necesario. Asegúrese de cambiar la disponibilidad de la plantilla de la página según corresponda.
    Si desea que la plantilla se muestre en el cuadro de diálogo Crear página al crear una página directamente en Sitios web desde la consola Sitios web, establezca la allowedPaths propiedad del nodo de plantilla en: /content(/.*)?
  3. Copie el componente en el que se basa la plantilla (esto se indica con la propiedad sling:resourceType del nodo jcr:content de la plantilla) para crear una nueva instancia.
    Los componentes suelen almacenarse en /apps/<nombre-sitio-web>/components/<nombre-componente> .
  4. Actualice jcr:title y jcr:description del nuevo componente.
  5. Reemplace thumbnail.png si desea que se muestre una nueva imagen en miniatura en la lista de selección de plantillas (tamaño 128 x 98 px).
  6. Actualice sling:resourceType del nodo jcr:content de la plantilla para hacer referencia al nuevo componente.
  7. Realice cualquier otro cambio en la funcionalidad o el diseño de la plantilla o su componente subyacente.
    Los cambios realizados en el nodo /apps/<website>/templates/<template-name> afectarán a la instancia de plantilla (como en la lista de selección). Los cambios realizados en el nodo /apps/<website>/components/<component-name> afectarán a la página de contenido creada cuando se utilice la plantilla.
    Ahora puede crear una página dentro del sitio web con la nueva plantilla.
La biblioteca de cliente del editor asume la presencia del espacio de nombres en las páginas de contenido y, si no se encuentra, cq.shared Uncaught TypeError: Cannot read property 'shared' of undefined se producirá el error de JavaScript. Todas las páginas de contenido de muestra contienen cq.shared , por lo que cualquier contenido basado en ellas incluye cq.shared . Sin embargo, si decide crear sus propias páginas de contenido desde cero sin basarlas en contenido de muestra, debe asegurarse de incluir el cq.shared espacio de nombres. Consulte Uso de bibliotecas del lado del cliente para obtener más información.

Disponibilidad de una plantilla existente

Este ejemplo ilustra cómo permitir que se utilice una plantilla para determinadas rutas de contenido. Las plantillas que están disponibles para el autor de la página al crear nuevas páginas están determinadas por la lógica definida en Disponibilidad de plantilla.
  1. En CRXDE Lite, vaya a la plantilla que desee utilizar para la página, por ejemplo, la plantilla Newsletter.
  2. Cambie la allowedPaths propiedad y otras propiedades utilizadas para la disponibilidad de plantillas . Por ejemplo, allowedPaths : /content/geometrixx-outdoors/[^/]+(/.*)? significa que esta plantilla está permitida en cualquier ruta debajo de /content/geometrixx-outdoors .