Plantillas de página page-templates

En este capítulo exploraremos la relación entre una Plantilla de página y una Página. Crearemos una plantilla de artículo de revista sin estilo basada en algunas maquetas de AdobeXD. En el proceso de creación de la plantilla, se tratan los componentes principales y las configuraciones de directiva avanzadas.

Requisitos previos prerequisites

Este es un tutorial de varias partes y se da por hecho que se han completado los pasos descritos en el capítulo Crear contenido y publicar cambios.

Objetivo

  1. Conozca los detalles de las plantillas de página y cómo se pueden utilizar las políticas para aplicar un control granular del contenido de la página.
  2. Descubra cómo se vinculan las plantillas y las páginas.
  3. Cree una nueva plantilla y una página.

Qué va a generar what-you-will-build

En esta parte del tutorial, creará una nueva plantilla Página de artículo de revista que se puede utilizar para crear nuevos artículos de revista y se ajuste a una estructura común. La plantilla se basa en diseños y un kit de interfaz de usuario producido en AdobeXD. Este capítulo solo se centra en crear la estructura o el esqueleto de la plantilla. No se han implementado estilos, pero la plantilla y las páginas funcionan.

Crear la plantilla de página de artículo de revista

Al crear una página, debe seleccionar una plantilla, que se utiliza como base para crear la nueva página. La plantilla define la estructura de la página resultante, el contenido inicial y los componentes permitidos.

Hay 3 áreas principales de Plantillas de página:

  1. Estructura: define los componentes que forman parte de la plantilla. Los autores de contenido no pueden editarlos.
  2. Contenido inicial: define componentes con los que comienza la plantilla, que los autores de contenido pueden editar o eliminar
  3. Directivas: define configuraciones sobre cómo se comportan los componentes y qué opciones tendrán disponibles los autores.

AEM A continuación, cree una nueva plantilla en la que se adapte a la estructura de las maquetas. AEM Esto ocurrirá en una instancia local de. Siga los pasos del siguiente vídeo:

Puede utilizar la siguiente miniatura para identificar su plantilla (o cargar la suya propia).

Miniatura de plantilla de página de artículo

Paquete de soluciones

Se puede descargar e instalar una solución de la plantilla Magazine mediante el Administrador de paquetes.

Actualizar el encabezado y el pie de página con fragmentos de experiencias experience-fragments

Una práctica común al crear contenido global, como un encabezado o pie de página, es usar un Fragmento de experiencia. Los fragmentos de experiencias permiten a los usuarios combinar varios componentes para crear un único componente referenciable. Los fragmentos de experiencias tienen la ventaja de admitir la administración de varios sitios y la localización.

La plantilla del sitio generó un encabezado y un pie de página. A continuación, actualice los fragmentos de experiencias para que coincidan con las maquetas. Siga los pasos del siguiente vídeo:

Pasos de alto nivel para el siguiente vídeo:

  1. Descargue el paquete de contenido de muestra WKND-Starter-Assets-Skate-Article-1.2.zip.
  2. Cargue e instale el paquete de contenido mediante el Administrador de paquetes.
  3. Actualizar los fragmentos de experiencias de encabezado y pie de página para utilizar el logotipo de WKND

Crear una página de artículo de revista

A continuación, cree una nueva página con la plantilla Página de artículo de la revista. Cree el contenido de la página para que coincida con las maquetas del sitio. Siga los pasos del siguiente vídeo:

Utilice el texto proporcionado para rellenar el cuerpo del artículo.

Enhorabuena. congratulations

Acaba de crear una plantilla y una página nuevas con Adobe Experience Manager Sites.

Siguientes pasos next-steps

En este punto, la página del artículo de la revista y el sitio no coinciden con los estilos de marca de WKND. Siga el tutorial de Theming para conocer las prácticas recomendadas para actualizar el código de front-end de CSS y Javascript utilizado para aplicar estilos globales al sitio.

Paquete de soluciones

Hay disponible un paquete de soluciones para este capítulo para descargar: WKND-Magazine-Template-SOLUTION-1.0.zip.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9