// 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.
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>