web-dev-qa-db-fra.com

Comment ajouter CSS et JavaScript à <head>?

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 twig du 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>
8javascript
8
Manu Adam

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

7
rpayanm

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 réponse de berlinois .

6
batigolix

Dans Drupal 8 ressources client comme les fichiers CSS et JavaScript sont attachées à tableaux de rend :

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

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

Alternativement, vous pouvez 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.

1
berliner