Comment ajouter CSS et JavaScript à <head>?

8

Je veux ajouter le code suivant dans ma section de la page d'accueil en utilisant un sous-thème Drupal 8 de Bartik.

Quelqu'un peut-il m'aider à le faire? Quelle est la meilleure façon de le faire dans cette nouvelle version de brindille de thème? Où 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
la source

Réponses:

7

Sur vous 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

Sur vous THEME.info.yml:

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

et vider le cache

Où est page.tpl?

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

Si vous souhaitez l'utiliser, copiez-le dans le dossier du thème à l'intérieur des modèles, comme ceci:

 THEME
   templates
     page.html.twig

Changez tout ce que vous voulez et vider le cache

rpayanm
la source
6

Dans Drupal 8, les feuilles de style et les fichiers JavaScript sont joints en tant que bibliothèques :

Vous ajoutez un yourtheme.libraries.info à votre dossier de thème (ou module personnalisé):

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

Et puis attachez la bibliothèque à un tableau de rendu. Par exemple, cela attache la bibliothèque à toutes les pages:

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

Cette approche a l'avantage d'être réutilisable. Vous définissez une fois les chemins nécessaires et vous pouvez les réutiliser à différents endroits de votre code.

Voir:

Cette réponse a été très inspirée par la réponse de berliner .

batigolix
la source
Les liens sont rompus
Yzmir Ramirez
Mise à jour des liens.
Neograph734
1

Dans Drupal 8, les ressources client telles que les fichiers CSS et JavaScript sont attachées aux tableaux de rendu :

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

Où $elementpeut être un tableau de rendu en sortie ou un élément de formulaire.

Vous pouvez également enregistrer une bibliothèque en la définissant dans un fichier * .libraries.info

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

puis attachez la bibliothèque à un tableau de rendu comme ceci:

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

Cette dernière approche a l'avantage d'être réutilisable. Vous définissez une fois les chemins nécessaires et vous pouvez les réutiliser à différents endroits de votre code.

Berlinois
la source
1
Après avoir écrit, hook_library_info () a été remplacé par un fichier * .libraries.yml. Voir drupal.stackexchange.com/a/109029/12010 et drupal.org/node/2216195
batigolix
Je ne pense pas que ce soit vraiment dépassé. il a besoin de quelques retouches, c'est tout. je
vais
J'ai mis à jour la réponse
batigolix
@batigolix, belle édition. Cependant, il probablement mieux que vous publiez la réponse mis à jour votre réponse, au lieu de changer le code de berliner (edit de code ont tendance à être rejeté comme trop intrusive).
Radical gratuit du
OK, j'ai ajouté la version mise à jour comme nouvelle réponse. vous avez raison: j'ai dû changer plus que ce que je pensais nécessaire au départ.
batigolix