Show Menu
THEMEN×

Erweitern und Konfigurieren des Design-Importtools für Einstiegsseiten

In diesem Abschnitt wird beschrieben, wie Sie den Design Importer für Einstiegsseiten konfigurieren und bei Bedarf erweitern. Das Arbeiten mit Einstiegsseiten nach dem Import wird unter Einstiegsseiten erläutert.
Extrahieren der benutzerdefinierten Komponente durch den Design Importer
Nutzen Sie die folgenden logischen Schritte, um Ihre benutzerdefinierte Komponente durch den Design Importer erkennen zu lassen
  1. Erstellen eines Taghandlers
    • Ein Taghandler ist ein POJO, das HTML-Tags eines bestimmten Typs handelt. Welche HTML-Tags Ihr Taghandler handeln kann, wird über die OSGi-Eigenschaft „tagpattern.name“ in der TagHandlerFactory definiert. Im Grunde handelt es sich bei der OSGi-Eigenschaft um einen RegEx, der dem Eingabe-HTML-Tag entsprechen sollte, das Sie handeln möchten. Alle verschachtelten Tags würden zum Handling an den Taghandler übergeben werden. Wenn Sie sich z. B. für ein div registrieren, das ein verschachteltes <p>-Tag enthält, wird das <p>-Tag ebenfalls an den Taghandler übermittelt und Sie können entscheiden, wie Sie damit umgehen möchten.
    • Die Oberfläche des Taghandlers ähnelt der Oberfläche eines SAX-Inhaltshandlers. Sie erhält für jedes HTML-Tag SAX-Ereignisse. Als Anbieter eines Taghandlers müssen Sie bestimmte Lebenszyklusmethoden implementieren, die automatisch vom Design-Importer-Framework abgerufen werden.
  2. Erstellen Sie die entsprechende TagHandlerFactory.
    • Bei der TagHandlerFactory handelt es sich um eine OSGi-Komponente (Singleton), die dafür verantwortlich ist, Instanzen des Taghandlers zu erzeugen.
    • Ihre TagHandlerFactory muss eine OSGi-Eigenschaft mit dem Namen „tagpattern.name“ bereitstellen, deren Wert mit dem Eingabe-HTML-Tag abgeglichen wird.
    • Wenn mehrere Taghandler mit dem Eingabe-HTML-Tag übereinstimmen, wird jener mit dem höheren Rang gewählt. The ranking itself is exposed as an OSGi property service.ranking .
    • Die TagHandlerFactory ist eine OSGi-Komponente. Sämtliche Verweise auf den Taghandler müssen über diese Factory erfolgen.
  3. Stellen Sie sicher, dass Ihre TagHandlerFactory einen höheren Rang hat, wenn Sie den Standard überschreiben möchten.

Vorbereiten des HTML für den Import

Wenn Sie eine leere Importer-Seite erstellt haben, können Sie Ihre komplette HTML-Einstiegsseite importieren. Um Ihre HTML-Einstiegsseite zu importieren, müssen Sie den Inhalt zunächst zu einem Designpaket packen. Das Designpaket enthält Ihre HTML-Einstiegsseite sowie die Assets, auf die verwiesen wird (Bilder, CSS, Symbole, Skripts usw.).
Der folgende Spickzettel enthält ein Beispiel dafür, wie Sie Ihr HTML für den Import vorbereiten können:
Landingpage-Spickzettel

Zip-Datei-Layout und -Anforderungen

Zurzeit können Zip-Dateien nur eine HTML-Seite oder einen Teil einer Seite enthalten.
Unten sehen Sie ein Beispiellayout einer Zip-Datei:
  • /index.html -> HTML-Datei der Einstiegsseite
  • /css -> für das Hinzufügen zur CSS-clientlib
  • /img -> alle Bilder und Assets
  • /js -> für das Hinzufügen zur JS-clientlib
Das Layout basiert auf dem Boilerplate-Layout für HTML5. Read more at https://html5boilerplate.com/
Das Designpaket muss auf jeden Fall im Stammverzeichnis eine Datei index.html enthalten. Wenn die zu importierende Einstiegsseite auch über eine mobile Version verfügt, muss die Zip-Datei im Stammverzeichnis über eine Datei mobile.index.html sowie eine Datei index.html verfügen.

Vorbereiten des Einstiegsseiten-HTML

Um das HTML importieren zu können, benötigen Sie ein Leinwand-div zum Einstiegsseiten-HTML.
The canvas div is an html div with id="cqcanvas" that must be inserted within the HTML <body> tag and must wrap the content intended for conversion.
Ein Beispiel-Snippet des Einstiegsseiten-HTML nach dem Hinzufügen des Leinwand-div sieht wie folgt aus:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>
<body>
 <div id="cqcanvas">
  <!-- HTML content intended for conversion -->
 </div>
</body>
</html>

Vorbereiten der HTML, sodass es bearbeitbare AEM-Komponenten enthält

Wenn Sie eine Einstiegsseite importieren, können Sie die Seite im aktuellen Zustand importieren, was bedeutet, dass Sie nach dem Import der Einstiegsseite in AEM keine Änderungen an den importierten Elementen vornehmen können (Sie können der Seite jedoch weitere AEM-Komponenten hinzufügen).
Bevor Sie die Einstiegsseite importieren, empfiehlt es sich, einige Teile der Einstiegsseite in bearbeitbare AEM-Komponenten zu konvertieren. Dadurch können Sie auch nach dem Import des Einstiegsseitendesigns Teile der Einstiegsseite schnell bearbeiten.
Sie tun dies, indem Sie in der zu importierenden HTML-Datei der entsprechenden Komponente die data-cq-component hinzufügen.
Im folgenden Abschnitt wird beschrieben, wie Sie Ihre HTML-Datei so bearbeiten, dass bestimmte Teile der Einstiegsseiten in andere bearbeitbare AEM-Komponenten konvertiert werden. Die Komponenten werden im Detail unter Komponenten von Einstiegsseiten beschrieben.
HTML-Markup zum Konvertieren von Teilen der Einstiegsseiten in AEM-Komponenten verfügt sowohl über eine lange als auch über eine kurze Tag-Deklarierung. Beide werden für jede Komponente beschrieben.

Beschränkungen

Beachten Sie vor dem Import die folgenden Beschränkungen:

Sämtliche Attribute wie „class“ oder „id“, die auf das &lt;body>-Tag angewendet werden, werden nicht beibehalten.

If any attribute like id or class is applied on the body tag for example <body id="container"> then it is not preserved after the import. So the design being imported should not have any dependencies on the attributes applied on the <body> tag.

Drag-and-Drop-Zip

Das Hochladen von ZIP-Dateien per Drag & Drop wird für Internet Explorer und Firefox Version 3.6 und früher nicht unterstützt. Wenn Sie einen dieser Browser verwenden, klicken Sie beim Upload eines Designs auf die Dateiablagezone, um ein Dialogfeld für den Dateiupload zu öffnen und Ihr Design so hochzuladen.
Unterstützt wird der Drag-and-Drop-Upload der Design-Zip von folgenden Browsern: Chrome, Safari 5.x, Firefox 4 und höher.

Modernizr wird nicht unterstützt

Modernizr.js ist ein Javascript-basiertes Hilfsmittel, das native Browserfunktionen erkennt und ermittelt, ob sie für HTML5-Elemente geeignet sind. Bei Designs, die Modernizr für die verbesserte Unterstützung älterer Browserversionen verwenden, können Fehler in der Einstiegsseitenlösung auftreten. Modernizr.js -Skripts werden vom Design-Importer nicht unterstützt.

Seiteneigenschaften bleiben beim Import von Designpaketen nicht erhalten

Jede Seiteneigenschaft (z. B. „Benutzerdefinierte Domäne“, „HTTPS erzwingen“ usw.), die für eine (mit der Vorlage „Leere Startseite“ erstellte) Seite vor dem Import des Designpakets festgelegt wurde, geht verloren, nachdem das Design importiert wurde. Aus diesem Grund wird empfohlen, die Seiteneigenschaften nach dem Import des Designpakets festzulegen.

Nur HTML-Markup angenommen

Nach dem Importieren wird das Markup aus Sicherheitsgründen bereinigt, um den Import und die Veröffentlichung von ungültigem Markup zu verhindern. Dabei wird davon ausgegangen, dass sämtliches reines HTML-Markup und alle anderen Elemente Wie Inline-SVG oder Webkomponenten herausgefiltert werden.

Text

HTML-Markup zum Einfügen einer text-Komponente ( foundation/components/text ) in das HTML im Designpaket:
<div data-cq-component="text"> <p>This is some editable text</p> </div>

Durch die Integration des oben genannten Markups in das HTML passiert Folgendes:
  • Creates an editable AEM text component ( sling:resourceType=foundation/components/text ) in the landing page created after importing the design package.
  • Die Eigenschaft text der erstellten Komponente „text“ wird auf das im div eingeschlossene HTML gesetzt.
Kurze Komponenten-Tag-Deklaration :
<p data-cq-component="text">Text component shorthand</p>

Text mit einer Liste
So fügen Sie Text mit einer Liste hinzu:
  • ​1.
  • ​2.
der in einem RTE-Editor bearbeitet werden kann:
<div data-cq-component="text"><p>This is text with a list:</p><ul><li>1st</li><li>2nd</li></ul><p>It can be edited with the RTE editor</p></div>

Text mit Farbe
So fügen Sie Text mit Farbe (pink) hinzu, der im RTE-Editor bearbeitet werden kann:
<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>

Titel

HTML markup to insert a title component ( wcm/landingpage/components/title ) in the HTML within design package:
<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>

Durch die Integration des oben genannten Markups in das HTML passiert Folgendes:
  • Creates an editable AEM title component ( sling:resourceType=wcm/landingpage/components/title ) in the landing page created after importing the design package.
  • Stellt die Eigenschaft jcr:title der erstellten title-Komponente auf den Text ein, der im div in das Überschriften-Tag eingeschlossen ist.
  • Stellt die Eigenschaft type des Überschriften-Tags ein, in diesem Fall h1 .
Die Komponente title unterstützt 7 Typen - h1, h2, h3, h4, h5, h6 und default .
Kurze Komponenten-Tag-Deklaration :
<h1 data-cq-component="title">Title component shorthand</h1>

Bild

HTML-Markup zum Einfügen einer image-Komponente (foundation/components/image) in das HTML im Designpaket:
<div data-cq-component="image">
<img src="img/video1.png" alt="Video about Polar Brake Goggles in action" title="Polar Brake Goggles" width="300" height="200" />
</div>

Durch die Integration des oben genannten Markups in das HTML passiert Folgendes:
  • Creates an editable AEM image component ( sling:resourceType=foundation/components/image ) in the landing page created after importing the design package.
  • Stellt die Eigenschaft fileReference der erstellten image-Komponente auf den Pfad ein, in den das im src-Attribut angegebene Bild importiert wird.
  • Sets the alt property to the value of alt attribute in the img tag.
  • Sets the title property to the value of title attribute in the img tag.
  • Sets the width property to the value of width attribute in the img tag.
  • Sets the height property to the value of height attribute in the img tag.
Kurze Komponenten-Tag-Deklaration :
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>

Absoluter URL „img src“ wird im div der image-Komponente nicht unterstützt

If an <img> tag with an absolute url src is attempted for component conversion, an appropriate UnsupportedTagContentException is raised. So wird das folgende Beispiel nicht unterstützt:
<div data-cq-component="image">
<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>
</div>
Andernfalls werden absolute URL-Bilder für img-Tags unterstützt, die nicht Teil des Bildkomponenten-div sind.

Aktionsaufruf-Komponenten (CTA)

Sie können einen Teil einer zu importierenden Einstiegsseite als „bearbeitbare Aktionsaufruf-Komponente“ markieren. Solche importierten Aktionsaufruf-Komponenten können nach dem Import der Einstiegsseite bearbeitet werden. AEM enthält die folgenden CTA-Komponenten:
  • Click Through-Link - Sie können einen Textlink hinzufügen. Wenn der Besucher auf diesen klickt, wird er zu einer Ziel-URL weitergeleitet.
  • Grafischer Link – Sie können ein Bild hinzufügen. Wenn der Besucher darauf klickt, wird er zu einer Ziel-URL weitergeleitet.

Lead-Formular

Ein Lead-Formular ist ein Formular, das dazu verwendet wird, die Informationen eines Besuchers/Leads zu sammeln. Diese Informationen können gespeichert und später dazu verwendet werden, anhand dieser Informationen effizientes Marketing durchzuführen. Die Informationen enthalten im Allgemeinen Titel, Namen, E-Mail, Geburtsdatum, Adresse, Interessen usw. Es gehört zur Gruppe "CTA-Interessentenformular".
Unterstützte Funktionen
  • Vordefinierte Interessentenfelder - Vorname, Nachname, Adresse, Dob, Geschlecht, Info, userId, emailId, Senden-Schaltfläche sind im Sidekick verfügbar. Platzieren Sie die erforderliche Komponente einfach per Drag-and-Drop in Ihrem Lead-Formular.
  • Mithilfe dieser Komponenten kann der Autor ein eigenständiges Formular entwerfen. Diese Felder entsprechen den Lead-Formular-Feldern. In eigenständigen oder importierten Zip-Anwendungen kann der Benutzer mit den Formularfeldern „cq:form“ oder „cta lead“ weitere Felder hinzufügen und diese seinen Anforderungen entsprechend benennen und entwerfen.
  • Weisen Sie Interessentenformularfelder mit bestimmten vordefinierten Namen des CTA-Interessentenformulars zu, z. B. "firstName"für den Vornamen im Interessentenformular usw.
  • Felder, die nicht dem Lead-Formular zugewiesen sind, werden cq:form-Komponenten zugewiesen: Text, Optionsschalter, Kontrollkästchen, Dropdown, Verborgen, Kennwort.
  • Benutzer können den Titel mit dem Tag „label“ und Stile mit dem Stilattribut „class“ angeben (nur für CTA-Lead-Formular-Komponenten verfügbar).
  • Danksagungsseite und Abonnementliste können als ausgeblendeter Parameter des Formulars bereitgestellt werden (vorhanden in index.htm) oder über die Bearbeitungsleiste von "Start des Interessentenformulars"hinzugefügt/bearbeitet werden.
    <input type="hidden" name="redirectUrl" value="/content/we-retail/de/user/register/danke_you"/>
    <input type="hidden" name="groupName" value="leadForm"/>
  • Einschränkungen wie - erforderlich können aus der Bearbeitungskonfiguration jeder Komponente bereitgestellt werden.
HTML-Tag mit in der importierten Zip enthaltenem grafischen Link: Hier wird „firstName“ dem Feld „firstName“ auf dem Lead-Formular zugewiesen usw. Eine Ausnahme bilden Kontrollkästchen. Diese beiden Kontrollkästchen werden der Dropdown-Komponente „cq:form“ zugewiesen.
<div id="cqcanvas">
   <div id="form_wrapper">
    <h2>NEWSLETTER SIGN UP</h2>
       <div data-cq-component="leadFormGeneration">
       <form method="post" action="#" onsubmit="return popupBox()">
       <label for="firstName" class="checkText">
        FIRST NAME
       </label><br />
       <input name="firstName" class="text pink" type="text" /><br />
       <label for="lastName" class="checkText">
        LAST NAME
       </label><br />
       <input name="lastName" class="text pink" type="text" /><br />
       <label for="emailId" class="checkText">
        EMAIL ADDRESS
       </label><br />
       <input name="emailId" class="text pink" type="text" /><br />

       <div class="checkboxes">
       <input type="checkbox" class="check" name="send_news" /> <label for="send_news" class="checkText">Send me the latest We.Retail news and announcements.</label><br />
       <input type="checkbox" class="check" name="send_offers" /> <label for="send_offers" class="checkText">Send me We.Retail deals and special offers.</label><br />
       </div>
       <input type="submit" name="submit" class="submit pink" value="Sign Up >" />
       </form>
     </div>
   </div>

ParSys

Das AEM-parsys ist eine Container-Komponente, die andere AEM-Komponenten enthalten kann. Es ist möglich, in das importierte HTML eine parsys-Komponente einzufügen. Dadurch kann der Benutzer auch nach dem Import der Einstiegsseite AEM-Komponenten hinzufügen/löschen.
Das Absatzsystem bietet Benutzern die Möglichkeit, Komponenten über den Sidekick hinzuzufügen.
HTML-Markup zum Einfügen einer parsys-Komponente ( foundation/components/parsys ) in das HTML im Designpaket:
<div data-cq-component="parsys">
   <div data-cq-component="title"><h2>ULTIMATE PROTECTION</h2></div>
        <div data-cq-component="title"><h3>ON SALE</h3></div>
</div>

Durch die Integration des oben genannten Markups in das HTML passiert Folgendes:
  • Fügt eine AEM-parsys-Komponente (foundation/components/parsys) in die Einstiegsseite ein, die nach dem Import des Designpakets erstellt wurde.
  • Startet den Sidekick mit Standardkomponenten. Neue Komponenten können der Einstiegsseite hinzugefügt werden, indem sie aus dem Sidekick auf die parsys-Komponente gezogen werden.
  • Zwei title-Komponenten sind ebenfalls Teil des parsys.

Target

Die target-Komponente zeigt den Inhalt eines Erlebnisses auf der Seite an. In einer Kampagne können mehrere Erlebnisse erstellt werden und die Zielkomponente kann verschiedenen Besuchern der Seite dynamisch Inhalte aus verschiedenen Erlebnissen anzeigen.
HTML-Markup, um eine Zielkomponente in eine Kampagne einzufügen und dort verschiedene Erlebnisse zu erstellen:
<div data-cq-component="target">
 <section data-cq-component="experience" data-cq-experience="default">
  <p data-cq-component="text">Default content. Select this campaign in client context to view other experiences</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="over-30">
  <p data-cq-component="text">Content for Over 30</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="under-30">
  <p data-cq-component="text">Content for Under 30</p>
 </section>
</div>

Weitere Importoptionen

Sie können nicht nur angeben, ob es sich bei importierten Komponenten um bearbeitbare AEM-Komponenten handeln soll, sondern auch die folgenden Optionen konfigurieren, bevor Sie das Designpaket importieren:
  • Einrichten von Seiteneigenschaften durch Extrahieren der im importierten HTML definierten Metadaten
  • Angeben der charset-Kodierung im HTML
  • Überlagern der Importer-Seitenvorlage

Einrichten von Seiteneigenschaften durch Extrahieren der im importierten HTML definierten Metadaten

Die folgenden im Kopf des importierten HTML deklarierten Metadaten werden vom Design Importer als Eigenschaft „jcr:description“ extrahiert und beibehalten:
  • <meta name="description" content="">
Das im HTML-Tag festgelegte lang-Attribut wird vom Design Importer als Eigenschaft „jrc:language“ extrahiert und beibehalten:
  • <html lang="en">

Angeben der charset-Kodierung im HTML

Der Design Importer liest die im importierten HTML festgelegte Kodierung. Die Kodierung kann wie folgt festgelegt werden:
<meta charset="UTF-8">
ODER
<meta http-equiv="content-type" content="text/html;charset=utf-8">
Wenn im importierten HTML keine Kodierung festgelegt ist, wird vom Design Importer UTF-8 als Standardkodierung festgelegt.

Überlagern von Vorlagen

The Blank Landing Page template can be overlayed by creating a new one at: /apps/<appName>/designimporter/templates/<templateName>
Steps for creating a new template in AEM are explained here .

Verweisen auf eine Komponente von der Einstiegsseite

Angenommen, Sie verfügen über eine Komponente, auf die Sie in Ihrem HTML mit dem data-cq-component-Attribut verweisen möchten, sodass der Design Importer an dieser Stelle eine Komponente rendert. e.g., you want to reference the table component ( resourceType = /libs/foundation/components/table ). Sie müssen das HTML wie folgt ergänzen:
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
Beim Pfad in der data-cq-component muss es sich um den resourceType der Komponente handeln.

Best Practices

Die Verwendung von CSS-Auswahlen, die den folgenden ähneln, wird bei der Verwendung mit Elementen, die für die Komponentenkonvertierung oder den Import markiert sind, nicht empfohlen.
E > F
ein einem E-Element untergeordnetes F-Element
E > F
ein F-Element, dem ein E-Element unmittelbar vorhergeht
E ~ F
ein F-Element, dem ein E-Element vorhergeht
E:root
ein E-Element, Stamm des Dokuments
E:nth-child(n)
ein E-Element, das n. untergeordnete Element des übergeordneten Elements
E:nth-last-child(n)
ein E-Element, das n. untergeordnete Element des übergeordneten Element, mit der Zählung beim letzten beginnend
E:nth-of-type(n)
ein E-Element, das n. gleichrangige Element seines Typs
E:nth-last-of-type(n)
ein E-Element, das n. gleichrangige Element seines Typs, mit der Zählung beim letzten beginnend
Dies liegt daran, dass dem generierten HTML nach dem Import zusätzliche HTML-Elemente wie das <div>-Tag hinzugefügt werden.
  • Skripts, die auf einer ähnlichen Struktur basieren, werden ebenfalls nicht für die Verwendung mit Elementen empfohlen, die für die Konvertierung in AEM-Komponenten vorgesehen sind.
  • Die Verwendung von Stilen für die Markup-Tags zur Komponentenkonvertierung wie <div data-cq-component="&ast;"> wird nicht empfohlen.
  • Beim Designlayout sollten die Best Practices für das HTML5-Boilerplate befolgt werden. Read more on: https://html5boilerplate.com/ .

Konfigurieren von OSGi-Modulen

Die Komponenten, die Eigenschaften bereitstellen, die über die OSGI-Konsole konfiguriert werden können, lauten wie folgt:
  • Design Importer für die Einstiegsseite
  • Builder für die Einstiegsseite
  • Builder für mobile Einstiegsseiten
  • Eintrags-Präprozessor für Einstiegsseite
In der folgenden Tabelle finden Sie eine Kurzbeschreibung der Eigenschaften:
Komponente Eigenschaftsname Beschreibung der Eigenschaft
Design Importer für die Einstiegsseite Filter extrahieren Die Liste der regulären Ausdrücke, die für das Filtern der Dateien beim Extrahieren verwendet werden. Zip-Einträge, die einem der angegebenen Muster entsprechen, werden von der Extraktion ausgeschlossen.
Builder für die Einstiegsseite Dateimuster Der Einstiegsseitenaufbau kann so konfiguriert werden, dass HTML-Dateien, die einem regulären Ausdruck entsprechen, gemäß dem Dateimuster verarbeitet werden.
Builder für mobile Einstiegsseiten Dateimuster Der Einstiegsseitenaufbau kann so konfiguriert werden, dass HTML-Dateien, die einem regulären Ausdruck entsprechen, gemäß dem Dateimuster verarbeitet werden.
Gerätegruppen Die Liste der zu unterstützenden Gerätegruppen.
Eintrags-Präprozessor für Einstiegsseite Suchmuster Das Muster, nach dem im Inhalt der Einträge im Archiv gesucht wird. Dieser reguläre Ausdruck wird mit der Zeile für Zeile des Einstiegsinhalts abgeglichen. Bei Übereinstimmung wird der übereinstimmende Text durch das angegebene Ersatzmuster ersetzt. Beachten Sie den unten stehenden Hinweis bezüglich aktuellen Beschränkungen für den Eintrags-Präprozessor für die Einstiegsseite.
Ersetzungsmuster Das Muster, das die gefundenen Übereinstimmungen ersetzt. Sie können Regex-Gruppenreferenzen wie $1, $2 verwenden. Darüber hinaus unterstützt dieses Muster Suchbegriffe wie {designPath}, die beim Import mit dem tatsächlichen Wert aufgelöst werden.
Aktuelle Beschränkungen des Eintrags-Präprozessors für Einstiegsseiten: Wenn Sie Änderungen am Suchmuster vornehmen müssen, müssen Sie beim Öffnen des Felix Property Editor manuell umgekehrte Schrägstriche einfügen, um die regex-Metazeichen auszukommentieren. Wenn Sie nicht manuell umgekehrte Schrägstriche einfügen, wird der regex als ungültig betrachtet und ersetzt nicht die ältere Version.
Beispiel: Wenn die Standardkonfiguration wie folgt ist:
/\&ast *CQ_DESIGN_PATH **/ *(['"])
And you need to replace CQ_DESIGN_PATH with VIPURL in the search pattern, then your search pattern should look like this:
/* *VIPURL **/ *(['"])

Fehlerbehebung

Beim Import des Designpakets können verschiedene Fehler auftreten, die in diesem Abschnitt beschrieben werden.

Initialisierung des Sidekicks mit für Einstiegsseiten relevanten Komponenten

Wenn das Designpaket ein parsys-Komponenten-Markup enthält, werden nach dem Import im Sidekick für Einstiegsseiten relevante Komponenten angezeigt. Sie können neue Komponenten per Drag-and-Drop auf die parsys-Komponente in der Einstiegsseite ziehen. Sie können auch den Designmodus aufrufen und dem Sidekick neue Komponenten hinzufügen.

Während des Imports werden Fehlermeldungen angezeigt

Bei Fehlern (z. B. wenn das importierte Paket keine gültige ZIP-Datei ist) importiert der Design-Import das Paket nicht und zeigt stattdessen eine Fehlermeldung über der Seite direkt über dem Drag & Drop-Feld an. Hier werden Beispiele für Fehlerszenarios aufgeführt. Wenn Sie den Fehler korrigiert haben, können Sie die aktualisierte Zip-Datei erneut in dieselbe leere Einstiegsseite importieren. Unter anderem werden in den folgenden Szenarios Fehler gemeldet:
  • Das importierte Designpaket ist kein gültiges Zip-Archiv.
  • Das importierte Entwurfspaket enthält auf der obersten Ebene keine Datei "index.html".

Nach dem Import werden Warnmeldungen angezeigt

Im Falle von Warnungen (z. B. HTML bezieht sich auf Bilder, die nicht im Paket vorhanden sind), importiert der Design-Importer die ZIP-Datei, zeigt aber gleichzeitig eine Liste von Problemen/Warnungen im Ergebnisfenster an. Wenn Sie auf den Link "Probleme"klicken, wird eine Liste der Warnungen angezeigt, die auf Probleme innerhalb des Designpakets hinweisen. Unter anderem werden in folgenden Fällen vom Design Importer Warnmeldungen erzeugt und angezeigt:
  • HTML bezieht sich auf Bilder, die nicht im Paket vorhanden sind.
  • HTML bezieht sich auf Skripten, die nicht im Paket vorhanden sind.
  • HTML bezieht sich auf Stile, die nicht im Paket vorhanden sind.

Wo werden die Dateien aus der Zip-Datei in AEM gespeichert?

Nach dem Import der Einstiegsseite werden die Dateien (Bilder, CSS, JS usw.) innerhalb des Designpakets in AEM in folgendem Verzeichnis gespeichert:
/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>
Angenommen, die Einstiegsseite wird unter der Kampagne We.Retail erstellt und der Name der Einstiegsseite lautet myBlankLandingPage . In diesem Fall werden die Zip-Dateien in folgendem Verzeichnis gespeichert:
/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage

Formatierung bleibt nicht erhalten

Beachten Sie beim Erstellen Ihres CSS die folgenden Beschränkungen:
Bei einem Text und einem (bearbeitbaren) Bild wie nachfolgend gezeigt:
<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>

mit einem wie folgt auf die Klasse box angewendeten CSS:
.box

{ width: 450px; padding:10px; border: 1px #C5DBE7 solid; margin: 0px auto 0 auto; background-image:url(assets/box.gif); background-repeat:repeat-x,y; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; }

wird box img im Design Importer verwendet. Die daraus resultierende Einstiegsseite wird ohne Formatierung angezeigt. Um dies zu umgehen, beachten Sie, dass AEM im CSS div-Tags hinzufügt, und schreiben Sie den Code entsprechend um. Andernfalls sind einige CSS-Regeln ungültig.
.box img

{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }

Also, designers should be aware that only code inside the id=cqcanvas tag is recognized by the importer, otherwise design is not preserved.