Crea tu propio tema en Drupal 8 con Gulp y Sass.

Hoy hablaremos sobre los fundamentos de theming de Drupal 8. También de cómo usar Gulp y Sass. Esto con la finalidad de tener un entendimiento básico de cómo crear un tema nuevo en Drupal 8 y la integración de herramientas para facilitar su desarrollo de front end. Comencemos por el tema personalizado de Drupal 8, los requerimientos mínimos para crearlo y que este funcione. 

Crearemos la estructura básica de archivos para que Drupal lo reconozca y pueda ser habilitado como tema. En Drupal 8 se usan los archivos YAML como archivos de configuración, comenzamos por crear un archivo .info.yml, el nombre y la ubicación de este archivo son muy importantes, debe incluir el nombre de nuestro tema y debe ser guardado dentro de una carpeta que lleve el mismo nombre de nuestro tema. Supongamos que el tema se llama ‘yourtheme’, la carpeta debe llamarse yourtheme y el archivo yml yourtheme.info.yml. La estructura de archivos sería la siguiente:

En nuestro archivo info.yml los pares de llave/valor llamados ‘mappings’, Los cuatro mappings requeridos son: name: yourtheme description: Mi tema personalizado. type: theme core: 8.x Luego de salvar el archivo se procede a habilitar el tema. Se puede realizar a través de la interfaz gráfica de Drupal o con el comando: $ drush config-set system.theme default yourtheme El siguiente paso es agregar las rutas para los archivos y librerías de CSS y Javascript, siguiendo la consistencia de convención de nombres creamos un archivo llamado yourtheme.libraries.yml, en el cual colocaremos las rutas: global-css: css: theme: css/style.css: {} global-js: js: js/script.js: {} dependencies: - core/jquery Podemos darnos cuenta que son dos librerías global-css y global-js, estos nombres tienen sentido para los archivos globales, pero se puede usar el nombre que se desee. Luego tenemos una llave que identifica el tipo de librería que estamos agregando, si estás agregando CSS es necesario incluir la llave ‘theme’ seguido por la ruta del archivo de CSS. 

En este ejemplo solo se agregó un archivo, pero se pueden agregar los archivos que se deseen. Para la librería de Javascript se aplica un proceso diferente, se tiene una llave llamada ‘dependencies’, en este caso se agregó la dependencia de jQuery para demostrar su uso, pero es importante destacar que el core de Drupal no agrega scripts de jQuery o cualquier otro Javascript por defecto en las páginas que no lo requieren. Ahora que tenemos nuestras librerías las podemos agregar a nuestro tema en nuestro archivo info.yml: name: yourtheme description: Mi tema personalizado. type: theme core: 8.x libraries: - yourtheme/global-css - yourtheme/global-js La estructura de los archivos queda de la siguiente forma:

Lo siguiente es declarar regiones y agregar plantillas al tema que acabamos de crear. Las plantillas en Drupal 8 se crean con Twig. Antes de comenzar, es importante recordar que cualquier cambio en las plantillas es necesario refrescar los caches ya sea con drush o por el UI. Comenzamos por definir las regiones en nuestro tema, en nuestro archivo yourtheme.info.yml agregamos: # Define regions regions: header: 'Header' content: 'Main content' footer: 'Footer' Esta son regiones básicas, su nombre y descripción pueden tener el nombre que se desee asignar. El siguiente paso es copiar las plantillas del core a nuestra carpeta de plantillas dentro de nuestro tema. La ruta de las plantillas es core/modules/system/templates, de ahí podemos tomar las plantillas del sistema que necesitemos crear en nuestro tema. Importante: No modificar las plantillas que están en el core, copia el archivo y pegalo en el tema personalizado y haz ahí las ediciones que necesites. Comencemos por usar la plantilla de page.html.twig, agregar una región en la plantilla es tan sencillo como {{ page.region_name }}, reemplazando region_name por el nombre de la región que quieres mostrar. Puedes leer aquí la documentación de cómo nombrar los archivos de plantillas. 

Las regiones puedes usarlas en el UI de Drupal en los Bloques, ahí podrás ver las regiones creadas y asignarles contenido. Ya con nuestro tema creado y listo para recibir estilos y funcionalidades de JS procedemos a instalar las herramientas que nos facilitarán el proceso de tareas de CSS y JS, usaremos Gulp. 

Gulp es un conjunto de herramientas que le ayudarán a automatizar tareas dolorosas o que consumen mucho tiempo en su flujo de trabajo de desarrollo web y te puede ayudar haciendo preprocesamiento de CSS, JS transpiling, minificación, recarga en vivo, y mucho más. Instalación: $ npm install --global gulp Instalación en el proyecto: $ npm install --save-dev gulp $ npm install gulp-sass --save-dev Con Gulp instalamos el paquete para usar el preprocesador de CSS llamado SASS. Los preprocesadores de CSS permiten realizar tareas que van más allá de las limitaciones del lenguaje de CSS, permitiendo usar variables, mixins y demás funcionalidades que harán la escritura del código mucho más fácil permitiéndonos mantener dentro de los estándares de programación DRY (Don’t Repeat Yourself), así como tener un código más flexible y mantenible.

En este caso usaremos SASS, pero hay más preprocesadores en el mercado y depende de tus gustos. Con Gulp se te hará más sencillo realizar las tareas con cualquiera que elijas. Luego de instalar Gulp se procede a crear el archivo gulp.js, el cual va a manejar las tareas que deseamos usar, como manejar el preprocesador, minificar el código de css y js, ver cambios de estilos en tiempo real y demás funcionalidades. Estas tareas puedes tomarlas de la documentación de Gulp. Una vez configuradas las tareas podremos ejecutar gulp con el comando: $ gulp Con estas herramientas podemos enfocarnos en el front end y agilizar nuestras tareas, mientras que Drupal se encarga de manejar el contenido. En conclusión, tenemos una forma sencilla de crear nuestros propios temas para Drupal 8 y usar herramientas que nos ayudarán con las tareas de desarrollo de front end.

Te recomendamos este video