Dokumentation Commerce Inhalt und Design

Designelemente

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Erstellt für:

Einsteiger
Fortgeschrittener
Admin
Benutzende

Die statischen Dateien sind die von einem Design verwendeten Assets wie CSS, Schriftarten, Bilder und JavaScript. 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 Browser-Cache gespeicherten Signatur unterscheidet.

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

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

Hinzufügen einer digitalen Signatur zu statischen Datei-URLs

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

{width="500" modal="regular"}
Setzen Sie Sign Static Files auf Yes.
Klicken Sie nach Abschluss des Vorgangs auf Save Config.

Dateityp

Beschreibung

CSS

Steuern Sie den visuellen Stil, der der Haut zugeordnet 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 dem Server: [commerce]/app/design/frontend/Magento/[theme]/web/fonts

Bilder

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

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

Zusammenführen von CSS-Dateien

Im Rahmen der Optimierung Ihrer Site und der Verkürzung der Seitenladezeit können Sie die Anzahl separater CSS-Dateien reduzieren, indem Sie sie zu einer einzigen, gekürzten Datei zusammenführen. Wenn Sie eine zusammengeführte CSS-Datei öffnen, wird ein kontinuierlicher Textstrom mit entfernten Zeilenumbrüchen angezeigt. Sie können die zusammengeführte Datei nicht bearbeiten. Daher sollten Sie am besten warten, bis Sie nicht mehr im Entwicklungsmodus sind und keine häufigen Änderungen mehr an der CSS vornehmen.

NOTE

CSS-Dateien können nur dann aus dem Bedienfeld Admin zusammengeführt werden, wenn Sie im Entwicklermodus arbeiten.

Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.
Wählen Sie im linken Bereich Advanced und dann Developer aus.
Erweitern Sie im Abschnitt CSS Settings .

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

Detaillierte Beschreibungen dieser Konfigurationsoptionen finden Sie unter CSS-Einstellungen in der Konfigurationsreferenz.
Setzen Sie Merge CSS Files auf Yes.
Klicken Sie nach Abschluss des Vorgangs auf Save Config.

Zusammenführen von JavaScript-Dateien

Mehrere JavaScript-Dateien können zu einer einzigen, gekürzten Datei zusammengeführt werden, um die Seitenladezeit zu verkürzen. Wenn Sie eine zusammengeführte JavaScript-Datei öffnen, wird ein kontinuierlicher Textstrom mit entfernten Zeilenumbrüchen angezeigt. 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 nur beim Arbeiten im Entwicklermodus aus dem Bedienfeld Admin zusammengeführt werden.

Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.
Wählen Sie im linken Bereich Advanced und dann Developer aus.
Erweitern Sie im Abschnitt JavaScript Settings .

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

Detaillierte Beschreibungen dieser Konfigurationsoptionen finden Sie unter JavaScript-Einstellungen in der Konfigurationsreferenz.
Setzen Sie Merge JavaScript Files auf Yes.
Klicken Sie nach Abschluss des Vorgangs auf Save Config.

recommendation-more-help

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