Plantillas en Drupal 8: Añadiendo CSS y JS

Definir una librería

 

Para definir uno o más (herramientas) librerías, agregar un arvhivo *.libraries.yml a tu carpeta de tema.

 

 

(Si el tema se llama fluffiness, entonces el nombre del archivo debe ser fluffiness.libraries.yml).

 

 

Cada "librería" en el fichero es una entrada detallando los archivos CSS y JS (activos), como este:

 

 

cuddly-slider:
 version: 1.x
 css:
   theme:
     css/cuddly-slider.css: {}
 js:
   js/cuddly-slider.js: {}

 

En este ejemplo se supone que el JavaScript real cuddly-slider.js está en la subcarpeta js de tu tema.

 

 

También puedes tener el JS proveniente de una URL externa, incluir los archivos CSS, y hay otras posibilidades.

 

 

Ver para más detalles CDN / externally hosted libraries.

 

Sin embargo, recuerda que Drupal 8 ya no carga jQuery en todas las páginas por defecto; Drupal 8 carga sólo lo necesario.

 

 

Por lo tanto, debemos declarar que la librería de nuestro tema cuddly-slider declare una dependencia en la librería que contiene jQuery.

 

 

No es ni un módulo ni un tema lo que proporciona jQuery, es el núcleo de Drupal: es core/jquery la dependencia queremos declarar. (Esta es una extensión del nombre seguido por un guión, seguido por el nombre de la librería, de manera que si alguna otra librería deseara depender de nuestra librería cuddly-slider, tendría que declarar una dependencia en fluffiness/cuddly-slider, porque fluffiness es el nombre de nuestro tema).

 

 

Sólo puedes depender de otras bibliotecas activas, no de archivos individuales.

 

 

 

Así, para garantizar que jQuery está disponible para js/cuddly-slider.js, actualizamos los anteriores a:

 

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

 

Por supuesto, una librería bien podría contener sólo activos de CSS, o sólo JS. La mayoría de los temas, probablemente deseen tener un librería de herramienta global-styling, para las hojas de estilo (herramientas CSS) que quiere cargarse globalmente (es decir, en todas las páginas donde el tema está activo - generalmente todo el sitio excepto las páginas de administración):

 

global-styling:
 version: 1.x
 css:
   theme:
     css/layout.css: {}
     css/style.css: {}
    css/colors.css: {}
     css/print.css: { media: print }

 

Por supuesto, como era de esperar, el orden de las herramientas CSS listadas aquí es también el orden en que se cargarán.

 

En Drupal 7, podías especificar la propiedad media (screen, print, all) como una subclave de la propiedad stylesheets, ahora puedes definirla como un valor para una determinada herramienta CSS. Por ejemplo:

 

    css/print.css: { media: print }

 

Por defecto, todos las herramientas JS ahora están cargados en el pie de página.

 

 

Que se carguen en la cabecera es ahora una opción optativa, sólo necesaria para los elementos críticos de la UI que no se mostrarán a menos que se ejecute su correspondiente JS.

 

js-header:
 header: true
 js:
   header.js: {}
 
js-footer:
 js:
   footer.js: {}

 

Tienes que establecer la nueva propiedad de cabecera en las herramientas de librería de activos en true, para indicar que las herramientas JavaScript en esa herramienta de la librería están en la ruta activa, y por lo tanto debe ser cargado desde la cabecera.

 

 

Ten en cuenta que cualquier dependencia, directa o indirecta, de las herramientas de la librería marcadas como que están en la ruta crítica también se cargan automáticamente desde la cabecera, por lo que no necesitas preocuparte por que no estén disponibles las dependencias.

 

 

Anular y extender las librerías

Páginas

Total de votos: 300

Entradas relacionadas

Comentarios (0)

Deja un comentario