Plantillas de página: estáticas page-templates-static

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.

Una plantilla se utiliza 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 presentará una selección de componentes disponibles para su uso.

  • Las plantillas están creadas con Componentes;
  • Los componentes utilizan utilidades y permiten el acceso a ellas, que se utilizan para representar el contenido.
NOTE
Plantillas editables también están disponibles y son el tipo recomendado de plantillas para obtener la mayor flexibilidad y las funciones más recientes.

Propiedades y nodos secundarios de una plantilla properties-and-child-nodes-of-a-template

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 de tipo nodo cq:Template.
allowedChildren
Cadena[]
Ruta de una plantilla que puede ser secundaria a 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: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 (árbol de nodos) /apps/<myapp>/template/<mytemplate>) a la posición correspondiente en el árbol de sitios: esto es lo que sucede si se crea una página con la variable 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).

Cómo se estructuran las plantillas how-templates-are-structured

Hay dos aspectos que se deben tener en cuenta:

  • la estructura de la plantilla
  • la estructura del contenido producido al utilizar una plantilla

La estructura de una plantilla the-structure-of-a-template

Una plantilla se crea bajo un nodo de tipo cq:Template.

screen_shot_2012-02-13at63646pm

Se pueden configurar 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, utilizando sling:resourceType, al componente que se utilizará para procesar el contenido real de una página nueva.

screen_shot_2012-02-13at64010pm

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

screen_shot_2012-02-13at64137pm

El contenido producido por una plantilla the-content-produced-by-a-template

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 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 default-templates

AEM incluye una serie de 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 el sitio web.

Por ejemplo, AEM 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
La plantilla de la página principal de Geometrixx.
Página de contenido
contentpage
geometrixx
La plantilla de página de contenido de Geometrixx.

Visualización de plantillas predeterminadas displaying-default-templates

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

  1. En el CRXDE Lite, abra el 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(*, cq:Template)

  5. Haga clic en Ejecutar. La lista se muestra 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 su sitio web y desea que se muestre en la Crear página al crear una página directamente debajo de Sitios web de la variable Sitios web consola, establezca la propiedad allowedPaths del nodo template en: /content(https://experienceleague.adobe.com/.*?lang=es)?

Aplicación de los diseños de plantilla how-template-designs-are-applied

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 está definiendo el estilo.

CAUTION
Adobe recomienda aplicar solo diseños Modo de diseño.
La modificación de diseños en CRX DE, 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 Diseño, las siguientes secciones, Resolución de la ruta de diseño, Árbol de decisionesy Ejemplo no son aplicables.

NOTE
En esta sección se describe el comportamiento de resolución de ruta de diseño a partir de AEM 6.4.2.0.

Resolución de la ruta de diseño design-path-resolution

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 travesía 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 decisiones decision-tree

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

design_path_resolution

Ejemplo example

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 elegido
Comentar
leaf

root

branch

leaf

leaf
La coincidencia más exacta siempre se toma.
leaf

root

branch

branch
Volverá a la coincidencia más cercana 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 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 developing-page-templates

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

Creación de una plantilla nueva (basada en una plantilla existente) creating-a-new-template-based-on-an-existing-template

Huelga decir que una plantilla nueva se puede crear completamente desde cero, pero a menudo una plantilla existente se copiará y actualizará para ahorrarle tiempo y esfuerzo. Por ejemplo, las plantillas de Geometrixx se pueden utilizar para empezar.

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

    note note
    NOTE
    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 el jcr:description si procede. Asegúrese de cambiar la disponibilidad de la plantilla de la página según corresponda.

    note note
    NOTE
    Si desea que la plantilla se muestre en la variable Crear página al crear una página directamente debajo de Sitios web de la variable Sitios web consola, establezca la variable allowedPaths propiedad del nodo de plantilla a: /content(/.*)?

    chlimage_1-251

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

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

  4. Actualice el jcr:title y jcr:description del nuevo componente.

  5. Reemplace thumbnail.png si desea que una nueva imagen en miniatura se muestre en la lista de selección de plantillas (tamaño 128 x 98 px).

  6. Actualice el sling:resourceType de la plantilla jcr:content para hacer referencia al nuevo componente.

  7. Realice cualquier cambio adicional en la funcionalidad o el diseño de la plantilla o su componente subyacente.

    note note
    NOTE
    Los cambios realizados en la variable /apps/<website>/templates/<template-name> afectará a la instancia de la plantilla (como en la lista de selección).
    Los cambios realizados en la variable /apps/<website>/components/<component-name> afecta a la página de contenido creada al utilizar la plantilla.

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

NOTE
La biblioteca de cliente del editor asume la presencia de la variable cq.shared espacio de nombres en páginas de contenido y si no hay el error de JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined será el resultado.
Todas las páginas de contenido de ejemplo contienen cq.shared, por lo que cualquier contenido basado en ellos se incluye automáticamente 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 la variable cq.shared espacio de nombres.
Consulte Uso de bibliotecas del lado del cliente para obtener más información.

Disponibilidad de una plantilla existente making-an-existing-template-available

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 páginas nuevas están determinadas por la lógica definida en Disponibilidad de plantillas.

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

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

    chlimage_1-252

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