Guía de introducción para desarrolladores para la creación WYSIWYG con Edge Delivery Services edge-dev-getting-started
Esta guía le ayudará a ponerse en marcha con un nuevo sitio de Adobe Experience Manager que utiliza Edge Delivery Services y el editor universal para la creación de contenido WYSIWYG.
Requisitos previos prerequisites
Antes de comenzar esta guía, debe estar familiarizado con los conceptos básicos de y tener acceso a los Edge Delivery Services, incluidos los siguientes:
- Ha completado el Tutorial del servicio de envío de Edge.
- Tiene acceso a una Zona protegida de AEM Cloud Service.
- Ha habilitado el Editor universal en el mismo entorno de zona protegida.
Elija el editor adecuado editor-choice
AEM ofrece dos editores de contenido diferentes y la elección de cuál utilizar depende de su situación.
- Editor universal: Esta debe ser la opción predeterminada para los nuevos sitios.
- Editor de página de AEM: debe elegirse para una migración de AEM Sites existente a Edge Delivery Services.
Esta guía se centra en los proyectos AEM en Edge Delivery Services que utilizan el Editor universal. Consulte el documento Uso de Edge Delivery Services para obtener más información sobre cómo elegir el editor adecuado y la migración de los AEM Sites existentes a Edge Delivery Services.
Conceptos principales al desarrollar para Edge Delivery Services core-concepts
Edge Delivery Services se basa en el concepto de bloques. AEM incluye una completa biblioteca de bloques predefinidos, que se puede ampliar para satisfacer las necesidades de cada proyecto. El código de los proyectos de Edge Delivery Services se administra en GitHub.
Bloques blocks
Los bloques son la parte más fundamental de una página que envían los Edge Delivery Services. Un bloque encapsula el estilo y el código que impulsa un componente lógico de una página de contenido.
AEM proporciona bloques estándar como parte del producto dentro del elemento repetitivo del proyecto. Estos bloques incluyen encabezados, texto, imágenes, vínculos, listas, etc.
Edge Delivery Services y GitHub github-edge
Edge Delivery aprovecha GitHub para que pueda administrar e implementar código directamente desde su repositorio de GitHub.
Los autores pueden crear contenido mediante la creación basada en documentos o contenidos en AEM con el editor universal. Los desarrolladores pueden personalizar la funcionalidad del sitio utilizando CSS y JavaScript en GitHub, independientemente de cómo creen el contenido los autores.
Los sitios web se crean automáticamente para cada una de las ramas, desde la previsualización de contenido hasta la producción. Todos los recursos que introduce en el repositorio de GitHub están disponibles en el sitio web sin un proceso de compilación.
Introducción a la creación y Edge Delivery Services WYSIWYG getting-started
Una vez que haya completado los requisitos previos y haya hecho la elección de utilizar el Editor universal, puede empezar con su propio proyecto.
Creación de un proyecto de GitHub create-github-project
En primer lugar, deberá crear un nuevo proyecto en GitHub, basado en la plantilla de Adobe.
-
Vaya a
https://github.com/adobe-rnd/aem-boilerplate-xwalky haga clic en Usar esta plantilla y seleccione Creación de un nuevo repositorio.- Deberá iniciar sesión en GitHub para ver esta opción.
-
De forma predeterminada, se le asignará el repositorio. Cambie esto según sea necesario, proporcione un nombre y una descripción del repositorio y haga clic en Crear repositorio.
-
En una nueva pestaña del mismo explorador, navegue hasta
https://github.com/apps/aem-code-syncy haga clic en Configurar.
-
Haga clic en Configurar para la organización en la que creó el nuevo repositorio en el paso anterior.
-
En la página de GitHub de sincronización de código de AEM, en Acceso al repositorio, seleccione Seleccionar solo repositorios, seleccione el repositorio que creó en el paso anterior y, a continuación, haga clic en Guardar.
-
Una vez instalada la sincronización de código de AEM, recibirá una pantalla de confirmación. Vuelva a la pestaña del explorador del nuevo repositorio.
-
Haga clic en el archivo
fstab.yamlpara abrirlo y, a continuación, el icono Editar este archivo para editarlo.
-
Edite el archivo
fstab.yamlpara actualizar el punto de montaje del proyecto. Reemplace la URL predeterminada de Google Docs por la URL de la instancia de creación de AEM as a Cloud Service y, a continuación, haga clic en Confirmar cambios….https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main- Cambiar el punto de montaje indica a los Edge Delivery Services dónde encontrar el contenido del sitio.
-
Añada un mensaje de compromiso como desee y haga clic en Confirmar cambios, comprometiéndolos directamente con la rama
main.
-
Vuelva a la raíz del repositorio y haga clic en
paths.jsony luego en el icono Editar este archivo.
-
La asignación predeterminada utiliza el nombre del repositorio. Actualice la asignación predeterminada según sea necesario para el proyecto con
/content/<site-name>/:/y haga clic en Confirmar cambios….- Proporcione sus propios
<site-name>. Lo necesitará en un paso posterior. - Las asignaciones indican a los Edge Delivery Services cómo asignar el contenido del repositorio de AEM a la dirección URL del sitio.
- Proporcione sus propios
-
Añada un mensaje de confirmación si lo desea y haga clic en Confirmar cambios, confirmándolos directamente en la rama
main.
Crear y editar un nuevo sitio de AEM create-aem-site
Ahora que tiene un proyecto de GitHub, debe crear un nuevo sitio que el proyecto pueda utilizar.
-
Descargue la última creación WYSIWYG con la plantilla del sitio de Edge Delivery Services desde GitHub en
https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases. -
Inicie sesión en la instancia de creación de AEM as a Cloud Service, vaya a la consola Sitios y pulse o haga clic en Crear -> Sitio a partir de una plantilla.
-
En la pestaña Seleccionar una plantilla del sitio en el asistente para crear sitio, haga clic en el botón lmportar para importar una plantilla nueva.
-
Cargue la plantilla del sitio de creación WYSIWYG con Edge Delivery Services que descargó de GitHub.
- La plantilla solo debe cargarse una vez. Una vez cargada, puede reutilizarse para crear sitios adicionales.
-
Una vez importada la plantilla, aparecerá en el asistente. Haga clic o pulse para seleccionarla y, a continuación, pulse o haga clic en Siguiente.
-
Proporcione los siguientes campos y pulse o haga clic en Crear.
- Título del sitio: añada un título descriptivo para el sitio.
- Título del sitio: utilice el
<site-name>que definió en el paso anterior. - URL de GitHub: utilice la dirección URL del proyecto de GitHub que creó en el paso anterior.
-
AEM confirma la creación del sitio con un cuadro de diálogo. Haga clic o pulse OK para descartar.
-
En la consola de sitios, vaya al archivo
index.htmly pulse o haga clic en Editar en la barra de herramientas.
-
El editor universal se abre en una nueva pestaña. Es posible que tenga que pulsar o hacer clic en Iniciar sesión con Adobe para autenticarse y editar su página.
Ahora puede editar el sitio usando el editor universal. Consulte la documentación del editor universal para obtener más información.
Publicación del nuevo sitio publishing
Una vez que haya terminado de editar el nuevo sitio con el editor universal, puede publicar el contenido.
-
En la consola de sitios, seleccione todas las páginas que creó para el nuevo sitio y pulse o haga clic en Publicación rápida en la barra de herramientas.
-
Pulse o haga clic en Publicar en el cuadro de diálogo de confirmación para iniciar el proceso.
-
Abra una nueva pestaña en el mismo explorador y vaya a la dirección URL del nuevo sitio.
https://main--<repository-name>--<owner>.hlx.page
-
Vea el contenido publicado.
Siguientes pasos next-steps
Ahora que tiene un proyecto de creación WYSIWYG en funcionamiento con Edge Delivery Services, puede empezar a crear y diseñar sus propios bloques.
Consulte la guía Creación de bloques instrumentados para su uso con el editor universal para obtener más información.