Erstellen einer Site aus einer Vorlage

Erfahren Sie, wie Sie mithilfe einer Site-Vorlage schnell eine neue AEM-Site erstellen können.

Die bisherige Entwicklung

Im vorherigen Dokument der AEM-Journey zur schnellen Site-Erstellung, Grundlegendes zu Cloud Manager und zum Workflow für die schnelle Site-Erstellung, haben Sie sich mit Cloud Manager vertraut gemacht und erfahren, wie sich der Prozess zur schnellen Site-Erstellung zusammensetzt. Sie sollten jetzt:

  • Wissen, wie AEM Sites und Cloud Manager zusammenarbeiten, um die Front-End-Entwicklung zu erleichtern.
  • Erfahren haben, dass der Front-End-Anpassungsschritt vollständig von AEM entkoppelt ist und keine AEM-Kenntnisse erfordert.

Dieser Artikel baut auf diesen Grundlagen auf. Sie können also den ersten Konfigurationsschritt durchführen und eine neue Site aus einer Vorlage erstellen, die Sie später mithilfe von Front-End-Tools anpassen können.

Ziel

In diesem Dokument erfahren Sie, wie Sie mithilfe einer Site-Vorlage schnell eine neue AEM-Site erstellen. Nach dem Lesen sollten Sie:

  • Wissen, wie Sie AEM-Site-Vorlagen abrufen.
  • Wissen, wie Sie mit einer Vorlage eine neue Site erstellen.
  • Erfahren haben, wie Sie die Vorlage von Ihrer neuen Site herunterladen, um sie für den Front-End-Entwickler bereitzustellen.

Verantwortliche Rolle

Dieser Teil der Journey gilt für den AEM-Administrator.

Site-Vorlagen

Site-Vorlagen bieten die Möglichkeit, grundlegende Site-Inhalte in einem handlichen und wiederverwendbaren Paket zu kombinieren. Site-Vorlagen enthalten in der Regel grundlegende Site-Inhalte und -Struktur sowie Site-Styling-Informationen, um neue Sites schnell live zu schalten. Die eigentliche Struktur sieht wie folgt aus:

  • files: Ordner mit dem Benutzeroberflächen-Kit, der XD-Datei und möglicherweise anderen Dateien
  • previews: Ordner mit Screenshots der Site-Vorlage
  • site: Inhaltspaket des Inhalts, der für jede aus dieser Vorlage erstellte Site kopiert wird, z. B. Seitenvorlagen und Seiten.
  • theme: Quellen des Vorlagen-Designs, um das Aussehen der Site zu ändern, einschließlich CSS, JavaScript usw.

Vorlagen sind leistungsstark, da sie wiederverwendbar sind, sodass Ihre Inhaltsautoren schnell eine Site erstellen können. Und da Sie in Ihrer AEM-Installation mehrere Vorlagen zur Verfügung haben können, können Sie flexibel verschiedene geschäftliche Anforderungen erfüllen.

HINWEIS

Die Site-Vorlage darf nicht mit Seitenvorlagen verwechselt werden. Die hier beschriebenen Site-Vorlagen definieren die Gesamtstruktur einer Site. Eine Seitenvorlage definiert die Struktur und den anfänglichen Inhalt einer einzelnen Seite.

Abrufen einer Site-Vorlage

Am einfachsten beginnen Sie, indem Sie die neueste Version der AEM-Standard-Site-Vorlage aus dem GitHub-Repository herunterladen.

Nach dem Herunterladen können Sie sie wie jedes andere Paket in Ihre AEM-Umgebung hochladen. Im Abschnitt Zusätzliche Ressourcen finden Sie Details zur Arbeit mit Paketen, wenn Sie weitere Informationen zu diesem Thema benötigen.

TIPP

Die AEM-Standard-Site-Vorlage kann an die Anforderungen Ihres Projekts angepasst werden und die Notwendigkeit weiterer Anpassungen vermeiden. Dies sprengt jedoch den Rahmen dieser Journey. Weitere Informationen finden Sie in der GitHub-Dokumentation zur Standard-Site-Vorlage.

TIPP

Sie können die Vorlage auch als Teil Ihres Projekt-Workflows aus der Quelle erstellen. Dies sprengt jedoch den Rahmen dieser Journey. Weitere Informationen finden Sie in der GitHub-Dokumentation zur Standard-Site-Vorlage.

Installieren einer Site-Vorlage

Die Verwendung einer Vorlage zur Erstellung einer neuen Site ist sehr einfach.

  1. Melden Sie sich bei Ihrer AEM-Authoring-Umgebung an und navigieren Sie zur Sites-Konsole

    • https://<your-author-environment>.adobeaemcloud.com/sites.html/content
  2. Tippen oder klicken Sie oben rechts im Bildschirm auf Erstellen und wählen Sie aus dem Dropdown-Menü Site aus Vorlage.

    Erstellen einer neuen Site aus einer Vorlage

  3. Tippen oder klicken Sie im Assistenten zum Erstellen einer Site oben in der linken Spalte auf Importieren.

    Assistent zur Site-Erstellung

  4. Suchen Sie im Datei-Browser nach der Vorlage, die Sie heruntergeladen haben, und tippen oder klicken Sie auf Hochladen.

  5. Nach dem Hochladen wird sie in der Liste der verfügbaren Vorlagen angezeigt. Tippen oder klicken Sie auf die Vorlage, um sie auszuwählen (dadurch werden auch Informationen über die Vorlage in der rechten Spalte angezeigt), und tippen oder klicken Sie dann auf Weiter.

    Auswählen einer Vorlage

  6. Geben Sie einen Titel für die Site ein. Ein Site-Name kann angegeben werden oder wird aus dem Titel generiert, wenn er weggelassen wird.

    • Der Titel der Site wird in der Titelleiste des Browsers angezeigt.
    • Der Site-Name wird Teil der URL.
  7. Tippen oder klicken Sie auf Erstellen. Die neue Site wird aus der Site-Vorlage erstellt.

    Details der neuen Site

  8. Tippen oder klicken Sie im angezeigten Bestätigungsdialogfeld auf Fertig.

    Dialogfeld „Erfolg“

  9. In der Sites-Konsole sind die neuen Sites sichtbar und in ihnen kann navigiert werden, um die von der Vorlage definierte grundlegende Struktur zu untersuchen.

    Neue Site-Struktur

Inhaltsautoren können jetzt mit der Bearbeitung beginnen.

Ist eine weitere Anpassung erforderlich?

Site-Vorlagen sind sehr leistungsstark und flexibel und können in beliebiger Anzahl für ein Projekt erstellt werden, was eine einfache Erstellung von Site-Varianten ermöglicht. Je nachdem, welcher Grad von Anpassungen bereits an der von Ihnen verwendeten Site-Vorlage vorgenommen wurde, müssen Sie möglicherweise nicht einmal zusätzliche Front-End-Anpassungen vornehmen.

  • Wenn Ihre Site keine zusätzliche Anpassung erfordert, haben Sie es geschafft. Ihre Journey endet hier!
  • Wenn Sie weiterhin zusätzliche Front-End-Anpassungen benötigen oder einfach den gesamten Prozess verstehen möchten, falls Sie später Anpassungen benötigen, lesen Sie bitte weiter.

Beispielseite

Wenn Sie eine zusätzliche Front-End-Anpassung benötigen, sollten Sie beachten, dass der Front-End-Entwickler möglicherweise nicht mit den Details Ihres Inhalts vertraut ist. Daher ist es empfehlenswert, dem Entwickler einen Pfad zu typischen Inhalten zur Verfügung zu stellen, die als Referenz verwendet werden können, wenn das Design angepasst wird. Ein typisches Beispiel ist die Startseite für die primäre Sprache der Site.

  1. Navigieren Sie im Sitebrowser zur Startseite der primären Sprache der Site, tippen oder klicken Sie dann auf die Seite, um sie auszuwählen, und tippen oder klicken Sie dann in der Menüleiste auf Bearbeiten.

    Typische Startseite

  2. Wählen Sie im Editor in der Symbolleiste die Schaltfläche Seiteninformationen und dann Als veröffentlicht anzeigen.

    Bearbeiten der Startseite

  3. Kopieren Sie in der sich öffnenden Registerkarte den Pfad des Inhalts aus der Adressleiste.  Er sieht in etwa so aus: /content/<your-site>/en/home.html?wcmmode=disabled.

    Startseite

  4. Speichern Sie den Pfad, um ihn später dem Front-End-Entwickler bereitzustellen.

Herunterladen des Designs

Nachdem die Site erstellt wurde, kann das von der Vorlage generierte Design der Site heruntergeladen und dem Front-End-Entwickler zur Anpassung bereitgestellt werden.

  1. Zeigen Sie in der Sites-Konsole auf die Site-Leiste.

    Anzeigen der Site-Leiste

  2. Tippen oder klicken Sie auf das Stammverzeichnis der neuen Site und tippen oder klicken Sie in der Site-Leiste auf Design-Quellen herunterladen.

    Herunterladen von Design-Quellen

Sie haben jetzt eine Kopie der Quelldateien des Designs in Ihren Download-Dateien.

Einrichten des Proxy-Benutzers

Damit der Front-End-Entwickler die Anpassungen anhand des tatsächlichen AEM-Inhalts von Ihrer Site in der Vorschau anzeigen kann, müssen Sie einen Proxy-Benutzer einrichten.

  1. Navigieren Sie in AEM in der Hauptnavigation zu Tools -> Sicherheit -> Benutzer.

  2. Tippen oder klicken Sie in der Benutzerverwaltungskonsole auf Erstellen.

    Benutzerverwaltungskonsole

  3. Im Fenster Neuen Benutzer erstellen müssen Sie mindestens Folgendes angeben:

    • ID – Notieren Sie sich diesen Wert, da Sie ihn dem Front-End-Entwickler bereitstellen müssen.
    • Passwort – Speichern Sie diesen Wert sicher in einem Passwort-Vault, da Sie ihn dem Front-End-Entwickler bereitstellen müssen.

    Neue Benutzerdetails

  4. Fügen Sie auf der Registerkarte Gruppen den Proxy-Benutzer zur Gruppe contributors hinzu.

    • Durch die Eingabe des Begriffs contributors wird in AEM die Funktion zur automatischen Vervollständigung ausgelöst, damit die Gruppe leicht ausgewählt werden kann.

    Hinzufügen zur Gruppe

  5. Tippen oder klicken Sie auf Speichern und schließen.

Sie haben die Konfiguration abgeschlossen. Inhaltsautoren können jetzt mit der Erstellung von Inhalten auf der Site beginnen. Die Vorbereitung für die Front-End-Anpassung beginnt im nächsten Schritt der Journey.

Wie geht es weiter

Nachdem Sie nun diesen Teil der AEM-Journey zur schnellen Site-Erstellung abgeschlossen haben, sollten Sie:

  • Wissen, wie Sie AEM-Site-Vorlagen abrufen.
  • Wissen, wie Sie mit einer Vorlage eine neue Site erstellen.
  • Erfahren haben, wie Sie die Vorlage von Ihrer neuen Site herunterladen, um sie für den Front-End-Entwickler bereitzustellen.

Fahren Sie aufbauend auf diesen Kenntnissen mit der AEM-Journey zur schnellen Site-Erstellung fort, indem Sie als Nächstes das Dokument Einrichten der Pipeline lesen. Darin erstellen Sie eine Front-End-Pipeline, um die Anpassung des Designs Ihrer Site zu verwalten.

Zusätzliche Ressourcen

Es wird zwar empfohlen, mit dem nächsten Teil der Journey zur schnellen Site-Erstellung fortzufahren, indem Sie das Dokument Einrichten der Pipeline lesen. Im Folgenden finden Sie einige zusätzliche optionale Ressourcen, die einige in diesem Dokument erwähnte Konzepte vertiefen. Aber sie sind nicht erforderlich, um die Journey fortzusetzen.

  • AEM-Standard-Site-Vorlage – Dies ist das GitHub-Repository der AEM-Standard-Site-Vorlage.
  • Erstellen und Organisieren von Seiten – In diesem Handbuch wird beschrieben, wie Sie Seiten Ihrer AEM-Site verwalten, wenn Sie sie nach der Erstellung aus der Vorlage weiter anpassen möchten.
  • Arbeiten mit Paketen – Pakete ermöglichen den Import und Export von Repository-Inhalten. In diesem Dokument wird erläutert, wie Sie mit Paketen in AEM 6.5 arbeiten. Dies gilt auch für AEMaaCS.
  • Dokumentation zur Site-Administration – Weitere Informationen zu den Funktionen des Tools für die schnelle Site-Erstellung finden Sie in den technischen Dokumenten zur Site-Erstellung.

Auf dieser Seite