Como añadir Javascript o CSS a pagina especifica en un theme Drupal

enero 9, 2025

Supongamos que tenemos una campaña publciitaria para Navidad y queremos tener funcionalidades muy especificas que nos sirven solamente para esa pagina en particular… lo que podemos hacer es uso del hook template_preprocess_page() (documentacion oficial) e incorporar un script para esa pagina solamente.

Entonces, vamos a aprender a hacer 2 cosas:
1. Crear una libreria personalizada con codigo Javascript y/o CSS y agregarla a nuestro theme.
2. Filtrar la pagina en particular y aplicar nuestras librerias personalizadas a nuestra pagina en particular.

Agregar una nueva libreria en el archivo libraries.yml de nuestro theme.

Vamos a crear nuestro archivo Javascript dentro de nuestro theme, en mi caso lo voy a hacer en la siguiente ruta:

/test/web/themes/custom/mytheme/js/code.js

//Custom javascript code
alert("Working code...");

Luego debemos agregar una nueva libreria, la cual llamaremos custom_code en nuestro archivo `libraries.yml“

En mi caso el archivo se encuentra en:

/test/web/themes/custom/mytheme/mytheme.libraries.yml

Y me queda de la siguiente manera:

global-styling:
  version: 1.x
  css:
    theme:
      css/styles.css: {}
      css/global.css: {}
  js:
    js/script.js: {}

custom_code::
  js:
    js/code.js: {}
  dependencies:
    - core/jquery

Agregue jQuery como dependencies ya que mi script va a depende de jQuery para funcionar correctamente, pero podemos no agregarlo, o agregar otras librerias.

¿Que hicimos hasta aca?

Creamos un archivo Javascript, y una libreria que luego vamos a cargar en nuestro theme. La libreria todavia no esta cargada en ninguna pagina. Para cargar nuestra libreria debemos hacer lo siguiente:

Filtramos y agregamos la libreria a nuestra pagina especifica

En nuestro archivo .theme debemos agregar un hook preprocess page que lo usaremos para cargar nuestras librerias antes de que la pagina cargue. El archivo que debemos modificar en mi caso lo tengo en la siguiente ruta:

/test/web/themes/custom/mytheme/mytheme.theme

function mytheme_preprocess_page(&$variables) {

  if (isset($variables['node']) && $variables['node']->id() == 7) {

    $variables['#attached']['library'][] = 'mytheme/custom_code';

  }

}

Debemos saber de antemano el id del nodo de nuestra pagina para poder filtrar. En mi caso la pagina que estoy creando tiene el nodo con id 7.

Como saber el id de nuestro nodo

Ir a una pagina en particular. Cliquear en “Edit”.

Podemos ver el nodo en la url, en mi caso el id es 7.

TODO: agregar ejemplo de GitHub / ejemplo real.

DC