DocumentationCommerceContenu et conception

Ressources de thème

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Administration
  • Utilisateur ou utilisatrice

Les fichiers statiques sont la collection de ressources, telles que les fichiers CSS, les polices, les images et JavaScript, qui est utilisée par un thème. L’emplacement des fichiers statiques est spécifié dans la configuration URL de base. Vous pouvez ajouter une signature numérique à l’URL de chaque fichier statique afin de permettre aux navigateurs de détecter si une version plus récente est disponible. La version la plus récente du fichier est utilisée si la signature diffère de ce qui est stocké dans le cache du navigateur.

Pour une installation standard, les ressources associées à un thème sont organisées dans le dossier web à l’emplacement suivant sous la racine Commerce.

[commerce_root]/app/design/frontend/Magento/[theme_name]/web

Ajout d’une signature numérique aux URL de fichier statique

  1. Sur la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  3. Développez la section Sélecteur d’extension sur Static Files Settings .

    Paramètres des fichiers statiques {width="500" modal="regular"}

  4. Définissez Sign Static Files sur Yes.

  5. Une fois l’opération terminée, cliquez sur Save Config.

Type de fichier
Description
CSS
Contrôlez le style visuel associé à l’habillage. Exemple d'emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/css
Polices
Indiquez les polices qui peuvent être utilisées par le thème. Emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/fonts
Images
Fournissez les ressources graphiques utilisées par le thème, notamment les boutons, les textures d’arrière-plan, etc. Exemple d'emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/images
JS
routines JavaScript spécifiques à un thème et fonctions appelables. Exemple d'emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/js

Fusion de fichiers CSS

Pour optimiser votre site et réduire le temps de chargement des pages, vous pouvez réduire le nombre de fichiers CSS distincts en les fusionnant dans un seul fichier condensé. Si vous ouvrez un fichier CSS fusionné, un flux continu de texte s’affiche, avec des sauts de ligne supprimés. Vous ne pouvez pas modifier le fichier fusionné. Il est donc préférable d’attendre que vous ne soyez plus en mode de développement et que vous n’apportez plus de modifications fréquentes au CSS.

NOTE
Les fichiers CSS peuvent être fusionnés à partir du panneau Admin uniquement lorsque vous travaillez en mode développeur.

  1. Sur la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, Advanced et sélectionnez Developer.

  3. Développez la section Sélecteur d’extension sur CSS Settings .

    Paramètres CSS {width="500" modal="regular"}

    Pour obtenir des descriptions détaillées de ces options de configuration, voir Paramètres CSS dans la référence de configuration.

  4. Définissez Merge CSS Files sur Yes.

  5. Une fois l’opération terminée, cliquez sur Save Config.

Fusionner les fichiers JavaScript

Plusieurs fichiers JavaScript peuvent être fusionnés en un seul fichier condensé afin de réduire le temps de chargement de la page. Si vous ouvrez un fichier JavaScript fusionné, un flux continu de texte s’affiche et les sauts de ligne sont supprimés. Si le processus de développement est terminé et que le code ne contient aucune erreur, vous pouvez envisager de fusionner les fichiers.

NOTE
Les fichiers JavaScript peuvent être fusionnés à partir du panneau Admin uniquement lorsque vous travaillez en mode Développeur.

  1. Sur la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, Advanced et sélectionnez Developer.

  3. Développez la section Sélecteur d’extension sur JavaScript Settings .

    Paramètres JavaScript {width="600" modal="regular"}

    Pour obtenir des descriptions détaillées sur ces options de configuration, voir Paramètres JavaScript dans la référence sur la configuration.

  4. Définissez Merge JavaScript Files sur Yes.

  5. Une fois l’opération terminée, cliquez sur Save Config.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de