Gestion des scripts Javascript

Avec Automne vous pouvez directement gérer les scripts javascript de votre site depuis l'administration (pour des informations sur ce qu'est le javascript consultez les pré-requis).

La gestion des scripts est accessible depuis le panneau latéral de droite, onglet "Modèles" , puis lien "Scripts javascripts".

Scripts javascript - lien

Vous aurez alors la liste de vos fichiers de scripts et répertoires stockés dans le répertoire JS d'Automne (/js).

  • Editer un script : sélectionnez le et cliquez sur « Modifier »
  • Supprimer un script : cliquez sur « Supprimer » après l'avoir sélectionné. Assurez vous bien de ne plus avoir besoin d'un script avant de le supprimer.

En mode modification vous pouvez activer la coloration syntaxique (case à cocher en haut à gauche) ce qui vous permettra d'avoir des repères visuelles lors de l'édition.

Edition de fichier javascript sans coloration syntaxique Scripts javascript - édition avec coloration

Vous pouvez laisser Automne gérer le chargement des scripts de vos modules à votre place.

Pour cela il suffit de créer dans le répertoire modules un répertoire portant le nom de code de votre module, et de mettre dedans les fichiers que vous souhaitez charger.

Par exemple pour le module contact (nom de code "pcontact"). Il suffit de créer un répertoire pcontact contenant les fichiers checkcontact.js, docontact.js et showcontact.js pour que ceux-ci soient chargés dans chaque page faisant appel au module contact.

Les fichiers du répertoire sont chargés par ordre alphabétique, il suffit donc par exemple de les préfixer pour influencer leur ordre de chargement.

Le tag <atm-js-tags>

Dans les modèles de page il est possible de charger vos scripts Javascript via le tag <atm-js-tag> d'Automne. Ce tag permet de gérer automatiquement le chargement des fichiers Javascript souhaités et d'accroître les performances de chargement.

Exemple d'utilisation :

<html>
    <head>
        <atm-js-tags files="/js/jquery-1.3.2.js,/js/common.js" />
    </head>
    <body></body>
</html>

En savoir plus sur le tag <atm-js-tag>.




Haut