lunes, 18 de abril de 2016

Trabajar con librerías, regiones y bloques en Drupal 8

En este capítulo vamos a comenzar a trabajar con Regiones y Bloques para definir la estructura del sitio. Luego incluiremos en el theme los archivos css y javascript para poder dar estilos e interactividad al tema.

Índice:
  1. Crear un tema para Drupal 8 desde cero
  2. Trabajar con librerías, regiones y bloques en Drupal 8
  3. Introducción a los templates en Drupal 8
  4. Corregimos dos errores del Tema
  5. El módulo Kint para Drupal 8 es Genial

Bloques y Regiones en Drupal 8


Los temas en Drupal 8 se dividen en Regiones y a su vez estas regiones contendrán diferentes bloques. Esto posibilita que los temas estén bien ordenados y sea muy fácil trabajar en ellos.


Para ver las regiones y bloques que tenemos dentro de un tema, podemos dirigirnos a Estructura >> Diseño de bloques. Aquí encontraremos todas las regiones con sus respectivos bloques.

Para ver las regiones directamente dentro del tema podemos hacer click en Mostrar regiones de Bloque. Como nuestro tema hereda de classy entonces también se heredan las regiones y los bloques de dicho tema. También nos daremos cuenta que las regiones aparecen una debajo de la otra ya que todavía no agregamos estilos. 

Definir las regiones del tema


Para definir las regiones del tema, abre el archivo poxi.info.yml que hemos creado en el capítulo anterior. Recuerdo que poxi es el nombre del tema que estoy creando y tu deberías cambiarlo con el nombre del tuyo. 

En este archivo añadimos las siguientes líneas:

regions:
  header: "Header"
  social: "Social Buttons"
  primary_menu: "Nav Menu"
  breadcrumb: "Breadcrumb"
  content: "Content"
  sidebar_first: "Sidebar"
  footer: "Footer"

Aquí definimos algunas regiones en nuestro tema, tu puedes añadir todas las regiones que necesites. 

Importante: Si declaras una región en el tema, aunque sólo sea una, todas las regiones predeterminadas ya no se aplicarán y tienes que declarar todas las regiones explícitamente.

Bien, vamos a borrar la cache para poder ver los cambios y luego nos dirigimos nuevamente a Estructura >> Diseño de Bloques para comprobar que las regiones fueron creadas con éxito.

De esta manera tan simple podemos agregar regiones y bloques al tema.

Agregar archivos CSS y JavaScript al tema


Dentro del directorio de nuestro tema creamos dos carpetas, un con el nombre css y otra llamada js, donde ubicaremos nuestros archivos .css y .js respectivamente.

Dentro de la carpeta css creamos un archivo con el nombre style.css y dentro de la carpeta js creamos un archivo llamado main.js.

Contenido del archivo style.css:
body{
  background: silver;
}

Contenido del archivo main.js:
alert("Cargando javascript en Drupal 8");

También dentro de la raíz del tema creamos un archivo llamado poxi.libraries.yml donde definiremos las librerías que serán utilizadas por nuestro tema.

Pega las siguientes líneas en él:
base:
  version: 1.x
  css:
    theme:
      css/style.css: { weight: -9 }
  js:
    js/main.js: { weight: -900, minified: true }
    dependencies:
      - core/jquery

Como puedes observar indicamos que se carguen los archivos css y js que creamos anteriormente. También indicamos un peso para modificar el orden en que serán cargados. En el caso del archivo javascript, indicamos que lo comprima y que va a tener como dependencia a jquery que se encuentra disponible dentro del core de Drupal 8.

Ahora que ya tenemos las librerías definidas, necesitamos vincularlas a nuestro tema que como ya sabes está definido por el archivo poxi.info.yml

Al final de dicho archivo y agregamos las siguientes líneas:
libraries:
  - poxi/base

Ahora si vaciamos la cache y recargamos el home del sitio, podremos ver que tenemos un color de fondo gris y muestra una alerta con el mensaje “Cargando javascript en Drupal 8”.



Bueno es suficiente por este capítulo, en el siguiente vamos a comenzar con los templates twig donde definiremos la parte visual del tema, que por cierto bastante feo está por ahora =D.

Y sabes cualquier duda puedes hacérmela saber en los comentarios y con gusto te doy una mano. ¡Saludos!