DokumentationAEM GuidesDokumentation zu AEM Guides

Installieren und Verwenden des AEM Guides-Erweiterungspakets

Last update: Mon Feb 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

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

  1. 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.

  2. Jetzt in der index.ts-Datei im src/ :

    • 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 nach tcx extensions
    • Siehe Beispiel-/src/index.ts

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

Ausgabe erstellen

Hinzufügen der Anpassung zu AEM

  • Zu CRXDE crx/de/index.jsp#/
  • Erstellen Sie unter dem Ordner apps einen neuen Knoten des Typs cq:ClientLibraryFolder

Ordnerstruktur

  • Wählen Sie im properties des Knotens Multi fügen Sie die folgende Eigenschaft hinzu
    Name: categories
    Typ: String []
    Wert: apps.fmdita.review_overrides, apps.fmdita.xml_editor.page_overrides
NOTE
Für die vorletzte Benutzeroberfläche wären die Werte: apps.fmdita.penultimate.xml_editor.page_overrides und apps.fmdita.review_overrides

Ordnereigenschaften

  • 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 aus dist/guides-extension.umd.cjs oder dist/guides-extension.js hinzu. Erstellen Sie nun eine neue Datei js.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 aus dist/build.css hinzu. Erstellen Sie nun eine neue Datei css.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

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178