Personalización del tema del sitio customize-the-site-theme
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 story-so-far
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 objective
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 responsible-role
Esta parte del recorrido se aplica al desarrollador front-end.
Explicación de la estructura del tema understand-theme
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 CSSsrc/site: archivos JS y CSS que se aplican a todo el sitiosrc/components: archivos JS y CSS específicos de componentes de AEMsrc/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 starting-proxy
-
Desde la línea de comandos, vaya a la raíz del tema en el equipo local.
-
Ejecutar
npm instally npm recupera dependencias e instala el proyecto.
-
Ejecute
npm run livey se inicia el servidor proxy.
-
Cuando se inicia el servidor proxy, se abre automáticamente un explorador a
http://localhost:7001/. Selecciona INICIAR SESIÓN LOCALMENTE (SOLO TAREAS DE ADMINISTRACIÓN) e inicia sesión con las credenciales del usuario proxy proporcionadas por el administrador de AEM.
note tip TIP Si no dispone de estas credenciales, hable con el administrador haciendo referencia a la sección Configurar usuario proxy del artículo Crear sitio a partir de una plantilla en este recorrido. -
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
- Por ejemplo, si la ruta proporcionada era
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 customize-theme
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.
-
En el editor, abra el archivo
<your-theme-sources>/src/site/_variables.scss
-
Edite la variable
$color-backgroundy configúrela con un valor distinto de blanco. En este ejemplo, se utilizaorange.
-
Cuando guarde el archivo, verá que el servidor proxy reconoce el cambio a través de la línea
[Browsersync] File event [change].
-
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 committing-changes
Una vez completadas las personalizaciones, puede enviarlas al repositorio de Git de AEM. Primero debe clonar el repositorio en el equipo local.
-
Desde la línea de comandos, vaya a donde desee clonar el repositorio.
-
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.
-
Mueva el proyecto de tema que estaba editando al repositorio clonado con un comando similar a
mv <site-theme-sources> <cloned-repo> -
En el directorio del repositorio clonado, confirme los archivos de tema que acaba de mover con los siguientes comandos.
code language-text git add . git commit -m "Adding theme sources" git push -
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 what-is-next
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 additional-resources
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.