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

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:

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

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:

Agregar hojas de estilo (CSS) y JavaScript (JS) a un tema de Drupal 8

Esta respuesta fue muy inspirada por la respuesta de berliner .

— batigolix
fuente

Los enlaces están rotos

— Yzmir Ramirez

Actualizado los enlaces.

— Neograph734

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

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