Wie füge ich <head> CSS und JavaScript hinzu?

8

Ich möchte den folgenden Code in meinem Abschnitt der Startseite mit einem Drupal 8-Unterthema von Bartik hinzufügen.

Kann jemand helfen, wie es geht? Was ist der beste Weg, um dies in dieser neuen Zweigversion des Themas zu tun? Wo ist 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
quelle

Antworten:

7

Auf dir 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

Auf dich THEME.info.yml:

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

und Cache löschen

Wo ist page.tpl?

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

Wenn Sie es verwenden möchten, kopieren Sie es wie folgt in den Themenordner in Vorlagen:

 THEME
   templates
     page.html.twig

Ändern Sie alles, was Sie wollen, und löschen Sie den Cache

rpayanm
quelle
6

In Drupal 8 werden Stylesheets und JavaScript-Dateien als Bibliotheken angehängt :

Sie fügen Ihrem Themenordner (oder benutzerdefinierten Modul) eine Datei yourtheme.libraries.info hinzu:

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

Fügen Sie dann die Bibliothek einem Render-Array hinzu. Dies hängt beispielsweise die Bibliothek an alle Seiten an:

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

Dieser Ansatz hat den Vorteil, dass er wiederverwendbar ist. Sie definieren die erforderlichen Pfade einmal und können sie an verschiedenen Stellen in Ihrem Code wiederverwenden.

Sehen:

Diese Antwort wurde sehr stark von Berliners Antwort inspiriert .

Batigolix
quelle
Links sind kaputt
Yzmir Ramirez
Die Links wurden aktualisiert.
Neograph734
1

In Drupal 8 werden Client-Ressourcen wie CSS- und JavaScript-Dateien zum Rendern von Arrays angehängt :

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

Wo $elementkann ein Ausgabe-Render-Array oder ein Formularelement sein.

Alternativ können Sie eine Bibliothek registrieren, indem Sie sie in einer * .libraries.info-Datei definieren

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

und hängen Sie die Bibliothek dann an ein Render-Array wie folgt an:

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

Der letztere Ansatz hat den Vorteil, dass er wiederverwendbar ist. Sie definieren die erforderlichen Pfade einmal und können sie an verschiedenen Stellen in Ihrem Code wiederverwenden.

Berliner
quelle
1
Nachdem Sie diese geschrieben haben, wurde hook_library_info () durch eine * .libraries.yml-Datei ersetzt. Siehe drupal.stackexchange.com/a/109029/12010 und drupal.org/node/2216195
Batigolix
Ich glaube nicht, dass es wirklich veraltet ist. es braucht etwas Bearbeitung, das ist alles.
Ich werde
Ich habe die Antwort aktualisiert
Batigolix
@ Batigolix, schöne Bearbeitung. Es ist jedoch wahrscheinlich besser, dass Sie die aktualisierte Antwort als Ihre Antwort veröffentlichen, anstatt den Berliner-Code zu ändern (Code-Bearbeitung wird normalerweise als zu aufdringlich abgelehnt).
Free Radical
OK, ich habe die aktualisierte Version als neue Antwort hinzugefügt. Sie haben Recht: Ich musste mehr ändern, als ich anfangs für notwendig hielt.
Batigolix