Da Vinci - Drupal 8
En primer lugar vamos a ver cuales son los cambios principales con respecto a Drupal 7 para tener una visión global de las modificaciones que hemos realizado:
-
Los archivos templates cuya extensión era da_vinci.tpl.php se convierten en da_vinci.html.twig.
-
La carpeta donde se localizan los temas ya no es /sites/all/themes, sino que se encuentran en /themes.
-
El archivo da_vinci.info cambia a da_vinci.info.yml
-
El template.php se transforma en da_vinci.theme
-
Para realizar la carga de css y javascript se puede realizar desde el archivo da_vinci.libraries.yml, aunque también las podemos cargar desde el template llamando a la biblioteca específica.
-
Se han producido cambios en el array de Drupal 8 por lo que las variables cambian con respecto a Drupal 7.
-
En los preprocess se incluyen toda la lógica de negocio, dejando los templates únicamente para mostrar la información que se debe mostrar.
En la nueva versión de Drupal se sustituye el motor de plantillas por defecto PHPtemplate utilizado en Drupal 7 por Twig. Sus características principales son:
-
Rapidez: se reduce al máximo la sobrecarga en comparación con código PHP.
-
Seguridad: evalúa el código de plantilla que no es fiable.
-
Flexibilidad: permite al desarrollador definir etiquetas y personalizar los filtros.
Archivo de configuración
En primer lugar hay que definir los metadatos de nuestro tema con los siguiente archivos de configuración:
-
da_vinci.info.yml
En este archivo vamos a configurar el nombre de nuestra plantilla, a que versión del core pertenece, descripción, regiones, configuración, etc.
En este fragmento de código, se puede apreciar la forma en la que cargamos los css y javascript con bibliotecas. En este caso, dentro del archivo da_vinci.libraries.yml tenemos definidas dos bibliotecas llamadas base y javascript, en ellos están incluidos los css y los javascript para todo el tema. Si queremos incluir un css o javascript en una vista específica de la plantilla deberíamos definirlo en el archivo da_vinci.libraries.yml que veremos más adelante y hacer la llamada desde la plantilla.
Con respecto a las regiones hay que tener en cuenta que la primera de ellas será la región por defecto si no existe esa región asignada a un bloque al instalar el tema. Por ejemplo, si en el tema anterior tenia una región llamada “menu”, al instalar nuestro tema todos los bloques que estén en esa región pasa a estar en el “footer” al ser la primera región.
Para más información sobre cómo generar un archivo theme.info.yml.
-
da_vinci.libraries.yml
Aquí se definen todos los css y javascript que se van a utilizar por defecto en el tema o específicamente en una plantilla. Para ello vamos a ver un fragmento de código de las bibliotecas.
Como podemos ver, tenemos definidos dos bibliotecas, una de ellas llamada “base” donde hemos incluido todos los css y la otra “javascript” para los js de nuestro tema.
Podríamos haber fusionado en una sola biblioteca los css y js del tema, pero en nuestro caso lo hemos separado para especificar que la carga de los javascript se hicieran en la <head> de la página. Si no ponemos dicha especificación (header: true) el javascript lo carga al final de la página.
En Drupal 8 no se carga por defecto jquery por lo que hay que especificarlo en nuestra biblioteca si nuestro js tiene dependencia de jquery del core de drupal.
-
da_vinci.breakpoint.yml
Los breakpoints son aquellos puntos de ruptura donde según la resolución de la pantalla se le puede dar distintas propiedades al css.
En nuestro caso definimos cuatro puntos de ruptura ordenados desde menor resolución hasta la máxima resolución como puede ser una televisión.
Preprocesado
-
da_vinci.theme
Todos los preprocesados se han unificado en este único archivo para poderlos tener centralizados. En este archivo contiene toda la lógica de negocio en formato PHP y desde donde se deben modificar las variables de drupal
Plantillas (Templates)
TWIG
Una de las ventajas de utilizar twig es que tiene una mayor separación entre la lógica de negocio y la presentación, por lo que no es necesario que los diseñadores de templates tengan conocimientos de programación en php, únicamente deben conocer las variables a utilizar en la plantilla.
En los archivo twig utilizan dos tipos de delimitadores: {% %} para ejecutar una sentencia como puede ser un for y {{ }} para imprimir el valor de una variable.
Podéis encontrar más información en el siguiente enlace: Documentación Twig
Podéis encontrar el Theme en: Da Vinci Theme
