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>

8 javascript

— Manu Adam
fonte

Risposte:

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

— rpayanm
fonte

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 .

— batigolix
fonte

I collegamenti sono interrotti

— Yzmir Ramirez,

Aggiornato i collegamenti.

— Neograph734,

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.

— berlinese
fonte

Dopo aver scritto questo hook_library_info () è stato sostituito con un file * .libraries.yml. Vedi drupal.stackexchange.com/a/109029/12010 e drupal.org/node/2216195

— batigolix

non penso che sia davvero obsoleto. ha bisogno di qualche modifica, tutto qui. ci provo

— batigolix,

Ho aggiornato la risposta

— batigolix il

@batigolix, bella modifica. Tuttavia, è probabilmente meglio che si registra la risposta aggiornato, se la vostra risposta, invece di cambiare il codice di Berliner (codice di modifica tendono ad essere respinta come troppo invadente).

— Free Radical,

OK, ho aggiunto la versione aggiornata come nuova risposta. hai ragione: ho dovuto cambiare più di quanto pensassi fosse inizialmente necessario.

— Batigolix,