Installieren und Verwenden des AEM Guides-Erweiterungspakets
Mit Erweiterungen können Sie Ihre AEM Guides-App an Ihre Anforderungen anpassen. Dieses Erweiterungs-Framework wird ab AEM Guides v4.3 (On-Premise) und 2310 (Cloud) unterstützt.
Voraussetzungen
Dieses Paket erfordert git bash und npm
Installation
Die einfachste Methode zum Bootstrapping der AEM Guides-Framework-Installation ist durch CLI
npx @adobe/create-guides-extension
Hinzufügen von Anpassungscode
-
Fügen Sie Code-Dateien für jede Komponente hinzu, die Sie im Verzeichnis
src/
erweitern möchten. Einige Beispieldateien wurden bereits hinzugefügt. -
Jetzt in der Datei
index.ts
im Verzeichnissrc/
:- Importieren Sie die
.ts
-Dateien mit den Anpassungen, die Sie in Ihrem Build hinzufügen möchten. - Importe zu
window.extension
hinzufügen - Registrieren Sie die
id
der angepassten Komponente und den entsprechenden Import beitcx extensions
- Siehe Beispiel
/src/index.ts
- Importieren Sie die
Erstellen des benutzerdefinierten Codes
-
Führen Sie
npm run build
im Stammverzeichnis aus. Sie erhalten 3 Dateien im Verzeichnisdist/
:build.css
guides-extension.js
guides-extension.umd.cjs
Hinzufügen der Anpassung zu AEM
- Gehe zu
CRXDE
crx/de/index.jsp#/
- Erstellen Sie unter dem Ordner
apps
einen neuen Knoten des Typscq:ClientLibraryFolder
.
- Wählen Sie im Knoten
properties
die OptionMulti
und fügen Sie die folgende Eigenschaft hinzu:
Name:categories
Typ:String []
Wert:apps.fmdita.review_overrides
,apps.fmdita.xml_editor.page_overrides
- Um die erstellte JS hinzuzufügen, erstellen Sie eine neue Datei, z. B.
tcx1.js
im oben erstellten Knoten. Fügen Sie hier den Code ausdist/guides-extension.umd.cjs
oderdist/guides-extension.js
hinzu. Erstellen Sie nun eine neue Dateijs.txt
, hier fügen wir den Namen unserer JS-Datei hinzu, der in diesem Fall lautet:
#base=.
tcx1.js
- Um den erstellten CSS hinzuzufügen, erstellen Sie eine neue Datei, z. B.
tcx1.css
im oben erstellten Knoten. Fügen Sie hier den Code vondist/build.css
hinzu. Erstellen Sie nun eine neue Dateicss.txt
, hier fügen wir den Namen unserer CSS-Datei hinzu, der in diesem Fall lautet:
#base=.
tcx1.css
- Führen Sie einen
shift + refresh
aus, um die App mit den Anpassungen zu laden!
Fehlerbehebung
Überprüfen Sie, ob alle oben genannten Schritte korrekt ausgeführt wurden.
Nachdem Sie Ihren Code zu tcx.js hinzugefügt haben, stellen Sie sicher, dass Sie eine harte Aktualisierung durchführen (Umschalt+Aktualisieren).
Öffnen Sie nun AEM, klicken Sie mit der rechten Maustaste und klicken Sie auf Inspect
Gehen Sie zu Quellen und suchen Sie nach Ihrer [node_name].js
-Datei (z. B. extensions.js). Führen Sie ein Steuerelement / Befehl + D aus, um nach Ihrer Datei zu suchen. Wenn die .js
-Datei mit dem JS-Code vorhanden ist, den Sie aus dist/guides-extension.umd.cjs
oder dist/guides-extension.js
eingefügt haben, ist das Setup abgeschlossen.