Effizientes Content Staging in TYPO3 mit Workspaces

David Steeb

Wenn du Inhalte in mehreren Sprachen gleichzeitig veröffentlichen oder aktualisieren oder andere Personen einbeziehen möchtest, um Inhalte vor der Veröffentlichung freizugeben oder zu bearbeiten, dann ist Content Staging die Lösung, nach der du suchst. Wusstest du, dass TYPO3 dies mit dem Workspaces-Modul von Haus aus löst? Du kannst sogar Live-Previews teilen, ohne dass sich die Nutzer in deinem TYPO3-Backend anmelden müssen (sie müssen überhaupt keinen Backend-Zugang haben).

Eine tägliche Herausforderung für Editoren

Der Hauptgrund für die Verwendung eines CMS ist es, den Redakteuren die Möglichkeit zu geben, den Inhalt der eigenen Website zu ändern, ohne die Entwickler mit einzubeziehen. 

Aber was ist, wenn du eine Reihe von Änderungen vornehmen musst, die nur Sinn ergeben, wenn sie zur gleichen Zeit veröffentlicht werden? Was ist, wenn du eine neue Seite zu deiner Website hinzufügen möchtest und andere Personen einbeziehen oder die Genehmigung anderer Abteilungen innerhalb deiner Organisation einholen musst, z.B. die Rechtsabteilung? Wie bereitest du inhaltliche Änderungen an deiner Online-Präsenz vor, die an einem bestimmten Datum in mehreren Sprachen veröffentlicht werden müssen?

Es gibt verschiedene Möglichkeiten für Editoren, das „irgendwie zum Laufen zu bringen“, aber jeder Workaround hat seine Nachteile:

  • Editoren bereiten neue Inhalte auf Seiten vor, die „versteckt“ sind. Während der Inhalt vor deinen normalen Website-Benutzern und Suchmaschinen versteckt ist, kannst du die Seiten anderen Personen nicht zur Genehmigung zeigen, ohne ihnen Zugang zum Backend zu gewähren — die neue Seite ist ohne eine gültige Backend-Benutzersitzung einfach nicht zugänglich. Wenn du außerdem Inhalte über mehrere Seiten hinweg ändern oder spezielle Anzeigeversionen deiner neuen Inhalte korrekturlesen möchtest (wie z.B. Teaserlisten für Nachrichtenartikel), kannst du versteckte Seiten möglicherweise nicht in der Vorschau anzeigen.
  • Editoren bereiten neue Seiten vor und verwenden stattdessen „Im Menü verstecken“. Diese Methode erlaubt es dir zwar, einen Link zur Genehmigung an jemanden ohne Backend-Zugang zu senden, aber abhängig von deiner Website könnten auch regelmäßige Nutzer versehentlich deine neuen Seiten sehen oder dein Inhalt wird von Google indiziert, bevor du dies vorgehabt hast. 
  • Editoren möchten bestehende Seiten aktualisieren. Wir haben alle möglichen Workarounds gesehen, von der Verwendung der Funktion „Inhalt dieser Seite anzeigen“ bis zum Duplizieren ganzer Seiten und dem Aktualisieren einer Kopie der „Live-Version“, um die Änderung vorzubereiten — und einigen anderen noch kreativeren Ideen.

All diese Methoden werden hinfällig, sobald die Änderung nicht nur Seiten und Inhaltselemente betrifft, sondern auch andere Arten von Datensätzen — Nachrichten, Kalendereinträge, Kontakte, Produkte usw.

Wäre es nicht schön, wenn es eine Möglichkeit gäbe, Inhalte auf eine saubere, einfach zu benutzende und leicht verständliche Art und Weise vorzubereiten?

Tatsächlich gibt es eine. Und es gibt sie schon seit langer Zeit. „Workspaces“ ist ein Konzept, das zum Core von TYPO3 gehört. Es ist die perfekte Antwort auf diese — und andere — Anwendungsfälle. Wir nutzen Workspaces ausgiebig, einschließlich in diesem Blog. Also, was ist die Workspaces-Funktion und wie funktioniert sie?

Was ist ein Workspace?

Ein Workspace in TYPO3 ist wie eine separate Umgebung, in der du Inhalte bearbeiten, deine Änderungen testen, deine Änderungen gruppieren und alles, was du im TYPO3 Backend gemacht hast, in einer Vorschau ansehen kannst — ohne deine Live-Website zu verändern. Betrachte es als eine „systeminterne Kopie“ deiner Live-Website, in der du ungestört an deinen Änderungen arbeiten, deine Inhalte neu organisieren und alles vorbereiten kannst, was du veröffentlichen willst — ohne dass du tatsächlich etwas in deiner Live-Instanz veröffentlichst, bis du dazu bereit bist.

Wie funktioniert so ein Workspace?

Für ein erstes Beispiel nehmen wir den Blog-Post, den du gerade liest, und ich zeige dir, wie wir mit TYPO3 arbeiten, bis dieser Post veröffentlicht wird.

Wir benutzen Workspaces und haben einen einfachen „Draft¡-Arbeitsbereich eingerichtet. Mit meinem Editor-Account stelle ich sicher, dass ich im „Draft“-Arbeitsbereich arbeite, bevor ich den Inhalt für diesen Beitrag eintrage. Das Backend hat oben eine grüne Leiste, um dem Redakteur zu verdeutlichen, dass er in einem Workspace arbeitet. (Dein System kann mehrere Workspaces haben, aber mehr darüber in einem späteren Beitrag). 

Wir fügen einen neuen Blog-Post als neue Seite hinzu und fügen alle unsere Inhalte in die englische und später in die deutsche Version der Seite ein. Abgesehen von ein paar sichtbaren Hinweisen, die dem Redakteur anzeigen, dass er in einem Arbeitsbereich arbeitet, und welche Seiten bearbeitet wurden, ist die Handhabung im Backend die gleiche wie bei einer „Standard“- TYPO3-Instanz.

Abbildung 1: Backend-Screenshot mit der grünen oberen Leiste, die eine aktive Workspace-Umgebung anzeigt, und dem Seitenbaum, der eine Änderung im Seitenbaum mit einem farbigen Eintrag zeigt.
Abbildung 1: Backend-Screenshot mit der grünen oberen Leiste, die eine aktive Workspace-Umgebung anzeigt, und dem Seitenbaum, der eine Änderung im Seitenbaum mit einem farbigen Eintrag zeigt.

Vorschaulinks generieren

Wenn wir damit fertig und mit dem Ergebnis zufrieden sind, können wir in das Modul „Workspaces“ wechseln. Das Modul zeigt eine Liste der Änderungen innerhalb des aktuellen Arbeitsbereichs und erlaubt uns, unsere Änderungen auf der Live-Seite zu veröffentlichen. Oben im Modulfenster kann der Redakteur spezielle Vorschaulinks erstellen, um die aktuelle Seite in einer Workspace-Version zu teilen. Standardmäßig sind diese Links 48 Stunden lang gültig, aber du kannst dies in deiner Konfiguration anpassen.

Abbildung 2: Vorschaulinks generieren
Abbildung 2: Vorschaulinks generieren

Wir können diese speziellen Links mit jedem teilen, der unseren Blogbeitrag vor der Veröffentlichung Korrektur lesen möchte. Sobald jemand auf diesen Link klickt, wird der Benutzer in diesen speziellen Workspace eingeloggt (ohne ein Konto oder einen Backend-Login zu benötigen) und erhält eine vollständige, 100% genaue Vorschauversion der Seite, die wir gerade erstellt haben. Aber das ist noch nicht alles: Dies ist nicht nur ein Vorschaulink für diese spezielle Seite, die wir erstellt haben — der Benutzer ist in den Arbeitsbereich eingeloggt. Und dieser Arbeitsbereich ist eine 100%ige Darstellung dessen, wie die Webseite aussehen würde, wenn alle Änderungen, die innerhalb des Arbeitsbereichs vorbereitet wurden, veröffentlicht würden. In unserem Fall wird der Empfänger unseres Links in der Lage sein, den neuen Blog-Post zu lesen, die Sprache zu wechseln, das Menü zu benutzen, die Liste aller Blog-Posts zu sehen — einschließlich des noch unveröffentlichten Posts — und so weiter. Der Benutzer wird nicht nur unsere neue Seite korrekturlesen können, sondern auch alles andere, was sich durch den neu hinzugefügten Inhalt ändern könnte — also zum Beispiel Navigation, Übersichts-Teaser, verwandte Artikel und mehr.

Ziemlich beeindruckend, nicht wahr?

Vorschau der Änderungen und Vergleich mit der Live-Version

Der Redakteur sieht ein Vorschaufenster und je nachdem, was sich geändert hat und welche URL in der Vorschau angezeigt wird, werden ihm einige zusätzliche Funktionen und Optionen angeboten. Eine geteilte Ansicht, um z.B. die aktuelle Version mit der Live-Version zu vergleichen. In unserem einfachen Beispiel können wir auf unsere „Blog“-Seite klicken, die alle neuesten Blog-Einträge auflistet, und die Listenansicht der Live-Instanz mit der Version aus unserem Workspace vergleichen. Es gibt verschiedene Ansichtsoptionen (Slider, Horizontal, Vertikal), zwischen denen du wechseln kannst, je nachdem, welche Darstellung für das Layout deiner Webseite am besten geeignet ist.

Abbildung 3: Screenshot, der eine geteilte Ansicht der Blogübersicht zeigt.
Abbildung 3: Screenshot, der eine geteilte Ansicht der Blogübersicht zeigt.

Beeindruckend. Inzwischen fragst du dich vielleicht: „Warum sollte ich das nicht benutzen?“

Änderungen veröffentlichen

Um unser kleines Beispiel abzuschließen, verzichten wir auf alle Workflow-Optionen, die man bei der Konfiguration seines Arbeitsbereichs hinzufügen kann, und klicken einfach auf den Button „Publish to live“ in der Editor-Vorschau oben. Es wird ein einfaches Formular-Popup angezeigt, mit dem wir Kollegen über den Statuswechsel informieren können, und sobald wir auf „OK“ klicken, werden unsere Änderungen veröffentlicht und unser Blog-Post ist live!

Abbildung 4: Benachrichtigungsoptionen beim Veröffentlichen von Inhalten.
Abbildung 4: Benachrichtigungsoptionen beim Veröffentlichen von Inhalten.

Wie man einen einfachen Workspace einrichtet

Los gehts! So kannst du einen einfachen „Draft“ Workspace einrichten, wie wir ihn für dieses Beispiel genutzt haben:

  • Stelle sicher, dass du die TYPO3 Systemerweiterung „Workspaces“ installiert hast. Wenn diese Extension fehlt, führe composer req typo3/cms-workspaces aus und installiere die Extension, oder bitte dein Entwicklerteam, dies für dich zu tun.
  • Erstelle mit dem „List“-Modul einen neuen Datensatz vom Typ „Workspace“ im Seitenstamm deiner Installation (PID 0). Dazu benötigst du Admin-Rechte.
  • Füge im Formular zum Erstellen eines Datensatzes den Titel deines Arbeitsbereichs hinzu (in unserem Fall „Draft“) und lasse alle anderen Felder frei, um die Standardwerte zu verwenden.
  • Probier es einfach aus — ändere deinen aktiven Arbeitsbereich mit dem Workspace-Switcher-Icon in der oberen Menüleiste.

Es gibt noch mehr!

In diesem Post habe ich einen sehr einfachen Anwendungsfall für die Workspaces-Funktion von TYPO3 gezeigt: Das Erstellen einer neuen Seite, die für die Welt nicht sichtbar ist, das Erstellen von echten Vorschauen, die sich „innerhalb“ deiner Webseite befinden und es dir ermöglichen, wirklich zu beurteilen, was du veröffentlichen willst, und das Erstellen von Vorschaulinks, um anderen Leuten eine integrierte Vorschau dessen zu zeigen, was live geschaltet wird. Das alles vollständig im Designs deiner Webseite, einschließlich Menüs usw. — alles ohne auf irgendwelche Workarounds oder Hacks zurückgreifen zu müssen.

Aber es gibt noch viel mehr zu entdecken: 

  • Erstelle mehrere Workspaces für verschiedene Aufgaben oder Benutzergruppen. 
  • Schränke einzelne Benutzergruppen so ein, dass sie nur in Entwurfs-Arbeitsbereichen arbeiten können, und behalte dir die Möglichkeit vor, die Veröffentlichung in den Live-Zustand an deine Chefredakteure weiterzuleiten. 
  • Füge zusätzliche benutzerdefinierte Stages für deinen Veröffentlichungs-Workflow hinzu, um sicherzustellen, dass verschiedene Abteilungen in deiner Organisation neue Inhalte vor der Veröffentlichung genehmigen. 
  • Bereite eine Reihe von Änderungen vor und veröffentliche sie alle auf einmal. 

Wir arbeiten schon seit langer Zeit mit Workspaces und haben diese Funktion bereits in TYPO3 v4.5 eingesetzt. Es ist eines der am wenigsten genutzten Features unseres Lieblings-CMS. Aus diesem Grund investieren wir viel in die Verbesserung der Funktionalität, in die Beseitigung von Bugs und Inkonsistenzen bei Edge-Cases und in die Optimierung der Arbeit mit Workspaces und haben sogar jemanden angestellt, der sich auf dieses Killer-Feature im TYPO3-Kern konzentriert.

In den kommenden Blog-Posts werden wir detaillierter darauf eingehen, wie man weitere Workflows und benutzerdefinierte Stages einrichtet, und einige weitere Anwendungsfälle aus unseren Projekten zeigen.