Dokumentation Commerce Inhalt und Design

Design-Assets

Last update: Wed Dec 18 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Erstellt für:

Einsteiger
Fortgeschrittener
Admin
Benutzende

Die statischen Dateien sind die Sammlung von Assets wie CSS, Schriftarten, Bildern und JavaScript, die von einem Design verwendet wird. Der Speicherort statischer Dateien wird in der Konfiguration Basis-URL angegeben. Sie können der URL jeder statischen Datei eine digitale Signatur hinzufügen, damit Browser erkennen können, wann eine neuere Version verfügbar ist. Die neuere Version der Datei wird verwendet, wenn sich die Signatur von der im Browsercache gespeicherten unterscheidet.

Bei einer Standardinstallation sind die mit einem Design verknüpften Assets im Ordner web am folgenden Speicherort unter dem Commerce organisiert.

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

Hinzufügen einer digitalen Signatur zu statischen Datei-URLs

Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.
Erweitern Sie im linken Bereich Advanced und wählen Sie Developer.
Erweitern Sie den Abschnitt Static Files Settings .

{width="500" modal="regular"}
Legen Sie Sign Static Files auf Yes fest.
Klicken Sie abschließend auf Save Config.

Dateityp

Beschreibung

CSS

Steuern Sie den visuellen Stil, der mit dem Design verknüpft ist. Beispielspeicherort auf dem Server: [commerce]/app/design/frontend/Magento/[theme]/web/css

Schriftarten

Geben Sie die Schriftarten an, die für die Verwendung durch das Design verfügbar sind. Speicherort auf Server: [commerce]/app/design/frontend/Magento/[theme]/web/fonts

Bilder

Stellen Sie die vom Design verwendeten grafischen Assets bereit, einschließlich Schaltflächen, Hintergrundtexturen usw. Beispielspeicherort auf dem Server: [commerce]/app/design/frontend/Magento/[theme]/web/images

Themenspezifische JavaScript-Routinen und aufrufbare Funktionen. Beispielspeicherort auf dem Server: [commerce]/app/design/frontend/Magento/[theme]/web/js

Zusammenführen von CSS-Dateien

Um Ihre Site zu optimieren und die Seitenladezeit zu reduzieren, können Sie die Anzahl der separaten CSS-Dateien reduzieren, indem Sie sie in einer einzigen, zusammengefassten Datei zusammenführen. Wenn Sie eine zusammengeführte CSS-Datei öffnen, wird ein fortlaufender Textfluss angezeigt, aus dem Zeilenumbrüche entfernt wurden. Sie können die zusammengeführte Datei nicht bearbeiten. Daher ist es am besten, zu warten, bis Sie den Entwicklungsmodus verlassen haben und keine häufigen Änderungen mehr an CSS vornehmen.

NOTE

CSS-Dateien können aus dem Bedienfeld Admin nur zusammengeführt werden, wenn Entwicklermodus).

Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.
Wählen Sie im linken Bedienfeld Developer aus und Advanced Sie diese aus.
Erweitern Sie den Abschnitt CSS Settings .

{width="500" modal="regular"}

Detaillierte Beschreibungen dieser Konfigurationsoptionen finden Sie unter CSS-Einstellungen in Konfigurationsreferenz.
Legen Sie Merge CSS Files auf Yes fest.
Klicken Sie abschließend auf Save Config.

Zusammenführen von JavaScript-Dateien

Mehrere JavaScript-Dateien können zu einer einzigen, zusammengefassten Datei zusammengeführt werden, um die Seitenladezeit zu reduzieren. Wenn Sie eine zusammengeführte JavaScript-Datei öffnen, wird ein fortlaufender Textstrom angezeigt, wobei die Zeilenumbrüche entfernt wurden. Wenn Sie mit dem Entwicklungsprozess fertig sind und der Code keine Fehler enthält, sollten Sie die Dateien zusammenführen.

NOTE

JavaScript-Dateien können aus dem Bedienfeld Admin nur zusammengeführt werden, wenn Entwicklermodus.

Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.
Wählen Sie im linken Bedienfeld Developer aus und Advanced Sie diese aus.
Erweitern Sie den Abschnitt JavaScript Settings .

{width="600" modal="regular"}

Detaillierte Beschreibungen dieser Konfigurationsoptionen finden Sie unter JavaScript-Einstellungen in Konfigurationsreferenz.
Legen Sie Merge JavaScript Files auf Yes fest.
Klicken Sie abschließend auf Save Config.

recommendation-more-help

2b0136b4-ef75-405f-9734-60d741f198de