En Drupal 9 disponemos de varias formas de incluir una determinada librería, ya sea CSS, JavaScript o ambas, dentro del un tema, un componente o una página, si bien en esta entrada de nuestro blog nos vamos a centrar el cómo anclar una librería dentro de una plantilla TWIG.
Para poder incluir una determinada librería CSS, JS, o ambas dentro de la página que estemos renderizando en un momento determinado en nuestro Drupal 9, disponemos de dos formas. La primera de ella es incluyendo dicha librería a través del hook_theme del archivo .module que define las plantillas que se van a utilizar en un determinado módulo, o bien a través de la propia plantilla TWIG. Es este último caso el que vamos a ver a continuación y como veremos, extremadamente sencillo.
Antes de empezar, conviene intentar saber cuándo y por qué queremos o debemos atar/anclar/insertar una librería dentro de una página de nuestro sitio. En el caso que vamos a desarrollar a continuación, insertaremos un contador inverso (una cuenta atrás) en el la front de nuestro sitio, ya que de momento, por ejemplo, hemos desarrollado sólo esta página y queremos hacer saber a nuestros visitantes cuándo estará disponible la versión definitiva y completa de nuestro sitio. En esta caso, la librería JavaScript que vamos a insertar sólo será utilizada en la página de inicio, con lo que no es eficiente ni conveniente cargarla a todo el sitio. En este caso debemos llamarla sólo cuando carguemos la plantilla de la página de inicio.
El primer paso que debemos hacer es guardar los archivos de la librería en la carpeta libraries/ de nuestra instalación de Drupal 9. A continuación debemos declarar dicha librería a través del theme o del módulo personalizado correspondiente en el archivo (por ejemplo, si lo declaramos en el tema) my_theme.libraries.yml.
countdown:
version: VERSION
js:
/libraries/jquery-countdown/jquery.countdown.min.js: {}
js/config_countdown.js: {}
Una vez guardados los archivos de la librería y declarados en el tema o módulo correspondiente para que puedan ser mapeados por Drupal, sólo queda indicar dónde debemos cargar dicha librería para ser utilizada. Como ya hemos mencionado anteriormente, en el caso del ejemplo que nosotros vamos a mostrar, deseamos que en nuestra página de inicio aparezca una cuenta atrás para indicar el el tiempo que falta para lanzar el proyecto que estamos desarrollando, con lo que dicha librería deberá cargarse en la plantilla que gestiona la front page, que en Drupal 9 suele ser page--front.html.twig.
{{ attach_library('my_theme/countdown') }}
<div id="page-wrapper">
<div id="page">
<header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
{% block head %}
{#{% if page.secondary_menu or page.top_header or page.top_header_form %}#}
<nav{{ navbar_top_attributes }}>
{% if container_navbar %}
<div cla
...
En la parte superior de la plantilla hemos añadido la orden attach_library, que lleva como parámetro la ubicación de la librería que queremos insertar en el formato "tema/nombre_de_la_librería". El nombre de la librería es el que hemos definido en el archivo libraries.yml del módulo o tema correspondiente.
Una vez hemos realizados estos pasos, y tras vaciar las cachés de nuestro sitio, al recargar la página ya podremos ver nuestro sitio funcionando con las librerías correspondientes y sus funcionalidades.
EN GUIBIB somos especialistas en desarrollar sitios web y aplicaciones con DRUPAL, no dudes en ponerte en contacto con nosotros y te asesoraremos de una manera totalmente personalizada.
Añadir nuevo comentario