¿Cómo agrego CSS y JavaScript a <head>?

8

Quiero agregar el siguiente código en mi sección de la página principal usando un subtema Drupal 8 de Bartik.

¿Alguien puede ayudar a hacerlo? ¿Cuál es la mejor manera de hacerlo en esta nueva versión del tema? ¿Dónde está page.tpl?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stepcarousel.js"></script>
8 javascript Manu Adam
fuente

Respuestas:

7

En ti THEME.libraries.yml:

global-styling:
  version: VERSION
  header: true // <--- To the header!!!
  css:
    theme:
      css/mystyle.css: {} // if you want add custom css
  js:
    js/stepcarousel.js: {}
  dependencies:
    - core/drupal // for use drupal.js
    - core/jquery

En ti THEME.info.yml:

name: THEME
base theme: Bartik
...
libraries:
  - THEME/global-styling
...

y borrar caché

¿Dónde está page.tpl?

Aquí: core / modules / system / templates / page.html.twig

Si desea usarlo, copie a la carpeta del tema dentro de las plantillas, así:

 THEME
   templates
     page.html.twig

Cambia todo lo que quieras y borra la caché

rpayanm
fuente
6

En Drupal 8, las hojas de estilo y los archivos JavaScript se adjuntan como bibliotecas :

Agrega un yourtheme.libraries.info a la carpeta de su tema (o módulo personalizado):

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

Y luego adjunte la biblioteca a una matriz de renderizado. Por ejemplo, esto adjunta la biblioteca a todas las páginas:

function yourtheme_page_attachments_alter(&$page) {
  $page['#attached']['library'][] = 'yourtheme/power-slider';
}

Este enfoque tiene la ventaja de ser reutilizable. Define las rutas necesarias una vez y puede reutilizarlas en diferentes lugares de su código.

Ver:

Esta respuesta fue muy inspirada por la respuesta de berliner .

batigolix
fuente
Los enlaces están rotos
Yzmir Ramirez
Actualizado los enlaces.
Neograph734
1

En Drupal 8, los recursos del cliente, como los archivos CSS y JavaScript, se adjuntan a las matrices de representación :

$element['#attached'] = array('js' => array(PATH_TO_JS));

Donde $elementpuede haber una matriz de renderizado de salida o un elemento de formulario.

Alternativamente, puede registrar una biblioteca definiéndola en un archivo * .libraries.info

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

y luego adjunte la biblioteca a una matriz de representación como esta:

$element['#attached']['library'][] = 'NAMEOFTHEMODULE/power-slider';

El último enfoque tiene la ventaja de ser reutilizable. Define las rutas necesarias una vez y puede reutilizarlas en diferentes lugares de su código.

berlinés
fuente
1
Después de escribir este hook_library_info () fue reemplazado por un archivo * .libraries.yml. Ver drupal.stackexchange.com/a/109029/12010 y drupal.org/node/2216195
batigolix
No creo que esté realmente desactualizado. necesita algo de edición, eso es todo.
voy a
Actualicé
@batigolix, buena edición. Sin embargo, probablemente sea mejor que publique la respuesta actualizada como su respuesta, en lugar de cambiar el código de berliner (la edición del código tiende a ser rechazada por ser demasiado intrusiva).
Radical libre el
OK, agregué la versión actualizada como una nueva respuesta. tienes razón: tuve que cambiar más de lo que pensé que era necesario inicialmente.
batigolix