https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Optimiser les fichiers CSS et JS dans purity III

Ceci est une nouvelle fonctionnalité dans T3 Framework (version 2.1.0), si vous exécutez n'importe quel modèle développé avec le framework T3 et que vous souhaitez utiliser cette fonctionnalité, vous devez mettre à niveau vers la version 2.1.x

Comment fonctionne l'optimisation.

La fonction d'optimisation sert à améliorer les performances de votre site. La fonction est appliquée aux CSS et JS. Lorsque l'option est activée, elle va regrouper et compresser les fichiers CSS et JS. Lorsque l'utilisateur affiche une page, au lieu de charger tous les fichiers CSS et JS, il va seulement charger le CSS et le fichier JS optimisé.

Lorsque vous activez l'optimisation, cela va:

  • Diminuer la taille totale du fichier à charger dans une seule page

  • Diminuer le nombre de requètes lors de l'affichage d'une page

Optimisation de la CSS

optimisation 1

optimisation JS

optimisation 2

Comment faire pour activer l'optimisation ?

Pour activer cette fonction, veuillez désactiver le mode de développement dans l'onglet General dans le réglage de paramètres de n'importe quel style Purity

optimisation 3

 

Maintenant, activer les options: Optimize CSS et Optimize JS

optimisation 4

Pour l'optimisation JS, nous fournissons 2 outils de compression: Closure Compiler et JSMIN. The Closure compiler a une meilleure compression et est plus précis mais il limite la taille du groupe d'optimisation (en dessous de 200kb).

Vous pouvez exclure les fichiers CSS et JS que vous ne voulez pas optimiser, il suffit d'ajouter le nom de fichier, si vous avez beaucoup de fichiers, veuillez les séparer par des virgules. Si vous avez 2 mêmes fichiers, veuillez ajouter un chemin d'accès complet aux fichiers afin de les distinguer.

Où sont sauvegardés les fichiers optimisés?

Tout le CSS optimisés sont situés dans le dossier /t3-assets/css et les fichiers JS optimisés sont situés dans /t3-assets/js.

optimisation 5

Comment les fichiers optimisés sont ils générés?

Si l'option d'optimisation est activée, le CSS et les fichiers JS optimisés seront automatiquement générés lorsqu'une page est affichée pour la première fois. S'il y a le moindre changement dans le CSS, dans le JS chargé dans une page, de nouveaux fichiers JS et CSS optimisés seront de nouveau générés automatiquement.

Donc, pour éviter d'avoir beaucoup de CSS et de fichiers JS optimisés, vous devriez vérifier avant d'activer l'option d'optimisation.

 

Configuration du Masthead dans purity

Dans Purity III, il y a 2 façons de créer un masthead pour tout lien de menu.

À l'aide de champ supplémentaire

Dans le panneau de configuration de menu, Nous avons ajouter des champs supplémentaires qui vous permettent d'ajouter un masthead au lien de menu. Ainsi, les extra-fields se trouvent dans l'onglet Paramètres d'affichage de la page .

masthead 1

Vous pouvez personnaliser le style du masthead, vous pouvez trouver le style du Masthead dans le fichier .less dans templates/purity_iii/less.

masthead 2

 

À l'aide de la position masthead

Par défaut, la position masthead est activée dans toutes les mises en page.

masthead 3

Si vous voulez afficher le masthead dans une page spécifique quelconque, créez un module, ajoutez du contenu au module, assignez à la position masthead. Normalement, nous utilisons module HTML personnalisé afin que nous puissions ajouter du contenu de manière flexible.

masthead 4

Exemple de contenu utilisé dans demo Purity III

<div class="jumbotron jumbotron-primary masthead">
<div class="col-md-6" align="left"><h1>I'm Purity III</h1><p>The best free Joomla template that you ever need.</p> 
<div class="btn-actions" style="margin-bottom: 20px;"><p><a href="http://bit.ly/purity_iii" class="btn btn-success btn-lg">Download Now</a></p></div>
</div>
<div class="col-md-6"><div class="video-wrapper"><iframe width="560" height="315" seamless="seamless" src="//www.youtube.com/embed/KSK2OR9pEUY?modestbranding=1&amp;;showinfo=0&amp;;autohide=1&amp;;rel=0&amp;;hd=1" allowfullscreen=""></iframe> </div> </div> </div>

 

Affectez le module à la page dans laquelle vous souhaitez l'afficher.

masthead 5

Ajoutez une classe pour donner un style au module. Dans la démo de Purity, les modules en position masthead utilisent la classe row-feature-primary, la classe sert à régler le background color du masthead.

masthead 6

 

Apparence sur le site :

masthead 7

En conclusion, si vous voulez simplement utiliser masthead avec juste titre et description, vous devez utiliser des champs supplémentaires dans le réglage du menu. Si vous voulez avoir un contenu flexible dans masthead, vous pouvez choisir d'utiliser la position masthead.

 

Installer Google analytics

Pour tout webmaster, Google Analytics est un outil incontournable. L'installation de Google Analytics est désormais si facile avec l'aide de T3 framework.

Guide rapide pour obtenir votre code de suivi Google Analytics:

  1. Connectez-vous à votre compte Google Analytics, et allez à la page d'administration.

  2. Sélectionnez un compte dans la liste déroulante dans la colonne compte.

  3. Sélectionnez une propriété dans le menu déroulant dans la colonne propriété.

  4. Cliquez sur Informations de suivi.

Lorsque vous avez le code de suivi Google Analytics, ouvrez n'importe quel style de template Purity III, allez à l'onglet Custom code puis ajoutez votre code Google Analytics de suivi au champ Before.

 

Remarque:

Vous pouvez ajouter les scripts à n'importe quel style de template, car il s'agit de paramètres globaux.

Une autre façon d'ajouter le code de suivi Google analytic sur votre site est l'ajout du code avant la balise de fermeture du fichier header.php dans templates/purity_iii/tpls/blocks.

analytics