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:

 

 

  1. Ya no tenemos un archivo THEME.info, sino un archivo THEME.info.yml, pero contiene los mismos datos.

     

  2. 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.

     

  3. 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.

     

  4. 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.


     

  5. 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:

 

  1. Guardar el CSS o JS a un archivo.

     

  2. Definir una "librería", que puede contener tanto los archivos CSS como los JS.

     

  3. "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
 

Páginas

Total de votos: 534

Entradas relacionadas

Comentarios (1)

  • Imagen de Arlyns

    Arlyns

    Buenas tardes. Ojalá aun pueda leer esto. Estoy tratando de agregar una hoja de estilo adicional a mi sitio que solo actúe sobre 4 paginas. Tengo una semana leyendo e investigando pero no logro conseguirlo, este año, gracias a la pandemia, tuve tiempo de migrar de Drupal 7 a Drupal 8 y aunque termine de subir mi pagina tengo un par de cositas pendientes y no logro captar como hacerlo. Tengo en mi tema una hoja de estilo (agrego que mi tema es un subtema de Bootstrap y que esta trabajando bien), en la siguiente direccion mi_tema\css\style.css y en esa misma carpeta tengo el que deseo agregar style2.css. El primero lo hice al configurar mi_tema.libraries.yml de la siguiente forma: framework: css: theme: css/style.css: {} Si agrego después de la ultima line lo siguiente ccs/style2.css:{} puedo agregar el otro, pero no es lo que quiero ya que necesito que solo afecte a 4 paginas de mi sitio. Utilice el código del que usted habla (TEMA_preprocess_HOOK): function fluffiness_preprocess_maintenance_page(&$variables) { $variables['#attached']['library'][] = 'fluffiness/cuddly-slider'; } de la siguiente forma: function mi_tema_preprocess_corporativo(array &$variables) { $variables['#attached']['library'][] = 'mi_tema/style2.css'; } DONDE THEMA=mi_tema Y HOOK=corporativo (no estoy seguro de esto, este es el nombre de una de las paginas donde quiero que aparezca, cuando escribo en el navegador misito/corporativo logro ir a ella) pero no me funciona, no lo agrega y me doy cuenta al inspeccionar las paginas. También revise lo de especificar los metadatos del cache (aunque aun no lo tengo muy claro) y nada que funciona ¿Que me esta faltando o que estoy haciendo mal? Si logro resolver esto también resolveré la otra cosa pendiente que es la de agregar un .js personalizado para esas mismas paginas. Mucho le sabría agradecerle sus indicaciones al respecto.

  • Páginas

Deja un comentario