Installieren und Verwenden des AEM Guides-Erweiterungspakets
Erstellt für:
- Benutzende
- Admin
Erweiterungen bieten Ihnen die Möglichkeit, Ihre AEM Guides-App besser an Ihre Anforderungen anzupassen. 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 Möglichkeit, das AEM Guides-Framework per Bootstrapping zu installieren, ist über die Befehlszeilenschnittstelle (CLI)
npx @adobe/create-guides-extension
Hinzufügen von Anpassungscode
-
Fügen Sie Code-Dateien für jede Komponente, die Sie erweitern möchten, im
src/
hinzu. Einige Beispieldateien wurden bereits für Sie hinzugefügt. -
Jetzt in der
index.ts
-Datei imsrc/
:- Importieren Sie die
.ts
Dateien mit den Anpassungen, die Sie in Ihrem Build hinzufügen möchten. - Hinzufügen der Importe zu
window.extension
- Registrieren des
id
der angepassten Komponente und des entsprechenden Imports nachtcx extensions
- Siehe Beispiel-
/src/index.ts
- Importieren Sie die
Erstellen von benutzerdefiniertem Code
-
Führen Sie
npm run build
im Stammverzeichnis aus. Sie erhalten 3 Dateien im Verzeichnis,dist/
:build.css
guides-extension.js
guides-extension.umd.cjs
Hinzufügen der Anpassung zu AEM
- Zu
CRXDE
crx/de/index.jsp#/
- Erstellen Sie unter dem Ordner
apps
einen neuen Knoten des Typscq:ClientLibraryFolder
- Wählen Sie im
properties
des KnotensMulti
fügen Sie die folgende Eigenschaft hinzu
Name:categories
Typ:String []
Wert:apps.fmdita.review_overrides
,apps.fmdita.xml_editor.page_overrides
apps.fmdita.penultimate.xml_editor.page_overrides
und apps.fmdita.review_overrides
- Um das 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 wie folgt lautet:
#base=.
tcx1.js
- Um das erstellte CSS hinzuzufügen, erstellen Sie eine neue Datei, z. B.
tcx1.css
im oben erstellten Knoten. Fügen Sie hier den Code ausdist/build.css
hinzu. Erstellen Sie nun eine neue Dateicss.txt
, hier fügen wir den Namen unserer CSS-Datei hinzu, der in diesem Fall wie folgt 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, führen Sie eine harte Aktualisierung durch (Umschalt+Aktualisieren).
Öffnen Sie jetzt AEM, klicken Sie mit der rechten Maustaste und klicken Sie auf Inspect
Gehen Sie zu Quellen und suchen Sie nach Ihrer [node_name].js
(z. B.: extensions.js). Führen Sie einen Befehl / 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 die Einrichtung abgeschlossen