Personalización del tema del sitio

Descubra cómo se crea el tema del sitio, cómo personalizarlo y cómo probarlo con contenido de AEM en directo.

La historia hasta ahora

En el documento anterior del Recorrido de creación rápida de sitios de AEM, Recuperación de información de acceso al repositorio de Git, ha aprendido cómo los desarrolladores front-end usan Cloud Manager para acceder a la información del repositorio de Git, y ahora debería hacer lo siguiente:

• Comprender a alto nivel qué es Cloud Manager.
• Haber recuperado sus credenciales para acceder al Git de AEM y confirmar sus personalizaciones.

Esta parte del recorrido da el siguiente paso y explora el tema del sitio. Le muestra cómo personalizarlo y, a continuación, confirmar esas personalizaciones utilizando las credenciales de acceso que ha recuperado.

Objetivo

Este documento explica cómo se crea el tema del sitio de AEM, cómo personalizarlo y cómo probarlo con contenido de AEM en directo. Después de leer, debería haber logrado lo siguiente:

• Comprender la estructura básica del tema del sitio y cómo editarlo.
• Consulte cómo probar las personalizaciones de temas mediante contenido AEM real a través de un proxy local.
• Obtenga información sobre cómo confirmar los cambios en el repositorio de Git de AEM.

Función responsable

Esta parte del recorrido se aplica al desarrollador front-end.

Explicación de la estructura del tema

Extraiga el tema proporcionado por el administrador de AEM donde desee editar el tema y ábralo en su editor preferido.

Verá que el tema es un proyecto front-end típico. Las partes más importantes de la estructura son estas:

• src/main.ts: el punto de entrada principal del tema de JS y CSS
• src/site: archivos JS y CSS que se aplican a todo el sitio
• src/components: archivos JS y CSS específicos de componentes de AEM
• src/resources: archivos estáticos como iconos, logotipos y fuentes

Una vez que esté cómodo con la estructura del proyecto de tema, inicie el proxy local para poder ver cualquier personalización de tema en tiempo real basada en el contenido de AEM real.

Inicio del proxy local

1. Desde la línea de comandos, vaya a la raíz del tema en el equipo local.

2. Ejecutar npm install y npm recupera dependencias e instala el proyecto.

   

3. Ejecute npm run live y se inicia el servidor proxy.

   

4. Cuando se inicia el servidor proxy, se abre automáticamente un explorador a http://localhost:7001/. Pulse o haga clic en INICIAR SESIÓN LOCALMENTE (SOLO TAREAS DE ADMINISTRACIÓN) e inicie sesión con las credenciales del usuario proxy proporcionadas por el administrador de AEM.

   

5. Una vez que haya iniciado sesión, cambie la dirección URL en el explorador para que apunte a la ruta del contenido de ejemplo que le proporcionó el administrador de AEM.

   • Por ejemplo, si la ruta proporcionada era /content/<your-site>/en/home.html?wcmmode=disabled
   • Cambiaría la dirección URL a http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled

   

Puede navegar por el sitio para explorar el contenido. El sitio se extrae de la instancia de AEM en directo para que pueda personalizar temas con contenido real.

Personalización del tema

Ahora puede empezar a personalizar el tema. El siguiente es un ejemplo sencillo que ilustra cómo puede ver los cambios en directo a través del proxy.

1. En el editor, abra el archivo <your-theme-sources>/src/site/_variables.scss

   

2. Edite la variable $color-background y configúrela con un valor distinto de blanco. En este ejemplo, se utiliza orange.

   

3. Cuando guarde el archivo, verá que el servidor proxy reconoce el cambio a través de la línea [Browsersync] File event [change].

   

4. Al volver al explorador del servidor proxy, el cambio es visible de inmediato.

   

Puede seguir personalizando el tema en función de los requisitos que le proporcione el administrador de AEM.

Envío de los cambios

Una vez completadas las personalizaciones, puede enviarlas al repositorio de Git de AEM. Primero debe clonar el repositorio en el equipo local.

1. Desde la línea de comandos, vaya a donde desee clonar el repositorio.

2. Ejecute el comando que ha recuperado anteriormente de Cloud Manager. Debe ser similar a git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/. Utilice el nombre de usuario y la contraseña de Git que recuperó en la parte anterior de este recorrido.

   

3. Mueva el proyecto de tema que estaba editando al repositorio clonado con un comando similar a mv <site-theme-sources> <cloned-repo>

4. En el directorio del repositorio clonado, confirme los archivos de tema que acaba de mover con los siguientes comandos.

   git add .
   git commit -m "Adding theme sources"
   git push
   

5. Las personalizaciones se insertan en el repositorio de Git de AEM.

   

Sus personalizaciones ahora se almacenan de forma segura en el repositorio de Git de AEM.

Siguientes pasos

Ahora que ha completado esta parte del Recorrido de creación rápida de sitios de AEM, debe hacer lo siguiente:

• Comprender la estructura básica del tema del sitio y cómo editarlo.
• Consulte cómo probar las personalizaciones de temas mediante contenido AEM real a través de un proxy local.
• Obtenga información sobre cómo confirmar los cambios en el repositorio de Git de AEM.

Aproveche este conocimiento y continúe con el recorrido de Creación rápida de sitios de AEM revisando el documento Implementar un tema personalizado, donde aprenderá a implementar el tema utilizando la canalización front-end.

Recursos adicionales

Aunque se recomienda pasar a la siguiente parte del recorrido de creación rápida de sitios al revisar el documento Implementar un tema personalizado, los siguientes son algunos recursos opcionales que profundizan ciertos conceptos mencionados en este documento, pero que no son necesarios para continuar el recorrido.

• Tema del sitio de AEM: este es el repositorio de GitHub del tema del sitio de AEM.
• npm: los temas de AEM utilizados para construir sitios rápidamente se basan en npm.
• webpack: los temas de AEM utilizados para construir sitios rápidamente dependen del webpack.

Recursos de Business.Adobe.com