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

AEM Implemente una base de código en una instancia de local con sus habilidades con 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.

Cambiar a modo Structure.

Agregue 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 Elemento predeterminado está establecido en header. El elemento header se ha segmentado con CSS en el capítulo siguiente.

Agregue un componente 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 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 Elemento predeterminado está establecido en main. El elemento main se ha segmentado con CSS en el capítulo siguiente.

Agregue un componente Image al contenedor main.

• Desbloquee el componente Image.

Agregue 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.

Agregue un componente Container debajo del componente Ruta de exploración y dentro del contenedor main. Actúa como contenedor de contenido para la plantilla.

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

Agregue otro componente Contenedor debajo del contenedor de contenido. Actúa como el contenedor de raíl lateral para la plantilla.

• Desbloquee el contenedor de raíl 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 de 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 raíl 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. Vuelve a activar el modo de diseño y haz que el contenedor de contenido y el contenedor de raíl 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 el bloque de cotización esté habilitado.

Cambiar al modo Contenido inicial.

Agregue un componente Title 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.

Agregue un segundo componente Title debajo del primer componente Title.

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

Agregue un componente Texto debajo del componente Título de Por autor.

Agregue un componente Title al contenedor de raíl lateral.

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

Agregue un componente Compartir en redes sociales debajo del componente Compartir esta historia del título.

Agregue un componente Separador debajo del componente Compartir en redes sociales.

Agregue un componente Download debajo del componente Separator.

Agregue un componente List debajo del componente Download.

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

• En Medios sociales > Uso compartido en medios sociales, compruebe Facebook y Pinterest

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

Habilitar la plantilla de 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.

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

Actualice la plantilla Variación web, que es la plantilla utilizada para los fragmentos de experiencias 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 selecciona el grupo de componentes Proyecto de sitios WKND - Estructura para incluir los componentes Navegación de idioma, Navegación y Búsqueda rápida.

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

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

• Definir diseño en cuadrícula adaptable

Agregue 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 Link a /content/wknd/us/en la página de inicio.

Configure el componente Navigation que ya se ha colocado en la página.

• Establecer 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 Search 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.

• Definir diseño en cuadrícula adaptable

Agregue 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 Texto alternativo de "WKND Logo Light".
• Configure el logotipo a Link a /content/wknd/us/en la página de inicio.

Agregue un componente Navigation debajo del logotipo. Configurar el componente Navigation:

• Establecer 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 como "Guía definitiva de parques de patinaje de Los Ángeles"
• Establece Name en "guide-la-skateparks"

Reemplace el título de By Author por el texto "By Stacey Roswells".

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

Agregar otro componente Text.

• Actualice el componente para incluir la cita: "No hay mejor lugar para compartir que Los Ángeles".
• Edite el Editor de texto enriquecido en modo de pantalla completa y modifique la cita anterior para utilizar el elemento Quote Block.

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

Configure el componente Download 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 Description en: "Obtener la historia completa".
• Establezca Texto de acción en: "PDF de descarga".

Configure el componente List.

• En Configuración de lista > Lista de compilación que usa, seleccione Páginas secundarias.
• Establezca Página principal en /content/wknd/us/en/magazine.
• En, Configuración de elemento comprueba Vincular elementos y marca 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. AEM Este es el componente de página creado por el tipo de archivo del proyecto de y es responsable de procesar la página en función de 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 all la funcionalidad del componente de página del componente principal. Este es el primer ejemplo de algo llamado Patrón de componentes proxy. Encontrará más información aquí.

Inspect otro componente dentro de los componentes WKND, el componente Breadcrumb de: /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. AEM De hecho, todos los componentes de la base de código de WKND son proxies de los componentes principales de la (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 del componente principal en /libs/core/wcm/components/page/v2/page con el 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 al implementar proyectos.

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

Inspect es 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 Ruta de exploración.

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

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

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

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.

Inspect eliminó 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 que indica que el contenido existente no debe modificarse, solo se agrega contenido nuevo. Dado que los autores de contenido pueden estar actualizando estas rutas, es importante que una implementación de código sobrescriba el contenido no. 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.