Erste Schritte mit Magnolia

Von Martin Drápela

Magnolia

Hinzufügen einer Seite mit Template

Nutzung des Templates zum Erstellen einer neuen Seite

Bringen Sie die Haupt-Benutzeroberfläche von Magnolia wieder in den Vordergrund (oder rufen Sie die Adresse http://localhost:8080/magnoliaAuthor auf).
Wählen Sie die Pages-App aus der EDIT-Zeile.
Erstellen Sie eine neue Seite:
1. Wählen Sie Add page aus der Liste der verfügbaren Aktionen auf der rechten Seite des Arbeitsbereichs.
2. Geben Sie einen neuen Namen für die Seite ein, zum Beispiel »Hello World Page«.
3. Wählen Sie das von Ihnen erstellte »Hello World Template« und klicken Sie auf die Schaltfläche NEXT.
Öffnen Sie die Seite für die Vorschau, indem Sie Preview page aus dem Menü auf der rechten Seite auswählen. Sie sollten Folgendes sehen:

Magnolia

Einfache neu erstellte Seite

Sie haben Ihr erstes Magnolia-Template erstellt, indem Sie ein statisches HTML-Dokument zu ein FreeMarker-Template verarbeitet haben. Beachten Sie, dass Magnolia anstelle der Variable ${def.name} den Namen des Seiten-Templates für diese Seite, also die Zeichenfolge helloworld_templatedefinition verwendet.

Den Inhalt der »Hello, World!«-Seite editierbar machen

Magnolia verwendet Dialoge, um Inhalte zu bearbeiten. Ein Dialog ist ein HTML-Formular mit Eingabefeldern. Redakteure tippen Inhalte in die Felder und der Dialog speichert diese im CMS.

Erstellen einer Dialogdefinition

Eine Dialogdefinition definiert die editierbaren Properties des Templates. Kopieren Sie die untenstehende Dialogdefinition und speichern Sie sie in eine neue Datei unter hello-world/dialogs/pages/helloworld_dialogdefinition.yaml.

form:
  tabs:
    - name: tabText
      label: Texts
      fields:
        - name: title
          class: info.magnolia.ui.form.field.definition.TextFieldDefinition
          label: Title
        - name: introText
          class: info.magnolia.ui.form.field.definition.TextFieldDefinition
          label: Introduction text
          rows: 5
actions:
  commit:
    class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
  cancel:
    class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition

Der Dialog hat zwei Felder:

title: Editiert den Titel der Seite mit einem einfachen Textfeld. Wir werden den Inhalt in den Elementen <title> und <h1> auf der Seite ausgeben.
introText: Editiert den Einführungstext (Absatz). Wir werden den Inhalt dieses Feldes im »html body« rendern.

Referenzierung des Dialogs aus dem Seiten-Template

In der Seiten-Template-Definition wird die Dialog-Property gesetzt (Zeile 5). Der Wert ist eine ID zur Dialogdefinition. Die ID folgt dem Muster: <Modulname>:<relativer Pfad innerhalb des Dialoge-Ordners>.

templateScript: /hello-world/templates/pages/helloworld.ftl
renderType: freemarker
visible: true
title: Hello World Template
dialog: hello-world:pages/helloworld_dialogdefinition