Plantillas en Drupal 8: Añadiendo CSS y JS

Conectar una librería a la(s) página(s)

 

Dependiendo de qué herramientas necesitas tener cargados, deseas adjuntar la correspondiente biblioteca de herramientas de una forma diferente.

 

 

Después de todo, algunas herramientas de bibliotecas son necesarios en todas las páginas, otras sólo muy raramente, y otras aún en la mayoría, pero no es todo.

 

Las sub-secciones, aquí se muestran ejemplos de cómo hacerlo.

 

Conectar una biblioteca en una plantilla Twig

 

También puedes adjuntar una librería de herramientas a una plantilla Twig usando la función Twig acople_library(). En cualquier *.html.twig, puedes hacer:

 

{{ attach_library('fluffiness/cuddly-slider') }}


<div>Some fluffy markup {{ message }}</div>

 

Adjuntar todas las páginas

 

Para adjuntar una biblioteca a todas las páginas del sitio que use tu tema, declararla en tu archivo de tema *.info.yml , bajo las librerías clave:

 

name: Example
type: theme
core: 8.x
libraries:
 - fluffiness/cuddly-slider

 

Puedes enumerar tantas librerías como desees, todos ellas serán cargados en cada página.

 

A continuación, borra la caché, de forma que la nueva información se cargan en Drupal.

 

 

Conectar una librería a un subconjunto de páginas

 

En algunos casos, no necesitas que tu librería esté activo en todas las páginas, sino sólo un subconjunto de páginas.

 

 

Por ejemplo, podrías necesitar que tu biblioteca sólo estuviera activa cuando se muestra un determinado bloque, o cuando se muestra en pantalla un determinado tipo de nodo.

 

Un tema puede hacer que esto suceda mediante la implementación de una función THEME_preprocess_HOOK() en el archivo.theme , sustituyendo "THEME" con el nombre de máquina de tu tema y "HOOK" por el nombre de la máquina del enlace del tema.

 

Por ejemplo, si deseas adjuntar JavaScript a la página de mantenimiento, la parte "HOOK" es "maintenance_page", y tu función tendría este aspecto:

 

 

function fluffiness_preprocess_maintenance_page(&$variables) {
 $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}

 

 

Puedes hacer algo similar con otros enlaces de temas, y por supuesto tu función puede tener lógica -por ejemplo, para detectar qué bloque se preprocesa en el enlace "block", que tipo de nodo para el enlace "nodo", etc.

 

¡Nota importante! ¡En este caso, necesitarás especificar el almacenamiento en caché de metadatos que corresponde a tu condición!.

 

 

El ejemplo anterior funciona incondicionalmente, por lo que no es necesario el almacenamiento en caché de metadatos.

 

 

El ceso de uso más común es seguramente cuando adjuntas algunas librerías activas basadas en la ruta actual:

 

function fluffiness_preprocess_page(&$variables) {
 $variables['#cache']['contexts'][] = 'route';
 if (\Drupal::routeMatch()->getRouteName() === 'entity.node.preview') {
   $variables['#attached']['library'][] = 'fluffiness/node-preview';
 }
}

 

 

Adjuntando JavaScript configurable

 

En algunos casos, es posible que desees añadir JavaScript a una página que depende de algunas informaciones PHP.

 

En este caso, crea un archivo JavaScript, define y fija una librería igual que antes, pero también adjunta la configuración de JavaScript y haz que el archivo JavaScript lea esos ajustes, a través drupalSettings (sucesor de Drupal.settings de Drupal 7).

 

 

No obstante, tener disponible drupalSettings para nuestro archivo JavaScript, tenemos que hacer el mismo trabajo que teníamos que hacer para tener listo jQuery: tenemos que declarar una dependencia en él.

 

Así que luego se convierte en:

 

cuddly-slider:
 version: 1.x
 js:
   js/cuddly-slider.js: {}
 dependencies:
   - core/jquery
   - core/drupalSettings

y

 

function fluffiness_page_attachments_alter(&$page) {
 $page['#attached']['library'][] = 'fluffiness/cuddly-slider';
 $page['#attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'bar';
}

 

Donde 'bar' es un valor calculado. (Ten en cuenta que el almacenamiento en caché de metadatos aquí también es necesario!).

 

A continuación, cuddly-slider.js podrán acceder a drupalSettings.fluffiness.cuddlySlider.foo (y === 'bar').

 

 

Agregar atributos a los elementos script

Páginas

Total de votos: 243

Entradas relacionadas

Comentarios (0)

Deja un comentario