Vorschau von nicht veröffentlichtem Inhalt mit DatoCMS

Das Setup

Als Beispiel nehmen wir an, wir haben einen Blog, dessen Blogposts mit DatoCMS erfasst werden. Die Blogposts werden im post-Model gespeichert. Das Model hat in den Einstellungen Enable draft/published system? aktiviert.

Wir können folgenden fetch-Request an die Content Delivery API von DatoCMS senden, um einen Blogbeitrag zu laden.

query PostDetailQuery {
  post(filter: { slug: { eq: "preview-content-with-datocms" } }) {
    title
    lead
    content {
      value
    }
  }
}

Standardmässig werden nur Blogposts angezeigt, deren "Veröffentlichungsstatus" auf Veröffentlicht gesetzt ist.

Abrufen von nicht-veröffentlichtem Inhalt

Die Content Delivery API bietet einige praktische Request-Header, um anzugeben, was zurückgeliefert werden soll und was nicht.

Für unseren Anwendungsfall müssen wir den X-Include-Drafts-Header verwenden, welcher auf true gesetzt werden kann. Mit diesem Header im Request gesetzt erhalten wir nun auch die unveröffentlichten Blogposts.

Preview-Webseite aufsetzen

Die einfachste Möglichkeit, den Redakteuren unveröffentlichte Inhalte anzuzeigen, besteht darin, eine zweite Website einzurichten, die mit der Produktionswebsite identisch ist, bei Anfragen an DatoCMS jedoch den X-Include-Drafts-Header auf true gesetzt hat. Dazu erstellen wir normalerweise eine preview.my-website.ch-Subdomain und verweisen diese auf die neue Vorschau-Webseite.

Um dies noch einfacher zu gestalten, entwickeln wir unsere Seiten mit einer Umgebungsvariable, welche definiert, ob die Website unveröffentlichte Inhalte anzeigen soll oder nicht. Diese Variable könnte beispielsweise DATOCMS_INCLUDE_DRAFTS heissen. Nun können wir die fetch-Header entsprechend dieser Variable dynamisch festlegen.

fetch('https://graphql.datocms.com/', {
  method: 'POST',
  headers: {
    'X-Include-Drafts': env.DATOCMS_INCLUDE_DRAFTS === 'true' ? true : undefined,
    Authorization: `Bearer ${
      env.DATOCMS_INCLUDE_DRAFTS === 'true'
        ? env.DATOCMS_DRAFT_CONTENT_CDA_TOKEN
        : env.DATOCMS_PUBLISHED_CONTENT_CDA_TOKEN
    }`,
  },
  ...
});

Separate API-Tokens

Vielleicht ist dir aufgefallen, dass wir je nachdem, ob wir unveröffentlichte Inhalte anzeigen oder nicht, unterschiedliche API-Tokens im fetch-Request oben verwenden. Dies ist eine bewährte Vorgehensweise, da es für Nutzer der Produktionswebsite (welche das DATOCMS_PUBLISHED_CONTENT_CDA_TOKEN verwendet) nicht möglich sein sollte, unveröffentlichte Inhalte abzurufen (wenn das Token auch im Client verwendet wird).

Vorschau-Website nur für zugelassene Benutzer zugänglich machen

Je nach Website kann es gefährlich sein, wenn nicht-veröffentlichte Inhalte für die Öffentlichkeit zugänglich sind, da dadurch sensible Informationen (wie zum Beispiel eine wichtige Ankündigung) zu früh bekannt werden könnten. Aus diesem Grund solltest du die Vorschau-Website so schützen, dass nur zugelassene Benutzer darauf zugreifen können. Dies kann beispielsweise durch das Whitelisten von IP-Adressen oder (zumindest) durch die Einrichtung eines Basic-Auths auf der Vorschau-Website erfolgen.

Den Veröffentlichungsstatus für den Betrachter sichtbar machen

Um Verwirrung bei den Besuchern der Website zu vermeiden, ist es sinnvoll, diesem deutlich darzustellen, ob der Inhalt bereits veröffentlicht wurde oder nicht. Zu diesem Zweck stellt die Content Delivery API für jedes Modell (für das das Enable draft/published system aktiviert ist) ein technisches Feld namens _status zur Verfügung. Dieses Feld kann einen der folgenden Werte annehmen:

• draft: Der Blogpost ist noch nicht veröffentlicht

• published: Der Blogpost ist veröffentlicht

• updated: Der Blogpost hat unveröffentlichte Änderungen

Auf unseren Webseiten zeigen wir oft einen "DRAFT"-Präfix vor dem Titel des Elements an, wenn dieses noch nicht veröffentlicht ist (_status === 'draft').

Vorschau-Webseite "side-by-side" im DatoCMS-Editor anzeigen

Anstatt die Vorschau-Website in einem separaten Tab neben dem DatoCMS-Backend zu öffnen, gibt es auch ein wirklich cooles Plugin namens Web Previews, mit dem die Vorschau-Website direkt neben dem Content-Editor angezeigt werden kann.

Damit das Plugin funktioniert, muss die Website einen JSON-Endpunkt bereitstellen, welcher die URL zur Detailseite des aktuell angezeigten DatoCMS-Datensatzes zurückgibt. Sobald ein Datensatz in DatoCMS zur Bearbeitung geöffnet wird, sendet das Plugin eine Anfrage an diesen Endpunkt mit dem aktuellen Datensatz als Inhalt. Der Endpunkt gibt die URL zurück, unter welcher dieser Datensatz auf der Website angezeigt wird. Diese URL wird dann in einer Seitenleiste neben dem Editor angezeigt.

Das Plugin bietet ebenfalls eine Option zum automatischen Neuladen der Website, sobald sich der Datensatz ändert. Wenn diese Funktion aktiviert ist, müssen die Content-Editoren die Website bei der Änderung des Datensatzes nicht mehr selbst neu laden.

In den offiziellen DatoCMS-Starterkits findest du Implementationsbeispiele für die gängigsten Frameworks. Du findest diese hier: https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews#implementation-examples

Geschafft!

Wie du sehen kannst, ist die Vorschau unveröffentlichter Inhalte mit DatoCMS als Content-Management-System ganz einfach. Bei Fragen oder Anregungen zu diesem Thema darfst du dich natürlich gerne bei uns melden.

Ausblick: Visual Editing

Seit kurzem geht DatoCMS sogar noch einen Schritt weiter: Mit dem neuen Visual Editing-Feature können Redakteure Inhalte direkt auf der Website anklicken und in DatoCMS bearbeiten. Zusammen mit dem bereits erwähnten Web Previews-Plugin können die Änderungen dann gleich in Echtzeit angezeigt werden. Mehr dazu im offiziellen Produktupdate von DatoCMS.