Ressources de thème

La variable 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 variable URL de base configuration. 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 la variable web à l’emplacement suivant sous la propriété Commerce root.

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

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

  1. Sur le Administration barre latérale, accédez à Stores > Settings>Configuration.

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

  3. Développer Sélecteur d’extension la valeur Static Files Settings .

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

  4. Définir Sign Static Files to Yes.

  5. Lorsque vous avez terminé, 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 de Administration uniquement lors de l’utilisation de mode développeur.
  1. Sur le Administration barre latérale, accédez à Stores > Settings>Configuration.

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

  3. Développer Sélecteur d’extension la valeur CSS Settings .

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

    Pour obtenir une description détaillée de ces options de configuration, voir Paramètres CSS dans le Référence de configuration.

  4. Définir Merge CSS Files to Yes.

  5. Lorsque vous avez terminé, 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 Administration uniquement lors de l’utilisation de Mode Développeur.
  1. Sur le Administration barre latérale, accédez à Stores > Settings>Configuration.

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

  3. Développer Sélecteur d’extension la valeur JavaScript Settings .

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

    Pour obtenir une description détaillée de ces options de configuration, voir Paramètres JavaScript dans le Référence de configuration.

  4. Définir Merge JavaScript Files to Yes.

  5. Lorsque vous avez terminé, cliquez sur Save Config.

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