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

Wenn Sie gerade das offizielle Tutorial für die ersten Schritte mit 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. In diesem Artikel wird davon ausgegangen, dass Sie das ursprüngliche Tutorial abgeschlossen haben und eine Website ausgeführt wird, auf der die AEM Sidekick-Erweiterung in Ihrem Browser installiert ist.

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

Wenn Sie Ihre neue Datei erstellen, werden Sie aufgefordert, "Erstellen und Freigeben" zu verwenden, da Sie Ihren Ordner bereits im offiziellen Tutorial für [email protected] freigegeben haben. Durch die Freigabe des Ordners und damit der darin enthaltenen Dokumente kann EDS Inhalte aus Ihrem Google Drive anzeigen und auf Ihre Website ziehen. Klicken Sie auf "Erstellen und Teilen" und beginnen Sie mit der Bearbeitung Ihres neuen Dokuments.

Das erste, was Sie beim Bearbeiten eines Dokuments in einem EDS-Projekt beachten sollten, ist der Name des Dokuments. Dieser Name wird verwendet, um die URL zu erstellen, unter der sich die Seite befindet.

Als Beispiel lautet die Haupt-URL für das Projekt, das Sie in den Screenshots dieses Blogs sehen, 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 bei der Veröffentlichung vorhanden ist, https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. Es ist erwähnenswert, dass alle generierten URLs in Kleinbuchstaben geschrieben werden, auch wenn der Name des Dokuments groß geschrieben wird. Achten Sie aus Gründen der Lesbarkeit und Navigation darauf, dass Ihre Dokumentnamen kurz und relevant sind.

Aktualisieren Sie den Titel Ihres Dokuments auf "Neue Seite"

Fügen wir nun einen Titel am Anfang unseres Dokuments hinzu. Setzen Sie Ihren Text auf "Überschrift 1" und schreiben Sie Ihren Titel.

Mal sehen, wie das auf der Website aussieht. Gehen Sie weiter und gehen Sie zu der generierten URL, in meinem Fall https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page, und sehen Sie, wie sie sich auswirkt.

Oh nein! Wenn Sie das sehen, geraten Sie nicht in Panik. So sieht der Fehler "Seite nicht gefunden" 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. Sie sollten eine "Vorschau"-Schaltfläche im linken Teil mit einem roten Punkt bemerken. Dieser rote Punkt zeigt an, dass es neue Inhalte gibt, die bereitgestellt und auf die Website verschoben werden sollen. Klicken Sie 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"-Website aussehen, sobald Sie sie veröffentlichen. Es ist wichtig zu beachten, dass Inhalte, die nicht veröffentlicht wurden, nicht auf der Live-Seite angezeigt werden, und eine Seite, die nicht veröffentlicht wurde, nicht auf der Live-Website angezeigt wird. Auf diese Weise können Sie mit Inhalten experimentieren und Dinge nach Ihren Wünschen anpassen, ohne dass die Benutzer Ihrer Website sie sehen, bis Sie bereit sind, sie zu veröffentlichen. Lassen wir diese Seite vorerst unveröffentlicht und gehen zurück zum Google Doc, um weitere Inhalte hinzuzufügen.

So wie sie jetzt existiert, ist unsere Seite eher schlicht. Fügen wir dem Ganzen mit einem Bild etwas Farbe hinzu. Der Einfachheit halber verwenden wir das blaue DNA-Bild von der Beispielseite.

Klicken Sie auf Vorschau und sehen Sie sich an, 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 statt darüber, und Sie erhalten eine Seite, die wie folgt aussieht.

Die Textüberlagerung wird nur für das erste Bild im Artikel und nur dann angezeigt, wenn der Text wie ursprünglich angezeigt formatiert ist, wobei der Text im Format Titel oder Überschrift 1 direkt unter dem Bild angezeigt wird.

Fügen wir nun diesem Artikel einige Textinhalte hinzu. Ich werde Lorem Ipsum verwenden, einen lateinischen Text, der traditionell in der Verlagsbranche verwendet wird, um mit Textlayouts zu experimentieren. Lorum Ipsum ermöglicht es uns, zu sehen, wie der Inhalt des arabischen Alphabets auf einer Seite aussehen wird, ohne durch versehentliches Lesen abgelenkt zu werden. Fühlen Sie sich frei, stattdessen beliebige Textinhalte hinzuzufügen. So sieht es in meinem Google Doc aus:

Und so sieht es auf meiner Vorschauseite aus:

Schauen wir uns abschließend an, wie ein Bild aussieht, wenn es in einer Linie mit dem Inhalt der Seite platziert wird. Ich füge eines der Bilder von der Demo-Seite nach dem ersten Absatz hinzu, um zu demonstrieren, wie es auf der folgenden Website aussehen wird:

Es ist erwähnenswert, dass EDS Inhalte aus dem Google Doc abruft und sie verwendet, um HTML-Dateien zu generieren, mit denen die Website erstellt wird. Dies hat zur Folge, dass die Größe des Bildes im Google Doc nicht mit der Größe des Bildes auf der Vorschau-/Live-Seite korreliert. Wenn Sie die Bildgröße auf der Website anpassen möchten, müssen Sie die native Auflösung des Bildes anpassen.

Jetzt, da wir eine Seite haben, die wir der Welt zeigen können, haben wir noch einen letzten Schritt, den wir vor der Veröffentlichung erledigen müssen. Ich möchte den Titel dieser Seite in den Metadaten von "Meine neue Seite" in "Demo-Seite" ändern, ohne den Titel meines Artikels zu ändern. Außerdem möchte ich den Metadaten eine Beschreibung hinzufügen, um die Seite für Suchmaschinen leichter auffindbar zu machen. Dazu müssen wir einen Metadatenblock hinzufügen.

Der einfachste Weg, einen Metadatenblock hinzuzufügen, besteht darin, den Block von der Demo-Homepage zu kopieren und einzufügen, aber wenn Sie daran interessiert sind, einen von Grund auf neu zu erstellen, werde ich Sie durch diesen Prozess führen.

Fügen Sie zunächst eine 2X3-Tabelle am Ende Ihres Dokuments 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 oberste 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" ein, wie der Titel lauten soll, und wie die Beschreibung rechts neben der Zelle "Beschreibung" lauten soll. Das Endergebnis sollte in etwa so aussehen:

Machen Sie weiter und sehen Sie sich die Seite jetzt in der Vorschau an. Sie werden feststellen, dass sich der Inhalt der Seite überhaupt nicht geändert hat, aber wenn Sie sich den Tab in Chrome ansehen, wird unser neuer Titel anstelle des Standardtitels aufgeführt, den wir zuvor hatten.

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

Sie sind bereit für die Veröffentlichung! Klicken Sie auf die Schaltfläche "Veröffentlichen" auf der linken Seite Ihrer AEM-Sidekick-Erweiterung, die auf der Vorschauseite angezeigt wird, und sehen Sie Ihre neue Live-Webseite auf Ihrer Website.

Herzlichen Glückwunsch zum Hinzufügen einer Seite zu Ihrer Website! Es besteht die Möglichkeit, dass der Fehler nach der Veröffentlichung immer noch angezeigt wird, wenn Sie die URL dieser Seite vor der Veröffentlichung besucht haben und den Fehler "404 Seite nicht gefunden" erhalten haben. Dies kann aus einer Reihe von Gründen passieren, aber es ist unwahrscheinlich, dass Ihre Inhalte tatsächlich durchgegangen sind, es sei denn, Sie erhalten eine Fehlermeldung von der AEM-Sidekick-Erweiterung. Warten Sie einfach ein oder zwei Minuten, um die Seite zu aktualisieren, 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 unseren Artikel darüber, was AEM hier ist.

Über den Autor

Kontaktieren Sie uns

Podcast-Episoden