Cómo agregar una página en AEM Edge Delivery Services

Si acaba de terminar de seguir el tutorial oficial de introducción de Edge Deliver Services (en adelante, EDS), es posible que se pregunte cómo expandir el sitio web que acaba de crear. Este artículo le mostrará cómo crear y publicar una nueva página en su sitio web de AEM. En este artículo se supone que ha completado el tutorial original y que tiene un sitio web en ejecución con la extensión AEM Sidekick instalada en el explorador.

Primero, crea un nuevo archivo en tu Google Drive

Cuando crees tu nuevo archivo, se te pedirá que "Crear y compartir", ya que ya has compartido tu carpeta con [email protected] en el tutorial oficial. Compartir la carpeta y, por extensión, los documentos que contiene, permite a EDS ver y extraer contenido de su Google Drive en su sitio web. Haga clic en "Crear y compartir" y comience a editar su nuevo documento.

Lo primero que hay que tener en cuenta al editar un documento en un proyecto EDS es el nombre del documento. Este nombre se utilizará para crear la URL en la que se encuentra la página.

Por ejemplo, la URL principal del proyecto que ves en las capturas de pantalla de este blog es https://main--drews-franklin-demo--drew-cummings.hlx.live/.

Si creo un nuevo documento llamado "nueva página", la URL en la que existirá esa página cuando se publique es https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. Vale la pena señalar que todas las URL generadas estarán en minúsculas, incluso si el nombre del documento está en mayúsculas. Por el bien de la legibilidad y la navegación, asegúrese de que los nombres de sus documentos sean cortos y relevantes.

Continúe y actualice el título de su documento a "nueva página"

Ahora agreguemos un título en la parte superior de nuestro documento. Establece tu texto en "Encabezado 1" y escribe tu título.

Veamos cómo se ve en el sitio web. Siga adelante y vaya a la URL generada, en mi caso https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page, y vea cómo loo-

¡No! Si ves esto, no te asustes. Este es el aspecto de un error de "página no encontrada" en la demostración predeterminada de EDS. Nuestro sitio web no puede encontrar nuestra página en este momento porque aún no la hemos previsualizado ni publicado. Vuelva al documento y haga clic en la extensión de la barra de tareas de AEM, el icono situado más a la izquierda en la captura de pantalla siguiente

Después de un momento, debería aparecer la barra de herramientas auxiliar. Debería notar un botón de "vista previa" en la parte izquierda con un punto rojo. Este punto rojo indica que hay nuevo contenido que se va a preparar y enviar al sitio web. Adelante, haga clic en ese botón y mire la página que se carga para usted.

Esta es la vista previa de su nueva página. Así es como se verá su página en el sitio "en vivo" una vez que la publique. Es importante tener en cuenta que, aunque el contenido no se haya publicado, no aparecerá en la página en vivo y una página que no se haya publicado no aparecerá en el sitio web en vivo. Esto te permite experimentar con el contenido y ajustar las cosas a tu gusto sin que los usuarios de tu sitio lo vean hasta que estés listo para publicarlo. Por ahora, dejemos esta página sin publicar y volvamos al Google Doc para agregar más contenido.

Tal como existe en este momento, nuestra página es bastante sencilla. Vamos a añadirle un poco de color con una imagen. Para simplificar, usaremos la imagen de ADN azul de la página de muestra.

Dale a la vista previa y mira cómo se ve.

¡Se ve bien! Si no desea que el texto se superponga en la parte superior de la imagen, simplemente coloque la imagen debajo del texto del encabezado en el documento en lugar de encima y obtendrá una página que se verá así.

La superposición de texto solo se produce para la primera imagen del artículo, y solo cuando se formatea como se muestra inicialmente, con el texto en estilo Título o Título 1 directamente debajo de la imagen.

Ahora agreguemos algo de contenido de texto a este artículo. Usaré Lorem Ipsum, un texto latino utilizado tradicionalmente en la industria editorial para experimentar con diseños de texto. Lorum Ipsum nos permite ver cómo se verá el contenido del alfabeto árabe en una página sin distraernos al leerlo accidentalmente. Siéntase libre de agregar cualquier contenido de texto que desee en su lugar. Así es como se ve en mi Google Doc:

Y así es como se ve en mi página de vista previa:

Finalmente, veamos cómo se verá una imagen cuando se coloque en línea con el contenido de la página. Agregaré una de las imágenes de la página de demostración después del primer párrafo para demostrar cómo se verá en el sitio a continuación:

Vale la pena señalar que EDS extrae contenido del Google Doc y lo usa para generar archivos HTML que crean el sitio web. Como resultado, el tamaño de la imagen en el documento de Google no se correlaciona con el tamaño de la imagen en la página de vista previa/activa. Si desea ajustar el tamaño de la imagen en el sitio, debe ajustar la resolución nativa de la imagen.

Ahora que tenemos una página que estamos contentos de mostrar al mundo, tenemos un último paso que debemos realizar antes de publicar. Quiero cambiar el título de esta página en los metadatos de "Mi nueva página" a "Página de demostración" sin cambiar el título de mi artículo. También quiero agregar una descripción a los metadatos para que la página sea más fácil de encontrar para los motores de búsqueda. Para hacer esto, necesitaremos agregar un bloque de metadatos.

La forma más fácil de agregar un bloque de metadatos es simplemente copiar y pegar el de la página de inicio de la demostración, pero si está interesado en hacer uno desde cero, lo guiaré a través de ese proceso.

Primero, inserte una tabla de 2X3 al final de su documento. Resalte las celdas de la primera fila, haga clic con el botón derecho y seleccione "combinar celdas".

Escriba "Metadatos" en la fila superior, luego escriba "Título" y "Descripción" en las celdas de la izquierda de las dos filas siguientes. Escriba lo que desea que sea el título a la derecha de la celda "Título" y lo que desea que sea la descripción a la derecha de la celda "Descripción". El resultado final debería ser algo así:

Continúe y obtenga una vista previa de la página ahora. Notarás que el contenido de la página no ha cambiado en absoluto, pero si miras la pestaña en Chrome, aparecerá nuestro nuevo título en lugar del título predeterminado que teníamos anteriormente.

Si inspeccionamos el archivo HTML de la página web, podemos ver que tanto nuestro título como nuestra descripción están presentes como propiedades de la página web

¡Ya estás listo para publicar! Haga clic en el botón "Publicar" en el lado izquierdo de la extensión de la barra de tareas de AEM que aparece en la página de vista previa y vea la nueva página web activa en su sitio web.

¡Felicidades por agregar una página a tu sitio web! Existe la posibilidad de que, si visitó previamente la URL de esta página antes de publicar y obtuvo el error 404 de página no encontrada, aún verá ese error después de publicar. Esto puede suceder debido a una serie de razones, pero a menos que haya recibido un mensaje de error de la extensión AEM Sidestreak, es poco probable que su contenido se haya realizado realmente. Sólo tienes que esperar uno o dos minutos para actualizar la página y deberías ver tu página publicada.

Si le ha gustado este tutorial y desea obtener más información sobre los productos AEM, consulte nuestro artículo sobre qué es AEM aquí.

Sobre el autor

Contáctenos

Episodios de podcast