Come faccio ad aggiungere CSS e JavaScript a <head>?

Voglio aggiungere il seguente codice nella mia sezione della prima pagina usando un sotto-tema Drupal 8 di Bartik.

Qualcuno può aiutare come farlo? Qual è il modo migliore per farlo in questa nuova versione ramoscello del tema? Dov'è 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>

Su di te 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

Su di te THEME.info.yml:

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

e Cancella cache

Dov'è page.tpl?

Qui: core / modules / system / templates / page.html.twig

Se vuoi usarlo, copia nella cartella del tema all'interno dei modelli, in questo modo:

 THEME
   templates
     page.html.twig

Cambia tutto quello che vuoi e Cancella cache

In Drupal 8, fogli di stile e file JavaScript sono allegati come librerie :

Aggiungi un file yourtheme.libraries.info alla cartella del tuo tema (o modulo personalizzato):

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

E quindi collegare la libreria a un array di rendering. Ad esempio, questo allega la libreria a tutte le pagine:

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

Questo approccio ha il vantaggio di essere riutilizzabile. Definisci i percorsi necessari una volta e puoi riutilizzarli in diversi punti del codice.

Vedere:

• Aggiunta di fogli di stile (CSS) e JavaScript (JS) a un tema Drupal 8

Questa risposta è stata molto ispirata dalla risposta di Berlino .

In Drupal 8 risorse client come file CSS e JavaScript sono allegate per il rendering di array :

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

Dove $elementpuò essere un array di rendering di output o un elemento modulo.

In alternativa, è possibile registrare una libreria definendola in un file * .libraries.info

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

e quindi collegare la libreria a un array di rendering come questo:

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

Quest'ultimo approccio ha il vantaggio di essere riutilizzabile. Definisci i percorsi necessari una volta e puoi riutilizzarli in diversi punti del codice.