Erste Schritte – Entwicklertutorial

In diesem Tutorial lernen Sie alles über ein neues Adobe Experience Manager(AEM)-Projekt. In zehn bis zwanzig Minuten haben Sie Ihre eigene Site erstellt und können eigene Inhalte, Stile und neue Bausteine erstellen, in der Vorschau ansehen und veröffentlichen.

Voraussetzungen:

In diesem Tutorial werden macOS, Chrome und Visual Studio Code als Entwicklungsumgebung verwendet. Die Screenshots und Anweisungen spiegeln diese Einrichtung wider. Sie können ein anderes Betriebssystem, einen anderen Browser und einen anderen Code-Editor verwenden. Die Benutzeroberfläche, die Sie sehen, und die Schritte, die Sie ausführen müssen, können jedoch entsprechend variieren.

Erste Schritte mit der Vorlage für das Vorlagen-Repository

Die schnellste und einfachste Möglichkeit, AEM Best Practices zu folgen, besteht darin, Ihr Repository mithilfe des Boilerplate-GitHub-Repositorys als Vorlage zu erstellen.

https://github.com/adobe/aem-boilerplate

Klicken Sie einfach auf Use this template Schaltfläche und wählen Sie Create a new repositoryund wählen Sie aus, wo Sie dieses Repository erstellen möchten.

Es wird empfohlen, das Repository auf public.

Der einzige verbleibende Schritt in GitHub ist die Installation der GitHub-Anwendung zur AEM von Code-Synchronisierungen in Ihrem Repository durch Besuch dieses Links: https://github.com/apps/aem-code-sync/installations/new

Im Repository access Stellen Sie sicher, dass Sie in den Einstellungen der AEM Code Sync App Only select Repositories (nicht All Repositories). Wählen Sie dann Ihr neu erstelltes Repository aus und klicken Sie auf Save.

Hinweis: Wenn Sie Github Enterprise mit IP-Filterung verwenden, können Sie die folgende IP zur Zulassungsliste hinzufügen: 3.227.118.73

Herzlichen Glückwunsch! Sie haben eine neue Website, die auf https://<branch>--<repo>--<owner>.hlx.page/ Im obigen Beispiel lautet das https://main--my-website--lighthouse100.hlx.page/

Verknüpfen Sie Ihre eigene Inhaltsquelle mit Google Drive.

In Ihrer Abspaltung des Boilerplate-GitHub-Repositorys verweist die Site auf eine vorhandene Inhaltsquelle in Google Drive. Siehe dieser Ordner für einige Beispielinhalte.

Dieser Inhalt ist schreibgeschützt, kann jedoch in den Ordner "Google Drive"kopiert werden, um als Ausgangspunkt zu dienen.

Um eigene Inhalte zu erstellen, erstellen Sie einen Ordner in Ihrem eigenen Google-Laufwerk und geben Sie den Ordner für den Adobe Experience Manager-Benutzer (helix@adobe.com).

Eine gute Möglichkeit, mit der Erstellung Ihres eigenen Inhalts zu beginnen, ist das Kopieren index, nav und footer aus dem Beispielinhalt erstellen und sich mit der Inhaltsstruktur vertraut machen. nav und footer werden in einem Projekt nicht häufig geändert und weisen eine spezielle Struktur auf. Die meisten Dateien in einem Projekt sehen ähnlicher aus wie index.

Öffnen Sie die Dateien und kopieren Sie den gesamten Inhalt in die entsprechenden Dateien in Ihr eigenes Google-Laufwerk. Sie können die Dateien auch herunterladen über Download All oder laden Sie einzelne Dateien herunter. Denken Sie jedoch daran, die heruntergeladenen .docx -Dateien in native Google-Dokumente zurück, wenn Sie sie in Ihren Ordner auf Ihrem Google-Laufwerk hochladen.

Nachdem Sie jetzt über Ihren Inhalt verfügen, müssen Sie diesen Inhalt mit Ihrem GitHub-Repository verbinden. Ändern Sie dazu die Referenz in fstab.yaml in Ihrem GitHub-Repository auf den Ordner, den Sie soeben freigegeben haben.
Kopieren/Einfügen Sie die Ordner-URL von Ihrem Google-Laufwerk in . fstab.yaml.

Beachten Sie, dass Sie nach dieser Änderung 404 not found Fehler, da Ihre Inhalte noch nicht in der Vorschau angezeigt wurden. Im nächsten Abschnitt erfahren Sie, wie Sie mit der Bearbeitung und Vorschau Ihres Inhalts beginnen. Wenn Sie index, nav und footer Alle drei Dokumente sind separate Dokumente mit eigenen Vorschau- und Veröffentlichungszyklen. Stellen Sie daher bei Bedarf sicher, dass Sie alle Dokumente in der Vorschau anzeigen (und veröffentlichen).

Übertragen Sie Ihre Änderungen und Sie haben Ihre eigene Inhaltsquelle auf Ihre Website geladen.

Vorschau erstellen und Inhalt veröffentlichen

Nach Abschluss des letzten Schritts ist Ihre neue Inhaltsquelle nicht leer, aber es wurde kein Inhalt in die preview oder live -Bühnen, was bedeutet, dass Ihre Website 404 s bedient.

Um eine Inhaltsvorschau anzuzeigen, muss ein Autor die Sidekick Chrome-Erweiterung installieren. Suchen Sie die Chrome-Erweiterung hier.

Nachdem Sie die Erweiterung zu Chrome hinzugefügt haben, vergessen Sie nicht, sie zu veröffentlichen. Dadurch wird es einfacher, sie zu finden.

Um die Chrome-Erweiterung einzurichten, navigieren Sie zum Ordner mit dem zuvor freigegebenen Google-Laufwerk, klicken Sie auf das Erweiterungssymbol in der Browser-Symbolleiste und wählen Sie Add this project.

Sobald die Erweiterung installiert und Ihr Projekt hinzugefügt wurde, können Sie Ihre Inhalte auf Ihrem Google-Laufwerk in der Vorschau anzeigen und veröffentlichen.

Wählen Sie alle drei Dokumente aus und aktivieren Sie die AEM Sidekick, indem Sie auf Ihre eingefügte Erweiterung klicken. Eine neue Symbolleiste wird angezeigt. Klicken Sie auf preview oder publish -Schaltflächen werden den entsprechenden Vorgang Trigger.

Öffnen Sie die index doc erstellen und einige Änderungen vornehmen. Aktivieren Sie die Sidekick, indem Sie auf Ihre eingefügte Erweiterung klicken und dann auf die Preview -Schaltfläche, über die der Vorschauvorgang Trigger und eine neue Registerkarte mit der Vorschau-Darstellung des Inhalts geöffnet wird.

Entwickeln von Stil und Funktionalität

Um mit der Entwicklung zu beginnen, ist es am einfachsten, die AEM Befehlszeilenschnittstelle (CLI) zu installieren und Ihr Repository mithilfe der folgenden Methoden lokal zu klonen.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

Ändern Sie von dort in Ihren Projektordner und starten Sie Ihre lokale Entwicklungsumgebung mit den folgenden Schritten.

cd <repo>
aem up

Wird geöffnet http://localhost:3000/ und Sie sind bereit, Änderungen vorzunehmen.
Ein guter Ausgangspunkt ist im blocks -Ordner, in dem sich der Großteil des Stils und Codes für ein Projekt befindet. Ändern Sie einfach die .css oder .js und Sie sollten die Änderungen in Ihrem Browser sofort sehen.

Sobald Sie bereit sind, Ihre Änderungen zu übertragen, verwenden Sie einfach Git, um Ihren Code hinzuzufügen, zu übertragen und in Ihre Vorschau zu übertragen (https://<branch>--<repo>--<owner>.hlx.page/) und Produktion (https://<branch>--<repo>--<owner>.hlx.live/) Sites.

Das war's, du hast es geschafft! Congrats, Ihre erste Site läuft. Wenn Sie Hilfe im Tutorial benötigen, wenden Sie sich an in unseren Discover-Kanal eintreten oder Kontaktieren Sie uns.