Plantillas de página

En este capítulo analizaremos la relación entre una plantilla de página y una página. Construiremos una plantilla de artículo de revista desdiseñada basada en algunas maquetas de AdobeXD. En el proceso de creación de la plantilla, se tratan los componentes principales y las configuraciones de políticas avanzadas.

Requisitos previos

Este es un tutorial de varias partes y se da por hecho que los pasos descritos en la sección Creación de contenido y publicación de cambios se ha completado el capítulo.

Objetivo

  1. Comprenda los detalles de las plantillas de página y cómo se pueden usar las políticas para aplicar el 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

En esta parte del tutorial, creará una nueva plantilla Página de artículos de revistas que se puede utilizar para crear nuevos artículos de revistas y se ajusta a una estructura común. La plantilla se basará en diseños y en un kit de interfaz de usuario creado en Adobe XD. Este capítulo se centra únicamente en la construcción de la estructura o el esqueleto de la plantilla. No se implementará ningún estilo, pero la plantilla y las páginas funcionarán.

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

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

Hay 3 zonas principales Plantillas de página:

  1. Estructura : define los componentes que forman parte de la plantilla. Los autores de contenido no podrán editarlos.
  2. Contenido inicial : define los componentes con los que comenzará la plantilla, que los autores de contenido pueden editar o eliminar
  3. Políticas : define las configuraciones sobre cómo se comportarán los componentes y las opciones que tendrán disponibles los autores.

A continuación, cree una nueva plantilla en AEM que coincida con la estructura de las maquetas. Esto ocurre en una instancia local de AEM. Siga los pasos del siguiente vídeo:

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

Artículo Miniatura de plantilla de página

Paquete de soluciones

Un solución de la plantilla de revista se puede descargar e instalar mediante el Administrador de paquetes.

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

Una práctica habitual al crear contenido global, como un encabezado o pie de página, es utilizar un Fragmento de experiencia. Fragmentos de experiencia, permite a los usuarios combinar varios componentes para crear un único componente que se pueda referenciar. Los fragmentos de experiencias tienen la ventaja de admitir la administración en varios sitios y localización.

La plantilla 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. Descargar el paquete de contenido de ejemplo WKND-Starter-Assets-Skate-Article-1.2.zip.
  2. Cargue e instale el paquete de contenido mediante el Administrador de paquetes.
  3. Actualice los fragmentos de experiencia de encabezado y pie de página para utilizar el logotipo de WKND

Creación de una página de artículos de una revista

A continuación, cree una nueva página con la plantilla Página de artículos 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 la variable texto proporcionado para rellenar el cuerpo del artículo.

Felicitaciones!

Felicidades, acaba de crear una nueva plantilla y página con Adobe Experience Manager Sites.

Siguientes pasos

En este punto, la página de artículos de la revista y el sitio no coinciden con los estilos de marca de WKND. Siga las Tema tutorial 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.

En esta página