So fügen Sie eine Seite in AEM Edge Delivery Services hinzu

Wenn Sie gerade das offizielle Erste-Schritte-Tutorial von Edge Deliver Services (im Folgenden EDS) abgeschlossen haben, fragen Sie sich vielleicht, wie Sie die gerade erstellte Website erweitern können. In diesem Artikel erfahren Sie, wie Sie eine neue Seite erstellen und auf Ihrer AEM-Website veröffentlichen. Dieser Artikel setzt voraus, dass Sie das ursprüngliche Tutorial abgeschlossen haben und über eine funktionierende Website mit der in Ihrem Browser installierten AEM Sidekick-Erweiterung verfügen.

Erstellen Sie zunächst eine neue Datei in Ihrem Google Drive

Wenn Sie Ihre neue Datei erstellen, werden Sie aufgefordert, „Erstellen und freigeben“ auszuwählen, da Sie Ihren Ordner im offiziellen Tutorial bereits mit helix@adobe.com geteilt haben. Durch die Freigabe des Ordners und damit der darin enthaltenen Dokumente kann EDS Inhalte von Ihrem Google Drive anzeigen und auf Ihre Website übertragen. Klicken Sie auf „Erstellen und freigeben“ und beginnen Sie mit der Bearbeitung Ihres neuen Dokuments.

Das Erste, worauf Sie beim Bearbeiten eines Dokuments in einem EDS-Projekt achten müssen, ist der Name des Dokuments. Dieser Name wird zum Erstellen der URL verwendet, unter der die Seite gespeichert ist.

Die Haupt-URL für das Projekt, die Sie in den Screenshots dieses Blogs sehen, lautet beispielsweise https://main--drews-franklin-demo--drew-cummings.hlx.live/ .

Wenn ich ein neues Dokument mit dem Namen „Neue Seite“ erstelle, lautet die URL, unter der diese Seite nach der Veröffentlichung existiert, https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. Beachten Sie, dass alle generierten URLs klein geschrieben sind, auch wenn der Name des Dokuments groß geschrieben ist. Achten Sie aus Gründen der Lesbarkeit und Navigation darauf, dass Ihre Dokumentnamen kurz und relevant sind.

Aktualisieren Sie den Titel Ihres Dokuments in „Neue Seite“

Fügen wir nun oben in unserem Dokument einen Titel hinzu. Setzen Sie Ihren Text auf „Überschrift 1“ und geben Sie Ihren Titel ein.

Schauen wir uns an, wie das auf der Website aussieht. Gehen Sie einfach zur generierten URL, in meinem Fall https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page , und sehen Sie, wie es aussieht.

Oh nein! Wenn Sie das sehen, geraten Sie nicht in Panik. So sieht ein „Seite nicht gefunden“-Fehler in der Standard-EDS-Demo aus. Unsere Website kann unsere Seite derzeit nicht finden, da wir sie noch nicht in der Vorschau angezeigt und veröffentlicht haben. Navigieren Sie zurück zu Ihrem Dokument und klicken Sie auf die AEM Sidekick-Erweiterung, das Symbol ganz links im Screenshot unten.

Nach einem Moment sollte Ihre Hilfssymbolleiste angezeigt werden. Im linken Bereich sollten Sie eine Schaltfläche „Vorschau“ mit einem roten Punkt bemerken. Dieser rote Punkt zeigt an, dass neuer Inhalt bereitgestellt und auf die Website übertragen werden muss. Klicken Sie einfach auf diese Schaltfläche und sehen Sie sich die Seite an, die für Sie geladen wird.

Dies ist die Vorschau Ihrer neuen Seite. So wird Ihre Seite auf der „Live“-Site aussehen, sobald Sie sie veröffentlichen. Es ist wichtig zu beachten, dass Inhalte, die noch nicht veröffentlicht wurden, nicht auf der Live-Seite erscheinen und dass eine noch nicht veröffentlichte Seite auch nicht auf der Live-Website erscheint. So können Sie mit Inhalten experimentieren und sie nach Ihren Wünschen anpassen, ohne dass die Benutzer Ihrer Site sie sehen, bis Sie bereit sind, sie zu veröffentlichen. Lassen wir diese Seite vorerst unveröffentlicht und kehren wir zum Google-Dokument zurück, um weitere Inhalte hinzuzufügen.

In ihrer jetzigen Form ist unsere Seite eher schlicht. Lassen Sie uns ihr mit einem Bild etwas Farbe verleihen. Der Einfachheit halber verwenden wir das blaue DNA-Bild von der Beispielseite.

Klicken Sie auf „Vorschau“ und sehen Sie, wie es aussieht.

Sieht gut aus! Wenn Sie nicht möchten, dass der Text über das Bild gelegt wird, platzieren Sie das Bild einfach unter Ihrem Überschriftentext im Dokument, anstatt darüber. Dann erhalten Sie eine Seite, die so aussieht.

Die Textüberlagerung erfolgt nur für das erste Bild im Artikel und nur bei der anfänglichen Formatierung, d. h. mit dem Text im Stil „Titel“ oder „Überschrift 1“ direkt unter dem Bild.

Fügen wir diesem Artikel nun Textinhalte hinzu. Ich verwende Lorem Ipsum, einen lateinischen Text, der traditionell in der Verlagsbranche zum Experimentieren mit Textlayouts verwendet wird. Lorem Ipsum ermöglicht es uns, zu sehen, wie arabische Alphabetinhalte auf einer Seite aussehen, ohne durch versehentliches Lesen abgelenkt zu werden. Sie können stattdessen gerne jeden beliebigen Textinhalt hinzufügen. So sieht es in meinem Google-Dokument aus:

Und so sieht es auf meiner Vorschauseite aus:

Zum Schluss wollen wir uns ansehen, wie ein Bild aussieht, wenn es in den Inhalt der Seite eingefügt wird. Ich füge nach dem ersten Absatz eines der Bilder von der Demoseite hinzu, um zu demonstrieren, wie es auf der folgenden Site aussehen wird:

Es ist zu beachten, dass EDS Inhalte aus dem Google-Dokument abruft und diese zum Generieren von HTML-Dateien verwendet, die die Website erstellen. Daher korreliert die Größe des Bilds im Google-Dokument nicht mit der Größe des Bilds auf der Vorschau-/Liveseite. Wenn Sie die Bildgröße auf der Site anpassen möchten, müssen Sie die native Auflösung des Bilds anpassen.

Jetzt, da wir eine Seite haben, die wir der Welt gerne zeigen, müssen wir vor der Veröffentlichung noch einen letzten Schritt erledigen. Ich möchte den Titel dieser Seite in den Metadaten von „Meine neue Seite“ in „Demoseite“ ändern, ohne den Titel meines Artikels zu ändern. Ich möchte den Metadaten auch eine Beschreibung hinzufügen, damit die Seite für Suchmaschinen leichter zu finden ist. Dazu müssen wir einen Metadatenblock hinzufügen.

Am einfachsten fügen Sie einen Metadatenblock hinzu, indem Sie den Block von der Demo-Homepage kopieren und einfügen. Wenn Sie jedoch einen von Grund auf neu erstellen möchten, führe ich Sie durch den Vorgang.

Fügen Sie zunächst am Ende Ihres Dokuments eine 2x3-Tabelle ein. Markieren Sie die Zellen in der ersten Zeile, klicken Sie mit der rechten Maustaste und wählen Sie „Zellen zusammenführen“.

Geben Sie „Metadaten“ in die obere Zeile ein und geben Sie dann „Titel“ und „Beschreibung“ in die linken Zellen der nächsten beiden Zeilen ein. Geben Sie rechts neben der Zelle „Titel“ den gewünschten Titel und rechts neben der Zelle „Beschreibung“ die gewünschte Beschreibung ein. Das Endergebnis sollte ungefähr so ​​aussehen:

Sehen Sie sich jetzt die Seite in der Vorschau an. Sie werden feststellen, dass sich der Inhalt der Seite überhaupt nicht geändert hat. Wenn Sie sich jedoch die Registerkarte in Chrome ansehen, wird unser neuer Titel anstelle des vorherigen Standardtitels aufgeführt.

Wenn wir die HTML-Datei der Webseite untersuchen, können wir sehen, dass sowohl unser Titel als auch unsere Beschreibung als Eigenschaften der Webseite vorhanden sind

Sie sind bereit zum Veröffentlichen! Klicken Sie auf der linken Seite Ihrer AEM Sidekick-Erweiterung, die auf der Vorschauseite angezeigt wird, auf die Schaltfläche „Veröffentlichen“ und sehen Sie sich Ihre neue Live-Webseite auf Ihrer Website an.

Herzlichen Glückwunsch zum Hinzufügen einer Seite zu Ihrer Website! Wenn Sie die URL dieser Seite vor der Veröffentlichung bereits besucht und die Fehlermeldung „404 Seite nicht gefunden“ erhalten haben, besteht die Möglichkeit, dass Sie diese Fehlermeldung auch nach der Veröffentlichung noch sehen. Dies kann verschiedene Gründe haben, aber es sei denn, Sie haben eine Fehlermeldung von der AEM Sidekick-Erweiterung erhalten, ist es unwahrscheinlich, dass Ihr Inhalt tatsächlich durchgekommen ist. Warten Sie einfach ein oder zwei Minuten, bis die Seite aktualisiert ist, und Sie sollten Ihre veröffentlichte Seite sehen.

Wenn Ihnen dieses Tutorial gefallen hat und Sie mehr über AEM-Produkte erfahren möchten, lesen Sie hier unseren Artikel darüber, was AEM ist.

Über den Autor

Kontaktieren Sie uns

Podcast-Episoden