Páginas y plantillas pages-and-template

Consulte la rama tutorial/pages-templates-start de GitHub

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

Implemente una base de código en una instancia de AEM local usando sus conocimientos de Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Cree una plantilla con el Tipo de plantilla de página, denominada Página de artículo.

Cambie a modo Estructura.

Añada un componente Fragmento de experiencia para que actúe como Encabezado en la parte superior de la plantilla.

• Configure el componente para que apunte a /content/experience-fragments/wknd/us/en/site/header/master.
• Establezca la directiva en Encabezado de página y asegúrese de que el Elemento predeterminado está establecido en header. El elemento header se ha segmentado con CSS en el capítulo siguiente.

Añada un componente de Fragmento de experiencia para que actúe como Pie de página en la parte inferior de la plantilla.

• Configure el componente para que apunte a /content/experience-fragments/wknd/us/en/site/footer/master.
• Establezca la directiva en Pie de página y asegúrese de que el Elemento predeterminado está establecido en footer. El elemento footer se ha segmentado con CSS en el capítulo siguiente.

Bloquee el contenedor main que se incluyó cuando se creó inicialmente la plantilla.

• Establezca la directiva en Página principal y asegúrese de que el Elemento predeterminado está establecido en main. El elemento main se ha segmentado con CSS en el capítulo siguiente.

Añada un componente Imagen al contenedor principal.

• Desbloquee el componente Imagen.

Añada un componente Ruta de exploración debajo del componente Imagen en el contenedor principal.

• Cree una directiva para el componente Ruta de exploración llamada Página de artículo - Ruta de exploración. Establezca el nivel de inicio de navegación en 4.

Añada un componente Contenedor debajo del componente Ruta de exploración y dentro del contenedor principal. Actúa como contenedor de contenido para la plantilla.

• Desbloquee el contenedor Contenido.
• Establezca la directiva en Contenido de la página.

Añada otro componente Contenedor debajo del Contenedor de contenido. Actúa como el contenedor de Carril lateral para la plantilla.

• Desbloquee el contenedor de Carril lateral.
• Cree una directiva denominada Página de artículo - Carril lateral.
• Configure los Componentes permitidos en el Proyecto de sitios WKND - Contenido para que incluyan: Botón, Descargar, Imagen, Lista, Separador, Uso compartido de medios sociales, Texto y Título.

Actualice la directiva del contenedor raíz de página. Este es el contenedor exterior de la plantilla. Establezca la directiva en Raíz de página.

• En Configuración de contenedor, establezca Diseño en Cuadrícula interactiva.

Active el modo diseño para el contenedor de contenido. Arrastre el controlador de derecha a izquierda y reduzca el contenedor a ocho columnas de ancho.

Active el modo de diseño para el contenedor del carril lateral. Arrastre el controlador de derecha a izquierda y reduzca el tamaño del contenedor a cuatro columnas de ancho. A continuación, arrastre el controlador izquierdo de izquierda a derecha una columna para que el contenedor tenga 3 columnas de ancho y deje un espacio de 1 columna entre el contenedor de contenido.

Abra el emulador móvil y cambie a un punto de interrupción móvil. Vuelva a activar el modo de diseño y haga que el contenedor de contenido y el contenedor de carril lateral tengan el ancho completo de la página. Esto apila los contenedores verticalmente en el punto de interrupción móvil.

Actualice la directiva del componente Texto en el contenedor de contenido.

• Establezca la directiva en Texto de contenido.
• En Complementos > Estilos de párrafo, marque Habilitar estilos de párrafo y asegúrese de que la opción Cita en bloque esté habilitada.

Cambie al modo Contenido inicial.

Añada un componente Título al Contenedor de contenido. Actúa como título del artículo. Cuando se deja vacío, muestra automáticamente el título de la página actual.

Añada un segundo componente Título debajo del primer componente Título.

• Configure el componente con el texto: “Por autor”. Es un marcador de posición de texto.
• Establezca el tipo en H4.

Añada un componente Texto debajo del componente Título de Por autor.

Añada un componente Título al Contenedor de carril lateral.

• Configure el componente con el texto: “Compartir esta historia”.
• Establezca el tipo en H5.

Añada un componente Compartir en redes sociales debajo del componente Título de Compartir esta historia.

Añada un componente Separador debajo del componente Compartir en redes sociales.

Añada un componente Descarga debajo del componente Separador.

Añada un componente Lista debajo del componente Descarga.

Actualice las propiedades de la página inicial para la plantilla.

• En Redes sociales > Compartido en redes sociales, marque Facebook y Pinterest.

Ver la plantilla en la consola Plantilla yendo a http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd

Habilite la plantilla Página de artículo.

Edite las propiedades de la plantilla Página de artículo y cargue la siguiente miniatura para identificar rápidamente las páginas creadas con la plantilla Página de artículo:

Descargue el paquete de contenido de ejemplo WKND-PagesTemplates-Content-Assets.zip.

Cargar e instalar el paquete de contenido mediante el Administrador de paquetes en http://localhost:4502/crx/packmgr/index.jsp

Actualizar la plantilla Variación web, que es la plantilla utilizada para los fragmentos de experiencia en http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• Actualice la directiva del componente Contenedor en la plantilla.
• Establezca la directiva en Raíz XF.
• En Componentes permitidos, seleccione el grupo de componentes Proyecto de sitios WKND - Estructura para que incluya los componentes Navegación de idioma, Navegación y Búsqueda rápida.

Abra el fragmento de experiencia que representa el encabezado en http://localhost:4502/editor.html/content/experience-fragments/wknd/es/es/site/header/master.html

Configure la raíz Contenedor del fragmento. Este es el contenedor más externo.

• Definir el diseño en Cuadrícula interactiva

Añada el logotipo oscuro de WKND como imagen a la parte superior del Contenedor. El logotipo se incluyó en el paquete instalado en un paso anterior.

• Modifique el diseño del logotipo oscuro de WKND para que tenga dos columnas de ancho. Arrastre los controladores de derecha a izquierda.
• Configure el logotipo con Texto alternativo de “Logotipo de WKND”.
• Configure el logotipo a Vínculo a /content/wknd/us/en la página de inicio.

Configure el componente Navegación que ya se ha colocado en la página.

• Establezca Excluir niveles de raíz en 1.
• Establezca la profundidad de la estructura de navegación en 1.
• Modifique el diseño del componente Navegación para que tenga ocho columnas de ancho. Arrastre los controladores de derecha a izquierda.

Quite el componente Navegación de idioma.

Modifique el diseño del componente Búsqueda para que tenga dos columnas de ancho. Arrastre los controladores de derecha a izquierda. Ahora todos los componentes deben alinearse horizontalmente en una sola fila.

Abra el fragmento de experiencia que procesa el pie de página en http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html

Configure la raíz Contenedor del fragmento. Este es el contenedor más externo.

• Establezca el Diseño en Cuadrícula interactiva

Añada el logotipo WKND Light como imagen a la parte superior del Contenedor. El logotipo se incluyó en el paquete instalado en un paso anterior.

• Modifique el diseño del logotipo ligero de WKND para que tenga dos columnas de ancho. Arrastre los controladores de derecha a izquierda.
• Configure el logotipo con el Texto alternativo de “WKND Logo Light”.
• Configure el logotipo en Vínculo a /content/wknd/us/en la página de inicio.

Añada un componente de Navegación debajo del logotipo. Configure el componente Navegación:

• Establezca Excluir niveles de raíz en 1.
• Desmarque Recopilar todas las páginas secundarias.
• Establezca la Profundidad de la estructura de navegación en 1.
• Modifique el diseño del componente Navegación para que tenga ocho columnas de ancho. Arrastre los controladores de derecha a izquierda.

Vaya a la consola Sitios en http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Cree una página debajo de WKND > US > EN > Magazine.

• Elija la plantilla Página de artículo.
• En Propiedades establezca el Título en “Guía definitiva para parques de patinaje de Los Ángeles”
• Establezca Nombre en “guía-la-parques-de-patinaje”

Reemplace el título de Del autor por el texto “Stacey Roswells”.

Actualice el componente Texto para incluir un párrafo para rellenar el artículo. Puede usar el siguiente archivo de texto como copia: la-skate-parks-copy.txt.

Añada otro componente Texto.

• Actualice el componente para incluir la cita: “No hay mejor lugar para hacer shredding que Los Ángeles”.
• Edite el Editor de texto enriquecido en modo de pantalla completa y modifique la cita anterior para utilizar el elemento Bloque de cita.

Siga rellenando el cuerpo del artículo para que coincida con las maquetas.

Configure el componente Descargar para que use una versión PDF del artículo.

• En Descargar > Propiedades, haga clic en la casilla de verificación para obtener el título del recurso DAM.
• Establezca Descripción en: “Obtener la historia completa”.
• Establezca Texto de acción en: “Descargar PDF”.

Configure el componente Lista.

• En Configuración de lista > Lista de compilación que usa, seleccione Páginas secundarias.
• Establezca la Página principal en /content/wknd/us/en/magazine.
• En Configuración de elemento marque Vincular elementos y marque Mostrar fecha.

Abra CRXDE-Lite y utilice la navegación de árbol para navegar hasta /content/wknd/us/en/magazine/guide-la-skateparks.

Haga clic en el nodo jcr:content debajo de la página la-skateparks y vea las propiedades:

Observe el valor de cq:template, que apunta a /conf/wknd/settings/wcm/templates/article-page, la plantilla de página de artículo creada anteriormente.

Observe también el valor de sling:resourceType, que apunta a wknd/components/page. Este es el componente de página creado por el arquetipo de proyecto de AEM y es responsable de procesar la página basada en la plantilla.

Expanda el nodo jcr:content por debajo de /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content y vea la jerarquía de nodos:

Debe poder asignar de forma temporal cada uno de los nodos a los componentes creados. Vea si puede identificar los diferentes contenedores de diseño utilizados inspeccionando los nodos con el prefijo container.

A continuación, inspeccione el componente de página en /apps/wknd/components/page. Vea las propiedades del componente en CRXDE Lite:

Solo hay dos scripts HTL, customfooterlibs.html y customheaderlibs.html, debajo del componente de página. ¿Cómo procesa este componente la página?

La propiedad sling:resourceSuperType señala a core/wcm/components/page/v2/page. Esta propiedad permite que el componente de página de WKND herede toda la funcionalidad del componente de página del componente principal. Este es el primer ejemplo de algo llamado Patrón de componente proxy. Puede encontrar más información aquí.

Inspeccione otro componente dentro de los componentes WKND, el componente Breadcrumb desde: /apps/wknd/components/breadcrumb. Observe que se puede encontrar la misma propiedad sling:resourceSuperType, pero esta vez apunta a core/wcm/components/breadcrumb/v2/breadcrumb. Este es otro ejemplo de uso del patrón de componentes proxy para incluir un componente principal. De hecho, todos los componentes de la base de código WKND son proxies de los componentes principales de AEM (excepto el componente HelloWorld de demostración personalizado). Se recomienda reutilizar tanta funcionalidad de los componentes principales como sea posible antes de escribir código personalizado.

A continuación, inspeccione la página de componentes principales en /libs/core/wcm/components/page/v2/page mediante CRXDE Lite:

Observe que debajo de esta página se incluyen muchos archivos de script. La página Componente principal contiene numerosas funcionalidades. Esta funcionalidad se divide en varios scripts para facilitar el mantenimiento y la legibilidad. Puede rastrear la inclusión de los scripts HTL abriendo page.html y buscando data-sly-include:

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

La otra razón para dividir el HTL en varios scripts es permitir que los componentes proxy anulen los scripts individuales para implementar la lógica empresarial personalizada. Los scripts HTL customfooterlibs.html y customheaderlibs.html se han creado con el propósito explícito de que se anulen cuando se implementen los proyectos.

Puede obtener más información sobre cómo la plantilla editable influye en la representación de la página de contenido en este artículo.

Inspeccione otro componente principal, como la ruta de exploración de /libs/core/wcm/components/breadcrumb/v2/breadcrumb. Vea el script breadcrumb.html para comprender cómo se genera finalmente el marcado para el componente de ruta de exploración.

En, el VSCode abra el proyecto aem-guides-wknd.

Expanda el módulo ui.content en el explorador de proyectos. Expanda la carpeta src y vaya hasta /conf/wknd/settings/wcm/templates.

Haga clic con el botón derecho del ratón en la carpeta templates y seleccione Importar desde el servidor de AEM:

article-page debe importarse, y las plantillas page-content, xf-web-variation también deben actualizarse.

Repita los pasos para importar contenido, pero seleccione la carpeta policies de /conf/wknd/settings/wcm/policies.

Inspeccione el archivo filter.xml de ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

El archivo filter.xml es responsable de identificar las rutas de acceso de los nodos instalados con el paquete. Observe el mode="merge" en cada uno de los filtros lo que indica que el contenido existente no debe modificarse, solo se añade contenido nuevo. Dado que los autores de contenido pueden estar actualizando estas rutas, es importante que una implementación de código no sobrescriba el contenido. Consulte la documentación de FileVault para obtener más información sobre cómo trabajar con elementos de filtro.

Compare ui.content/src/main/content/META-INF/vault/filter.xml y ui.apps/src/main/content/META-INF/vault/filter.xml para comprender los diferentes nodos administrados por cada módulo.