// BLOG

Kirby CMS - Gérer ses JS

Comme pour les CSS, Kirby propose une fonction "helper" pour gérer nos scripts JavaScript. Elle fonctionne de façon assez similaire à la fonction helper css(). Voyons cela plus en détail.

Rédigé le 19.03.2022
Par Gilles Vauvarin

JavaScript Kirby CMS

Où placer ses scripts JS ?

Vous êtes libre de les placer où vous voulez dans votre architecture de dossiers. Me concernant, je les place dans un dossier /assets/js/ si ces scripts sont destinés à être appelé globalement dans mon projet. Si comme pour les CSS, vous souhaitez appliquer un script JS pour un template donnée, vous devrez déposer votre script JS dans un dossier /assets/js/templates/

La fonction JS()

Pour générer un tag HTML <script> et appeler nos scripts JS, Kirby nous propose d'utiliser la fonction "helper" js() qui accepte deux paramètres : $url et $options Seul le premier paramètre $url est obligatoire.

Paramètre Usage
$url URL absolue ou relative du script JS, tableau d'URLs ou instruction @auto pour charger automatiquement des scripts JS de templates.
$options Attribut ou tableau d'attributs custom.

On utilisera la fonction js() le plus souvent dans un fichier snippet "header" et/ou "footer" /site/snippets/footer.php Elle générera une balise <script> avec l'appel de la ou des scripts JS indiqués en paramètres.

Exemples d'utilisation :

Appeler un script JS global

// /site/snippets/footer.php

<?= js('assets/js/main.js') ?>

Appeler plusieurs scripts JS globeaux

// /site/snippets/footer.php

<?= js([
  'assets/js/lib.js',
  'assets/js/main.js',
]) ?>
Les scripts JS seront appelés dans l'ordre dans lequel ils sont déclarés en paramètres de la fonction js().

Appeler des scripts JS spécifiques à un template

<?= js( '@auto' ) ?>

Grâce au mot clé @auto , il est possible de charger un script JS uniquement lorsque qu'un template particulier est utilisé pour afficher une page. Pour cela, le script JS doit suivre les règles suivantes :

  • Il doit être stocké dans un dossier /assets/js/templates/

  • Il doit être nommé de la même manière que le template auquel il doit s'appliquer

Template Script JS
/site/templates/home.php /assets/js/templates/home.js

Passer un attribut à la balise <script>

// /site/snippets/footer.php

<?= js('assets/js/site.js', true) ?>

Par exemple ici, on demande que le script JS soit chargé de manière asynchrone en indiquant true en second paramètre de la fonction js(). Un attribut async sera ajouté à la balise <script> générée par la fonction js()

// Code généré par la fonction js() dans le rendu de la page

<script src="assets/js/site.js" async></script>

La vidéo YouTube