Dokumentation Commerce Inhalt und Design

Designelemente

Last update: Tue Nov 28 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

Beginner
Intermediate
Admin
User

Die statische Dateien sind die Sammlung von Assets wie CSS, Schriftarten, Bildern und JavaScript, die von einem Design verwendet werden. Der Speicherort statischer Dateien wird im Abschnitt Basis-URL Konfiguration. 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 werden die mit einem Design verknüpften Assets im web Ordner am folgenden Speicherort unter dem Ordner Commerce root.

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

Hinzufügen einer digitalen Signatur zu statischen Datei-URLs

Im Admin Seitenleiste, navigieren Sie zu Stores > Settings>Configuration.
Erweitern Sie im linken Bereich Advanced und wählen Developer.
Erweitern die Static Files Settings Abschnitt.

{width="500" modal="regular"}
Satz Sign Static Files nach Yes.
Wenn Sie fertig sind, klicken Sie 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 aus der Admin nur beim Arbeiten in Entwicklermodus.

Im Admin Seitenleiste, navigieren Sie zu Stores > Settings>Configuration.
Im linken Bereich: Advanced und wählen Developer.
Erweitern die CSS Settings Abschnitt.

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

Eine ausführliche Beschreibung dieser Konfigurationsoptionen finden Sie unter CSS-Einstellungen im Konfigurationsreferenz.
Satz Merge CSS Files nach Yes.
Wenn Sie fertig sind, klicken Sie 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 aus der Admin nur beim Arbeiten in Entwicklermodus.

Im Admin Seitenleiste, navigieren Sie zu Stores > Settings>Configuration.
Im linken Bereich: Advanced und wählen Developer.
Erweitern die JavaScript Settings Abschnitt.

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

Eine ausführliche Beschreibung dieser Konfigurationsoptionen finden Sie unter JavaScript-Einstellungen im Konfigurationsreferenz.
Satz Merge JavaScript Files nach Yes.
Wenn Sie fertig sind, klicken Sie auf Save Config.

recommendation-more-help

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