DokumentationHandelInnehåll och design

Temaresurser

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Nybörjare
  • Mellanliggande
  • Administratör
  • Användare

De statiska filerna är en samling resurser, till exempel CSS, teckensnitt, bilder och JavaScript som används av ett tema. Platsen för statiska filer anges i konfigurationen Bas-URL . Du kan lägga till en digital signatur i URL:en för varje statisk fil så att webbläsarna kan identifiera när en nyare version är tillgänglig. Den nyare versionen av filen används om signaturen skiljer sig från den som lagras i webbläsarens cache.

För en standardinstallation ordnas resurserna som är kopplade till ett tema i mappen web på följande plats nedanför roten Commerce.

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

Lägga till en digital signatur i statiska filadresser

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Expandera Advanced i den vänstra panelen och välj Developer.

  3. Expandera Expansionsväljaren i avsnittet Static Files Settings.

    Inställningar för statiska filer {width="500" modal="regular"}

  4. Ange Sign Static Files till Yes.

  5. Klicka på Save Config när du är klar.

Filtyp
Beskrivning
CSS
Styr den visuella formatering som är kopplad till skalet. Exempelplats på servern: [commerce]/app/design/frontend/Magento/[theme]/web/css
Typsnitt
Ange de teckensnitt som är tillgängliga för temat. Plats på servern: [commerce]/app/design/frontend/Magento/[theme]/web/fonts
Bilder
Ange de grafiska resurser som används av temat, inklusive knappar, bakgrundstexturer och så vidare. Exempelplats på servern: [commerce]/app/design/frontend/Magento/[theme]/web/images
JS
Temaspecifika JavaScript-rutiner och anropbara funktioner. Exempelplats på servern: [commerce]/app/design/frontend/Magento/[theme]/web/js

Sammanfoga CSS-filer

Som en del av ett försök att optimera webbplatsen och minska sidinläsningstiden kan du minska antalet separata CSS-filer genom att sammanfoga dem till en enda komprimerad fil. Om du öppnar en sammanfogad CSS-fil ser du ett kontinuerligt textflöde med radbrytningar borttagna. Du kan inte redigera den sammanfogade filen, så det är bäst att vänta tills du är utanför utvecklingsläget och inte längre gör vanliga ändringar i CSS.

NOTE
CSS-filer kan bara sammanfogas från panelen Admin när du arbetar i utvecklarläget.

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. I den vänstra panelen Advanced och väljer Developer.

  3. Expandera Expansionsväljaren i avsnittet CSS Settings.

    CSS-inställningar {width="500" modal="regular"}

    Detaljerade beskrivningar av dessa konfigurationsalternativ finns i CSS-inställningar i Konfigurationsreferens.

  4. Ange Merge CSS Files till Yes.

  5. Klicka på Save Config när du är klar.

Slå samman JavaScript-filer

Flera JavaScript-filer kan sammanfogas till en enda komprimerad fil för att minska sidinläsningstiden. Om du öppnar en sammanfogad JavaScript-fil ser du ett kontinuerligt textflöde med radbrytningar borttagna. Om du är klar med utvecklingsprocessen och koden inte innehåller några fel kan du sammanfoga filerna.

NOTE
JavaScript-filer kan bara sammanfogas från panelen Admin när du arbetar i Utvecklarläge.

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. I den vänstra panelen Advanced och väljer Developer.

  3. Expandera Expansionsväljaren i avsnittet JavaScript Settings.

    JavaScript-inställningar {width="600" modal="regular"}

    Detaljerade beskrivningar av dessa konfigurationsalternativ finns i JavaScript-inställningar i Konfigurationsreferens.

  4. Ange Merge JavaScript Files till Yes.

  5. Klicka på Save Config när du är klar.

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