Plantillas de página: estáticas

Última actualización: 2023-07-19

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

Cada plantilla le presenta una selección de componentes disponibles para su uso.

  • Las plantillas están compuestas por Componentes;
  • Los componentes utilizan los widgets y permiten el acceso a ellos, y se utilizan para procesar el contenido.
NOTA

Plantillas editables también están disponibles y son el tipo recomendado de plantillas para la 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.
allowedChildren Cadena[] Ruta de una plantilla que puede ser una plantilla secundaria de esta plantilla.
allowedParents Cadena[] Ruta de una plantilla que puede ser una plantilla principal de esta plantilla.
allowedPaths 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 Título de la plantilla.
clasificación Largo Clasificación de la plantilla. Se utiliza para mostrar la plantilla en la interfaz de usuario de.
jcr:contenido cq:PageContent Nodo que contiene el contenido de la plantilla.
thumbnail.png nt:archivo Miniatura de la plantilla.
icon.png nt:archivo Icono de la plantilla.

Una plantilla es la base de una página.

Para crear una página, se debe copiar la plantilla (árbol de nodos) /apps/<myapp>/template/<mytemplate>) a la posición correspondiente en el árbol del sitio: esto es lo que sucede si se crea una página con el Sitios web pestaña.

Esta acción de copia también proporciona a la página su contenido inicial (normalmente solo contenido de nivel superior) y la propiedad sling:resourceType, la ruta al componente de página que se utiliza para procesar la página (todo en el nodo secundario jcr:content).

Estructura de las plantillas

Hay dos aspectos que hay que tener en cuenta:

  • la estructura de la propia plantilla
  • la estructura del contenido producido cuando se utiliza una plantilla

La estructura de una plantilla

Se crea una plantilla en un nodo de tipo cq:Template.

screen_shot_2012-02-13at63646pm

Se pueden configurar varias propiedades, en particular:

  • jcr:título - 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 va a utilizar para procesar el contenido real de una nueva página.

screen_shot_2012-02-13at64010pm

Este componente se utiliza para definir la estructura y el diseño del contenido cuando se crea una nueva página.

screen_shot_2012-02-13at64137pm

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). AEM Cada página de tiene un nodo estructurado jcr:content. Así pues:

  • es de 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 los scripts de sling utilizados para procesar el contenido

Plantillas predeterminadas

AEM La variable viene con varias plantillas predeterminadas disponibles de forma predeterminada. A veces, es posible que desee utilizar las plantillas tal cual. En ese caso, debe asegurarse de que la plantilla esté disponible para el sitio web.

AEM Por ejemplo, la viene con varias plantillas, incluidas una página de contenido y una página de inicio.

Título Componente Ubicación Función
Página principal homepage geometrixx Plantilla de la página de inicio de la Geometrixx.
Página de contenido contentpage geometrixx Plantilla de la página de contenido Geometrixx.

Visualización de plantillas predeterminadas

Para ver una lista de todas las plantillas del repositorio, siga este procedimiento:

  1. En CRXDE Lite, abra el Herramientas y haga clic en Consulta.

  2. En la pestaña Consulta

  3. Como Tipo, seleccione XPath.

  4. En el Consulta campo de entrada, introduzca la siguiente cadena: //element(*, cq:Template)

  5. Clic Ejecutar. La lista se muestra en el cuadro de resultados.

Normalmente, se toma una plantilla existente y se desarrolla una nueva para uso propio. 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 la Crear página diálogo al crear una página justo debajo de Sitios web desde el Sitios web , establezca la propiedad allowedPaths del nodo de la plantilla en: /content(/.&?lang=es#42;)?

Aplicación de los diseños de plantilla

Cuando los estilos se definen en la interfaz de usuario mediante Modo de diseño, el diseño se mantiene en la ruta exacta del nodo de contenido para el que se define el estilo.

PRECAUCIÓN

Adobe recomienda aplicar únicamente diseños mediante Modo de diseño.

La modificación de diseños en CRXDE Lite, por ejemplo, no es una práctica recomendada y la aplicación de dichos diseños puede variar del comportamiento esperado.

Si los diseños solo se aplican mediante el modo de diseño, a continuación, las siguientes secciones, Resolución de ruta de diseño, Árbol de decisión, y el Ejemplo no son aplicables.

Resolución de ruta de diseño

AEM Al procesar contenido basado en una plantilla estática, intenta aplicar los estilos y el diseño más relevantes al contenido en función de un recorrido de la jerarquía de contenido.

AEM determina el estilo más relevante para un nodo de contenido en el siguiente orden:

  • 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 Diseño), utilice ese diseño.
  • Si hay un diseño para el nodo de contenido del elemento principal, utilice ese 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 decisión

Esta es una representación gráfica del Resolución de ruta de diseño lógica.

design_path_resolution

Ejemplos

Considere una estructura de contenido simple como se muestra a continuación, donde un diseño podría aplicarse a cualquiera de los nodos:

/root/branch/leaf

AEM En la tabla siguiente se describe cómo elige el diseño el usuario.

Búsqueda De Diseño Para
Hay Diseños Para
Diseño elegido
Comentar
leaf

root

branch

leaf

leaf Siempre se toma la coincidencia más exacta.
leaf

root

branch

branch Vuelva a la coincidencia más cercana más abajo en el árbol.
leaf root root Si todo lo demás falla, toma 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 que esté más abajo en el árbol.

Se supone que esto siempre será aplicable, pero más arriba en el árbol puede ser demasiado específico.

Desarrollo de plantillas de página

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

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

Se puede crear una plantilla nueva completamente desde cero, pero a menudo se copia una plantilla existente y se actualiza para ahorrarle tiempo y esfuerzo. Por ejemplo, las plantillas dentro de Geometrixx se pueden utilizar para ayudarle a empezar.

Para crear una 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 se almacenan en /apps/<website-name>/templates/<template-name>.

    NOTA

    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:título del nuevo nodo de plantilla para reflejar su nueva función. También puede actualizar el jcr:description si procede. Asegúrese de cambiar la disponibilidad de la plantilla de la página según corresponda.

    NOTA

    Si desea que la plantilla se muestre en la variable Crear página diálogo al crear una página justo debajo de Sitios web desde el Sitios web consola, configure el allowedPaths del nodo de plantilla a: /content(/.*)?

    chlimage_1-88

  3. Copie el componente en el que se basa la plantilla (esto se indica mediante la variable sling:resourceType propiedad del jcr:contenido dentro de la plantilla) para crear una instancia.

    Los componentes se almacenan en /apps/<website-name>/components/<component-name>.

  4. Actualice el jcr:título 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 el sling:resourceType de la plantilla jcr:contenido para hacer referencia al nuevo componente.

  7. Realice cambios adicionales en la funcionalidad o el diseño de la plantilla, en su componente subyacente o en ambos.

    NOTA

    Cambios realizados en /apps/<website>/templates/<template-name> afectan a la instancia de plantilla (como en la lista de selección).

    Cambios realizados en /apps/<website>/components/<component-name> afectan a la página de contenido creada cuando se utiliza la plantilla.

    Ahora puede crear una página dentro del sitio web con la nueva plantilla.

NOTA

La biblioteca de cliente del editor supone la presencia de cq.shared en las páginas de contenido y, si está ausente, el error de JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined resultados.

Todas las páginas de contenido de muestra contienen cq.shared, de modo que cualquier contenido basado en ellos incluye automáticamente cq.shared. Sin embargo, si decide crear sus propias páginas de contenido desde cero sin basarlas en contenido de ejemplo, debe asegurarse de incluir la variable cq.shared namespace.

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 disponibles para el autor de la página al crear páginas están determinadas por la lógica definida en Disponibilidad de plantillas.

  1. En CRXDE Lite, vaya a la plantilla que desee utilizar para la página, por ejemplo, la plantilla Newsletter.

  2. Cambie el allowedPaths y otras propiedades utilizadas para disponibilidad de plantillas. Por ejemplo, allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? significa que esta plantilla está permitida en cualquier ruta de /content/geometrixx-outdoors.

    chlimage_1-89

En esta página