
Plantillas en Drupal 8: Añadiendo CSS y JS
Continuando con nuestra Guía de Drupal Theming en español tememos que tener en cuenta que para Drupal 8, las hojas de estilo (CSS) y JavaScript (JS) se cargan igual que el de módulos (código) y temas, para todo: asset libraries.
Drupal utiliza un principio de alto nivel: las herramientas (CSS o JS) sólo se cargan si le dices a Drupal que debe cargarlos.
Drupal no carga todos las herramientas (CSS/JS) en todas las páginas, ya que es malo para el rendimiento del front-end.
Diferencias comparando con Drupal 7
Hay cuatro importantes diferencias en comparación con Drupal 7 en la adaptación de la plantilla:
-
Ya no tenemos un archivo THEME.info, sino un archivo THEME.info.yml, pero contiene los mismos datos.
-
La propiedad de hojas de estilo (para añadir CSS activos) en los archivos THEME.info.yml ya no existe, porque ahora sólo utilizamos las librerías.
-
Ya no existe la propiedad secuencia de comandos (para agregar JS activos) en los archivos THEME.info.yml, porque ahora sólo utilizamos las librerías.
-
Sólo el JavaScript necesario en una determinada página se agregaría a la misma. En concreto, Drupal por defecto no necesita JavaScript en la mayoría de las páginas que los usuarios anónimos pueden ver.
Esto significa que jQuery no se carga automáticamente en todas las páginas.
-
Así, si tu tema necesita jQuery o algún otro JavaScript para estar presentes (que también se define en una librería de activos), necesitas decirle a Drupal que este es el caso, declarando una dependencia en la librería de activos necesaria.
El proceso
Los pasos generales para la carga de las herramientas (CSS/JS) son:
-
Guardar el CSS o JS a un archivo.
-
Definir una "librería", que puede contener tanto los archivos CSS como los JS.
-
"Adjuntar" la librería a todas las páginas de la librería, a determinados plantillas de Twig, o a un elemento de procesamiento en función de preproceso.
Definir una librería
Comentarios (1)
Arlyns
Páginas