Blog in Svelte mit Headless Oracle Content Management erstellen

Einführung

Svelte ist ein radikaler neuer Ansatz zum Erstellen von Benutzeroberflächen. Während traditionelle Frameworks wie React und Vue den Großteil ihrer Arbeit im Browser ausführen, verschiebt Svelte die Arbeit in einen Kompilierungsschritt, der beim Erstellen Ihrer App geschieht. Sapper ist ein Anwendungs-Framework, das von Svelte unterstützt wird und Routing, serverseitiges Rendering und statische Sitegenerierung bereitstellt. Aber was passiert, wenn Sie ein Content-Management-System (CMS) benötigen, um all Ihre Inhalte zu bedienen? Glücklicherweise bietet Oracle Content Management mit den umfassenden, Headless-CMS-Funktionen eine elegante Lösung für Ihre Anforderungen in Bezug auf Inhaltsverwaltung und -Governance.

In diesem Tutorial erstellen wir einen einfachen Blog in Svelte, indem wir Oracle Content Management als Headless CMS und sein Softwareentwicklungskit (SDK) für die Inhaltsbereitstellung in JavaScript verwenden. Dieses Svelte-Beispiel ist auf GitHub verfügbar.

Das Tutorial besteht aus drei Schritten:

  1. Oracle Content Management vorbereiten
  2. Blog in Svelte erstellen
  3. Vorbereitung der Anwendung auf das Deployment

Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zuerst die folgenden Informationen lesen:

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

Unser Aufbau

Unser Blog wird aus einer dreiseitigen Seite bestehen, auf der Besucher Blog-Artikel erkunden können, die in Themen organisiert sind. Die erste Seite, die Homepage, besteht aus Branding (Unternehmensname und Logo), einigen Links und einer Liste von Blog-Themen.

Im Folgenden finden Sie den Endstatus unseres Tutorials, einen einfachen Svelte-Blog, der Inhalte von Oracle Content Management konsumiert:

https://headless.mycontentdemo.com/samples/oce-svelte-blog-sample

So sieht die Homepage am Ende dieses Tutorials aus:

Diese Abbildung zeigt die Homepage für die Cafe Supremo-Demosite mit einer Liste der verfügbaren Themen.

Die zweite Seite, die Themaseite, zeigt eine Vorschau jedes Blogartikels an, der zu dem Thema gehört. So sieht eine einzelne Themenseite aus:

Diese Abbildung zeigt eine Themenseite mit dem Namen "Rezepte" mit einer Liste der verfügbaren Artikel für dieses Thema.

Zuletzt enthält die Artikelseite den letzten Blogartikel, einschließlich Informationen zum Autor des Blogs. So sieht eine einzelne Artikelseite aus:

Diese Abbildung zeigt eine einzelne Artikelseite mit dem Inhalt und einer Autorreferenz.

Um fortzufahren, müssen Sie ein aktives Abonnement für Oracle Content Management haben und mit der Rolle "Inhaltsadministrator" angemeldet sein.

Aufgabe 1: Oracle Content Management vorbereiten

Wenn noch keine Oracle Content Management-Instanz vorhanden ist, finden Sie unter Schnellstart Informationen zur Registrierung für Oracle Cloud, zur Bereitstellung einer Oracle Content Management-Instanz und zur Konfiguration von Oracle Content Management als Headless CMS.

Für dieses Tutorial haben Sie zwei Möglichkeiten, ein Contentmodell zu erstellen. Es ist ein herunterladbares Asset Pack verfügbar, das Ihr leeres Repository mit Inhaltstypen und zugehörigen Inhalten ausfüllt. Sie können auch Ihr eigenes Contentmodell und Ihren eigenen Inhalt erstellen.

So bereiten Sie Oracle Content Management vor:

  1. Erstellen Sie einen Kanal und ein Asset-Repository.
  2. Erstellen Sie ein Contentmodell mit einer der beiden folgenden Methoden:

Kanal- und Asset-Repository erstellen

Sie müssen zunächst einen Kanal und ein Asset-Repository in Oracle Content Management erstellen, damit Sie Inhalte veröffentlichen können.

So erstellen Sie einen Kanal und ein Asset-Repository in Oracle Content Management:

  1. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.

  2. Wählen Sie im linken Navigationsmenü die Option Inhalt und dann in der Auswahlliste im Seitenheader die Option Kanäle veröffentlichen aus.

    Diese Abbildung zeigt die Option "Veröffentlichungskanäle", die im Dropdown-Menü im Header der Inhaltsseite ausgewählt wurde.

  3. Klicken Sie in der oberen rechten Ecke auf Create, um einen neuen Kanal zu erstellen. Benennen Sie den Kanal "OCEGettingStartedChannel" für dieses Tutorial, und behalten Sie den Zugriff öffentlich. Klicken Sie auf Save, um den Channel zu erstellen.

    Diese Abbildung zeigt den Bereich für die Veröffentlichungskanaldefinition mit dem Wert "OCEGettingStartedChannel" im Feld für den Kanalnamen.

  4. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie in der Auswahlliste im Seitenheader die Option Repositorys aus.

    Diese Abbildung zeigt die Option "Repositorys", die im Dropdown-Menü im Header der Inhaltsseite ausgewählt wurde.

  5. Klicken Sie in der oberen rechten Ecke auf Erstellen, um ein neues Asset-Repository zu erstellen. Benennen Sie das Asset-Repository "OCEGettingStartedRepository" für den Zweck dieses Tutorials.

    Diese Abbildung zeigt den Bereich für die Repository-Definition mit "OCEGettingStartedRepository" im Feld für den Repository-Namen.

  6. Wählen Sie im Feld Veröffentlichungskanäle den Kanal OCEGettingStartedChannel aus, um Oracle Content Management anzugeben, dass Inhalte im Repository OCEGettingStartedRepository im Kanal OCEGettingStartedChannel veröffentlicht werden können. Klicken Sie anschließend auf Speichern.

    Diese Abbildung zeigt den Bereich für die Repository-Definition mit "OCEGettingStartedChannel" im Feld "Veröffentlichungskanäle".

Contentmodelle erstellen

Im nächsten Schritt erstellen Sie ein Contentmodell. Sie können eine von zwei Methoden verwenden:

Oracle Content Management-Beispielassetpaket importieren

Sie können ein vorkonfiguriertes Oracle Content Management-Beispielassetspack herunterladen, das alle erforderlichen Inhaltstypen und Assets für dieses Tutorial enthält. Gegebenenfalls können Sie auch ein eigenes Inhaltsmodell erstellen, anstatt das Beispielassets herunterzuladen.

Sie können eine Kopie des Inhalts, den wir in diesem Tutorial verwenden, aus dem Oracle Content Management Samples Asset Pack hochladen. Auf diese Weise können Sie mit den Inhaltstypen experimentieren und den Inhalt ändern. Wenn Sie das Oracle Content Management Samples Asset Pack importieren möchten, können Sie das Asset Pack-Archiv, OCESamplesAssetPack.zip herunterladen und in ein Verzeichnis Ihrer Wahl extrahieren:

  1. Laden Sie das Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) von der Oracle Content Management-Seite Downloads herunter. Extrahieren Sie die heruntergeladene ZIP-Datei in ein Verzeichnis auf Ihrem Computer. Nach der Extraktion enthält dieser Speicherort eine Datei namens OCEGettingStarted_data.zip.

  2. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.

  3. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie in der Auswahlliste im Seitenheader die Option Repositorys aus. Wählen Sie jetzt OCEGettingStartedRepository aus, und klicken Sie in der oberen Aktionsleiste auf die Schaltfläche Inhalt importieren.

    Diese Abbildung zeigt die Seite "Repositorys", wobei das Element OCEGettingStartedRepository ausgewählt ist.

  4. Laden Sie OCEGettingStarted_data.zip vom lokalen Rechner in den Ordner Dokumente hoch.

    Diese Abbildung zeigt den Bildschirm für die Uploadbestätigung für die Datei OCEGettingStarted_data.zip.

  5. Wählen Sie nach dem Hochladen OCEGettingStarted_data.zip aus, und klicken Sie auf OK, um den Inhalt in das Asset-Repository zu importieren.

    Diese Abbildung zeigt die ausgewählte OCEGettingStarted_data.zip-Datei mit aktivierter Schaltfläche "OK".

  6. Nachdem der Inhalt erfolgreich importiert wurde, navigieren Sie zur Seite Assets, und öffnen Sie das Repository OCEGettingStartedRepository. Alle zugehörigen Bilder und Inhaltselemente wurden nun dem Asset-Repository hinzugefügt.

    Diese Abbildung zeigt das Repository OCEGettingStartedRepository mit allen gerade importierten Assets.

  7. Klicken Sie oben links auf Alle auswählen und dann auf Veröffentlichen, um alle importierten Assets zum Veröffentlichungskanal hinzuzufügen, den Sie zuvor erstellt haben, OCEGettingStartedChannel.

    Diese Abbildung zeigt das Repository OCEGettingStartedRepository, wobei alle Assets ausgewählt sind und die Option "Veröffentlichen" in der Aktionsleiste sichtbar ist.

  8. Vor der Veröffentlichung müssen Sie alle Assets validieren. Fügen Sie zuerst OCEGettingStartedChannel als ausgewählten Kanal hinzu, und klicken Sie dann auf die Schaltfläche Validieren.

    Diese Abbildung zeigt die Seite "Validierungsergebnisse", wobei der Kanal OCEGettingStartedChannel im Feld "Kanäle" hinzugefügt, alle zu validierenden Assets und die Schaltfläche "Validieren" aktiviert sind.

  9. Nachdem die Assets validiert wurden, können Sie alle Assets im ausgewählten Kanal veröffentlichen, indem Sie oben rechts auf die Schaltfläche Veröffentlichen klicken.

    Diese Abbildung zeigt die Seite "Validierungsergebnisse", wobei der Kanal OCEGettingStartedChannel im Feld "Kanäle" hinzugefügt, alle Assets validiert und die Schaltfläche "Veröffentlichen" aktiviert ist.

Danach können Sie auf der Seite Anlagen sehen, dass alle Assets veröffentlicht wurden. (Sie können dies mit dem Symbol über dem Assetnamen erklären.)

Diese Abbildung zeigt die Seite "Assets" mit allen Assets.

Nachdem Sie das Oracle Content Management Samples Asset Pack importiert haben, können Sie mit dem Blog in Svelte erstellen beginnen.

Eigenes Contentmodell erstellen

Anstatt das Oracle Content Management-Beispielassetpaket zu importieren, können Sie auch ein eigenes Inhaltsmodell erstellen.

Für dieses Tutorial verwenden wir einen Inhaltstyp namens "OCEGettingStartedHomePage", um die Homepage für unseren Blog zu erstellen. Diese Homepage besteht aus Branding (Unternehmensname und Logo), einigen URLs für Links und einer Liste von Blog-Themen, die auf der Seite enthalten sein sollten.

Diese Abbildung zeigt die Homepage für die Cafe Supremo-Demosite.

So erstellen Sie Inhaltstypen für das Contentmodell:

  1. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
  2. Wählen Sie im linken Navigationsmenü Inhalt und dann Assettypen aus der Auswahlliste im Seitenheader.
  3. Klicken Sie rechts oben auf Erstellen.
  4. Wählen Sie diese Option, um einen Inhaltstyp (kein digitaler Assettyp) zu erstellen. Wiederholen Sie diesen Schritt für alle erforderlichen Inhaltstypen.

Diese Abbildung zeigt das Dialogfeld "Assettyp erstellen" in der Oracle Content Management-Webbenutzeroberfläche.

Es werden vier Inhaltstypen mit jeweils einer eigenen Gruppe von Feldern erstellt:

Der erste Inhaltstyp OCEGettingStartedHomePage muss die folgenden Felder enthalten:

Anzeigename Feldtyp Erforderlich Rechnername
Unternehmensname Einwertiges Textfeld X company_name
Firmenlogo Einwertiges Textfeld X company_logo
Themen Mehrfachwert-Referenzfeld X Themen
Kontakt-URL Einwertiges Textfeld X contact_url
Info URL Einwertiges Textfeld X about_url

Die Inhaltstypdefinition OCEGettingStartedHomePage sollte folgendermaßen aussehen:

Diese Abbildung zeigt die Definition für den Inhaltstyp "OCEGettingStartedHomePage". Sie enthält die folgenden Datenfelder: Firmenname, Unternehmenslogo, Themen, Personen-URL und Info-URL.

Der zweite Inhaltstyp OCEGettingStartedTopic muss das folgende Feld enthalten:

Anzeigename Feldtyp Erforderlich Rechnername
Thumbnail Bildfeld mit einem Wert X Thumbnail

Der Inhaltstyp OCEGettingStartedTopic sollte folgendermaßen aussehen:

Diese Abbildung zeigt die Definition für den Inhaltstyp "OCEGettingStartedTopic". Es enthält dieses Datenfeld: Thumbnail.

Der dritte Inhaltstyp OCEGettingStartedAuthor muss die folgenden Felder enthalten:

Anzeigename Feldtyp Erforderlich Rechnername
Avatar Bildfeld mit einem Wert X Avatar

Der Inhaltstyp OCEGettingStartedAuthor sollte folgendermaßen aussehen:

Diese Abbildung zeigt die Definition für den Inhaltstyp "OCEGettingStartedAuthor". Sie enthält dieses Datenfeld: Avatar.

Der vierte und letzte Inhaltstyp OCEGettingStartedArticle muss die folgenden Felder enthalten:

Anzeigename Feldtyp Erforderlich Rechnername
Veröffentlichungsdatum Datumsfeld mit einem Wert X published_name
Autor Einzelwertreferenzfeld X Autor
Bild Bildfeld mit einem Wert X Bild
Bildunterschrift Einwertiges Textfeld X image_caption
Artikelinhalt Einzelwert-Großtextfeld X article_content
Thema Einzelwertreferenzfeld X Thema

Der Inhaltstyp OCEGettingStartedArticle sollte folgendermaßen aussehen:

Diese Abbildung zeigt die Definition für den Inhaltstyp "OCEGettingStartedArticlePage". Sie enthält folgende Datenfelder: Veröffentlichungsdatum, Autor, Bild, Bildtitel, Artikelinhalt und Thema.

Nachdem Sie die Inhaltstypen erstellt haben, können Sie diese Inhaltstypen dem zuvor erstellten Repository hinzufügen: OCEGettingStartedRepository:

  1. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
  2. Navigieren Sie zu OCEGettingStartedRepository.
  3. Bearbeiten Sie das Repository, und geben Sie unter Assettypen alle vier neu erstellten Inhaltstypen an. Klicken Sie auf Speichern, um die Änderungen zu speichern.

Diese Abbildung zeigt die Seite "Repository bearbeiten" in Oracle Content Management mit den vier neu erstellten Inhaltstypen, die dem Repository OCEGettingStartedRepository zugeordnet sind.

Nachdem Sie die Inhaltstypen zum Repository hinzugefügt haben, können Sie das Repository OCEGettingStartedRepository auf der Seite Assets öffnen und mit dem Erstellen der Inhaltselemente für alle Inhaltstypen beginnen.

Diese Abbildung zeigt Inhaltselemente auf der Seite "Assets" in der Oracle Content Management-Webbenutzeroberfläche mit Optionen auf der linken Seite für Collections, Kanäle, Sprachen, Typen, Inhaltselementauswahl und Status.

Aufgabe 2: Blog in Svelte erstellen

Um unseren Oracle Content Management-Inhalt in einer serverseitigen gerenderten Svelte-Anwendung zu nutzen, können Sie das Svelte-Blogbeispiel verwenden, das als Open Source-Repository auf GitHub verfügbar ist.

Hinweis: Beachten Sie, dass die Verwendung des Svelte-Beispiels optional ist. Wir verwenden es in diesem Tutorial für einen schnellen Einstieg. Sie können auch Ihre eigene Svelte-Anwendung erstellen.

So bauen Sie den Blog in Svelte:

  1. Beispiel-Repository klonen und Abhängigkeiten installieren
  2. Svelte-Anwendung konfigurieren
  3. Mit dem Oracle Content Management Content-SDK arbeiten
  4. Inhalt mit dem Content-SDK abrufen

Beispiel-Repository klonen und Abhängigkeiten installieren

Das Svelte-Blogbeispiel ist als Open-Source-Repository auf GitHub verfügbar.

Sie müssen zunächst das Beispiel von GitHub auf den lokalen Rechner klonen und Ihr Verzeichnis in die Repository Root ändern:

git clone https://github.com/oracle/oce-svelte-blog-sample.git
    cd oce-svelte-blog-sample

Nachdem Sie die Codebasis erstellt haben, müssen Sie Abhängigkeiten für die Anwendung herunterladen. Führen Sie den folgenden Befehl aus dem Root-Verzeichnis aus:

npm install

Svelte-Anwendung konfigurieren

In diesem Svelte-Blogbeispiel müssen Sie einige Informationen konfigurieren, damit Ihr Oracle Content Management Content-SDK (und alle anderen Anforderungen) die richtige Instanz-URL und API-Version mit dem richtigen Kanaltoken als Ziel festlegen kann. Diese Werte werden in src/scripts/server-config-utils.js verwendet, um einen neuen Zustellungsclient zu instanziieren.

Diese Anwendung verwendet eine .env-Datei, die von Webpack gelesen wird, wenn sie die Client- und Serveranwendungen bündelt. Mit webpack.DefinePlugin können alle aus der .env-Datei gelesenen Werte überall in der Anwendung zur Verfügung gestellt werden.

Öffnen Sie die .env-Datei in einem Texteditor. Folgende Informationen werden angezeigt:

# The connection details for the Oracle Content Management server to be used for this application
    SERVER_URL=https://samples.mycontentdemo.com
    API_VERSION=v1.1
    CHANNEL_TOKEN=47c9fb78774d4485bc7090bf7b955632

Ändern Sie jedes Schlüssel/Wert-Paar entsprechend Ihrer Instanz-URL, der gewünschten API-Version und dem mit Ihrem Veröffentlichungskanal verknüpften Kanaltoken. Der Kanal für dieses Tutorial ist OCEGettingStartedChannel.

Mit dem Oracle Content Management Content-SDK arbeiten

Oracle Content Management bietet ein Content-SDK in zwei verschiedenen Versionen an, je nachdem, ob Sie es in einem clientseitigen Kontext (Browser-Bundle) oder in einem serverseitigen Kontext (Node.js) einsetzen.

Beide SDKs sind als Open-Source-Librarys auf GitHub verfügbar:

Darüber hinaus ist das Content-SDK als NPM-Modul mit jeder Instanz von Oracle Content Management verfügbar, wobei {server} unten die Instanz-URL darstellt (Informationen zum Abrufen der Instanz-URL finden Sie unter Schnellstart):

Sie können auch das minimierte clientseitige Bundle verwenden: {server}/_sitesclouddelivery/renderer/app/sdk/js/content.min.js

Inhalt mit dem Content-SDK abrufen

Jetzt können wir das Oracle Content Management Content-SDK verwenden, um Inhalte abzurufen, sodass wir es in unserer Svelte-Anwendung wiedergeben können.

Der Ordner src/scripts enthält den Code zum Abrufen von Daten aus Oracle Content Management mit dem Content-SDK.

Die Datei src/scripts/server-config-utils.js importiert das Oracle Content Management Content-SDK und erstellt dann einen Zustellungsclient mit der in .env angegebenen Konfiguration.

Mit dem folgenden Befehl wird das SDK importiert:

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

Der folgende Befehl erstellt den Zustellungsclient:

return createDeliveryClient(serverconfig);

Die Datei src/scripts/services.js enthält den gesamten Code zum Abrufen von Daten für die Anwendung. Es gibt eine Hauptfunktion für jede Seitenkomponente in der Anwendung, um alle Daten für diese Seite abzurufen. Zum Rendern der Bilder stellt services.js eine Helper-Methode bereit, mit der das Quellset für ein Asset abgerufen wird, das aus den Formatvarianten für das Asset erstellt wird.

function getSourceSet(asset) {
      const urls = {};
      urls.srcset = '';
      urls.jpgSrcset = '';
      if (asset.fields && asset.fields.renditions) {
        asset.fields.renditions.forEach((rendition) => {
          addRendition(urls, rendition, 'jpg');
          addRendition(urls, rendition, 'webp');
        });
      }
      // add the native rendition to the srcset as well
      urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
      urls.native = asset.fields.native.links[0].href;
      urls.width = asset.fields.metadata.width;
      urls.height = asset.fields.metadata.height;
      return urls;
    }

Homepage-Daten

Die Homepage benötigt mehrere Datenaufrufe, um alle Daten abzurufen:

  1. Zuerst werden Elemente im in .env angegebenen Kanal abgefragt.
  2. Für jedes Themenelement werden dessen Details abgerufen.

Öffnen Sie src/scripts/services.js, und suchen Sie die Funktion getTopicsListPageData(), die alle Daten für die Homepage abruft.

Die fetchHomePage()-Funktion, die von der getTopicsListPageData()-Funktion aufgerufen wird, ruft alle Elemente im Kanal ab. Dabei werden die Logo-ID, der Firmenname, die Informations- und Kontakt-URLs sowie eine Liste der Themen abgerufen. Die Funktion fetchTopic() wird dann für jede Themen-ID aufgerufen, um die vollständigen Themendetails abzurufen.

Die folgenden Funktionen werden aufgerufen, um alle für die Homepage benötigten Daten abzurufen:

export function getTopicsListPageData() {
      const client = getClient();
      return fetchHomePage(client)
        .then((data) => (
          getRenditionURLs(client, data.logoID)
            .then((renditionUrls) => {
              data.companyThumbnailRenditionUrls = renditionUrls;
              return data;
            })
        ));
    }

    function fetchHomePage(client) {
      return client.queryItems({
        q: '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
      }).then((data) => {
        const logoID = data.items[0].fields.company_logo.id;
        const title = data.items[0].fields.company_name;
        const aboutUrl = data.items[0].fields.about_url;
        const contactUrl = data.items[0].fields.contact_url;

        const { topics } = data.items[0].fields;
        const promises = [];

        topics.forEach((origTopic) => {
          // add a promise to the total list of promises to get the full topic details
          promises.push(
            fetchTopic(client, origTopic.id)
              .then((topic) => topic),
          );
        });

        // execute all the promises returning a single dimension array of all
        // of the topics and the other home page data
        return Promise.all(promises)
          .then((allTopics) => (
            {
              logoID,
              companyTitle: title,
              aboutUrl,
              contactUrl,
              topics: flattenArray(allTopics),
            }
          )).catch((error) => logError('Fetching topics failed', error));
      }).catch((error) => logError('Fetching home page data failed', error));
    }

    // Fetch details about the specific topic
    function fetchTopic(client, topicId) {
      return client.getItem({
        id: topicId,
        expand: 'fields.thumbnail',
      }).then((topic) => {
        topic.renditionUrls = getSourceSet(topic.fields.thumbnail);
        return topic;
      }).catch((error) => logError('Fetching topic failed', error));
    }

    function getRenditionURLs(client, identifier) {
      return client.getItem({
        id: identifier,
        expand: 'fields.renditions',
      }).then((asset) => getSourceSet(asset))
        .catch((error) => logError('Fetching Rendition URLs failed', error));
    }

Themenseite

Die Themenseite erhält eine Themen-ID und erfordert mehrere Datenaufrufe, um alle zugehörigen Daten abzurufen:

  1. Alle Artikel für das angegebene Thema abrufen.
  2. Rufen Sie für jeden Artikel die Formatvarianten-URLs ab.

Öffnen Sie src/scripts/services.js, und suchen Sie die Funktion fetchTopicArticles(topicId), mit der alle Daten für die Themenseite abgerufen werden.

export function fetchTopicArticles(topicId) {
      const client = getClient();
      return client.queryItems({
        q: `(type eq "OCEGettingStartedArticle" AND fields.topic eq "${topicId}")`,
        orderBy: 'fields.published_date:desc',
      }).then((data) => {
        const promises = [];
        const articles = data.items;

        articles.forEach((article) => {
          // add a promise to the total list of promises to get the article url
          promises.push(
            getRenditionURLs(client, article.fields.image.id)
              .then((renditionUrls) => {
                article.renditionUrls = renditionUrls;
                return {
                  ...article,
                };
              }),
          );
        });

        // execute all the promises and return all the data
        // execute all the promises and return all the data
        return Promise.all(promises)
          .then((allArticles) => ({
            topicId,
            articles: flattenArray(allArticles),
          }));
      }).catch((error) => logError('Fetching topic articles failed', error));
    }

Artikelseite

Die Artikelseite erhält eine Artikel-ID und erfordert mehrere Datenaufrufe, um alle Daten abzurufen:

  1. Rufen Sie die Artikeldetails für den angegebenen Artikel ab.
  2. Rufen Sie für den Artikelautor die Wiedergabe-URLs des Avatars ab.

Öffnen Sie src/scripts/services.js, und suchen Sie die Funktion fetchArticleDetails(articleId), mit der die Daten für die Artikelseite abgerufen werden.

export function fetchArticleDetails(articleId) {
      const client = getClient();
      return client.getItem({
        id: articleId,
        expand: 'all',
      }).then((article) => {
        const title = article.fields.author.name;
        const date = article.fields.published_date;
        const content = article.fields.article_content;
        const imageCaption = article.fields.image_caption;
        const { name } = article;
        const renditionUrls = getSourceSet(article.fields.image);
        const avatarID = article.fields.author.fields.avatar.id;
        // Get the author's avatar image
        return getRenditionURLs(client, avatarID)
          .then((authorRenditionUrls) => (
            // return an object with just the data needed
            {
              id: articleId,
              name,
              title,
              date,
              content,
              imageCaption,
              renditionUrls,
              authorRenditionUrls,
            }
          ));
      }).catch((error) => logError('Fetching article details failed', error));
    }

Nachdem wir unsere Datenabfragen ausgeführt haben, können wir die Antworten in unseren Svelte-Komponenten wiedergeben.

Svelte-Komponenten

Die Bloganwendung unterteilt jede Seite in eine Reihe kleinerer Komponenten.

Die nächsten Abschnitte bieten einen Überblick darüber, wie Svelte unsere Anwendung in jeder unserer Komponenten wiedergibt:

Routen

Seiten in Sapper sind Svelte-Komponenten, die in .svelte-Dateien geschrieben sind. Wenn ein Benutzer die Anwendung zum ersten Mal besucht, wird ihm eine vom Server abgeleitete Version der betreffenden Route sowie ein JavaScript bereitgestellt, das die Seite "hydriert" und einen clientseitigen Router initialisiert. Ab diesem Zeitpunkt wird das Navigieren zu anderen Seiten vollständig auf dem Client für ein schnelles, anwendungsähnliches Gefühl behandelt. Der Dateiname legt die Route fest.

Auf unserer Seite möchten wir drei Routen anbieten:

Die Datei src/routes/index.svelte dient zur Homepage. Die src/routes/articles/[slug].svelte dient der Themenseite und die src/routes/article/[slug].svelte dient der Artikelseite.

TopicsListPage-Komponente

Die Homepage enthält eine Liste der Themen in einem Channel. Sie wird von der Komponente wiedergegeben, die sich unter src/routes/index.svelte befindet.

Die Komponente importiert die API, um Daten aus der Datei services.js abzurufen. Bei preload(), der während der Build-Zeit aufgerufen wird, ruft die Komponente alle Daten ab, die zum Rendern der Homepage erforderlich sind.

<script context="module">
      import { getTopicsListPageData } from "../scripts/services.js";
      export async function preload() {
        const data = await getTopicsListPageData();
        return { data };
      }
    </script>

Headerkomponente

Die Komponente TopicsListPage verwendet die Headerkomponente, um den Unternehmenstitel, das Firmenlogo und die Links "Kontakt"/"Info zu uns" anzuzeigen.

Es befindet sich unter src/components/Header.svelte und empfängt alle seine Daten als Eigenschaften. Es werden keine zusätzlichen Daten vom Server abgerufen.

TopicsListItem-Komponente

Die Komponente TopicsListPage verwendet die Komponente TopicsListItem, um das einzelne Thema in der Liste anzuzeigen.

Die Komponente TopicsListItem, die sich unter src/components/TopicsListItem.svelte befindet, empfängt alle ihre Daten als Eigenschaften. Es werden keine zusätzlichen Daten vom Server abgerufen.

ArticlesListPage-Komponente

Auf der Seite "Thema" werden die Artikel im Thema angezeigt, deren ID an die Komponente im URL übergeben wird. Sie wird von der Komponente ArticlesListPage in src/routes/articles/[slug].svelte wiedergegeben.

Die Komponente importiert die API, um die Daten aus der Datei services.js abzurufen.

<script context="module">
      import { fetchTopicArticles } from "../../scripts/services.js";
      export async function preload(page) {
        const topicId = page.params.slug;
        const topicName = page.query.topicName;
        const articlesData = await fetchTopicArticles(topicId);
        return { topicId, topicName, articlesData };
      }
    </script>

ArticlesListItem-Komponente

Die Komponente ArticlesListPage verwendet die Komponente ArticlesListItem, um die einzelnen Artikel in der Liste anzuzeigen.

Die Komponente ArticlesListItem befindet sich unter src/components/ArticlesListItem.svelte und empfängt alle Daten als Eigenschaften. Es werden keine zusätzlichen Daten vom Server abgerufen.

ArticleDetailsPage-Komponente

Auf der Seite "Artikel" werden Details des Artikels angezeigt, dessen ID an die URL übergeben wird. Sie wird von der Komponente ArticleDetails in src/routes/article/[slug].svelte wiedergegeben.

Die Komponente importiert die API, um die Daten aus der Datei services.js abzurufen.

<script context="module">
      import { fetchArticleDetails } from "../../scripts/services.js";
      export async function preload(page) {
        const articleId = page.params.slug;
        const topicId = page.query.topicId;
        const topicName = page.query.topicName;
        const article = await fetchArticleDetails(articleId);
        return { topicId, topicName, article };
      }
    </script>

Sowohl die Komponenten ArticlesListPage als auch ArticleDetailsPage verwenden die Komponenten "Breadcrumbs" und "Breadcrumb", um die Navigationspfade oben auf der Seite anzuzeigen, sodass der Benutzer zur Seite "Thema" oder zur Homepage zurückkehren kann. Beide Komponenten erhalten alle ihre Daten als Eigenschaften. Sie erhalten keine zusätzlichen Daten vom Server.

Aufgabe 3: Anwendung auf das Deployment vorbereiten

Nachdem wir unsere Svelte-Blogsite erstellt haben, müssen wir sie auf einem lokalen Entwicklungsserver sehen, damit wir Probleme debuggen und eine Vorschau der Anwendung vor dem Go-Live anzeigen können.

Bereiten Sie die Anwendung in drei Schritten auf das Deployment vor:

  1. Erstellen Sie die Anwendung
  2. Anwendung mit Knoten ausführen
  3. Verwenden Sie Skripte, um die Anwendung in der Entwicklung zu erstellen und auszuführen

Anwendung erstellen

Mit Sapper können Sie eine statische Site mit einem Single Zero-config Sapper-Exportbefehl exportieren. Um die Anwendung zu erstellen, führen Sie den folgenden Befehl aus.

npm run export

Dadurch wird ein Sapper-/Exportordner mit einem einsatzbereiten Build Ihrer Site erstellt.

Anwendung mit Knoten ausführen

Nachdem der Erstellungsordner erstellt wurde, können Sie ihn wie folgt starten:

npm run start

Öffnen Sie dann Ihren Browser zu http://localhost:5000, um Ihre Site in Aktion anzuzeigen.

Anwendungen mit Skripten in Entwicklung und Produktion erstellen und ausführen

Die package.json-Datei in der Root des Projekts enthält Skripte, mit denen Sie die Bundles einfacher erstellen und die Anwendung ausführen können.

Entwicklung

Sie können das Entwicklungsskript während der Entwicklung verwenden:

npm run dev

Production

Das Produktionsskript von Sapper wird in zwei Versionen geliefert: Build und Export. Mit dem Befehl "build" wird eine hostfähige Knotenanwendung generiert. Beim Export wird eine statische Version der Site generiert. Für die Produktion können Sie verwenden:

npm run build
    npm run startbuild

Oder bei statischer Version verwenden Sie

npm run export
    npm run start

Schlussfolgerung

In diesem Tutorial haben wir eine Blogsite in Svelte erstellt, die auf GitHub zu finden ist. Diese Site verwendet Oracle Content Management als Headless-CMS. Nachdem Sie Oracle Content Management mit einem Kanal veröffentlichter Inhalte für das Tutorial der Blogsite eingerichtet und konfiguriert haben, wurde die Svelte-Site installiert und ausgeführt, um die erforderlichen Inhalte abzurufen und die Site zu erstellen.

Weitere Informationen zu Svelte finden Sie auf der Svelte-Website.

Machen Sie sich mit wichtigen Oracle Content Management-Konzepten in der Dokumentation vertraut.

Weitere Beispiele finden Sie auf der Seite Oracle Content Management-Beispiele im Oracle Help Center.