Créer un blog à Svelte avec Oracle Content Management en mode Headless

Introduction

Svelte est une nouvelle approche radicale de la création d'interfaces utilisateur. Alors que les cadres traditionnels comme React et Vue font l'essentiel de leur travail dans le navigateur, Svelte se transforme en une étape de compilation qui se produit lorsque vous construisez votre application. Sapper est une structure d'application optimisée par Svelte qui fournit le routage, le rendu côté serveur et la génération de site statique. Mais que se passe-t-il lorsque vous avez besoin d'un système de gestion de contenu (CMS) pour gérer l'ensemble de votre contenu ? Heureusement, Oracle Content Management, avec ses riches fonctionnalités de gestion de contenu en mode Headless, dispose d'une solution idéale pour vos besoins d'administration et de gouvernance de contenu.

Dans ce tutoriel, nous allons créer un blog simple à Svelte en utilisant Oracle Content Management en tant que CMS sans tête et son kit de développement logiciel (SDK, Software Development Kit) pour la diffusion de contenu dans JavaScript. Cet exemple Svelte est disponible sur GitHub.

Le didacticiel comporte trois étapes :

1. Préparer Oracle Content Management
2. Bâtir le blog à Svelte
3. Préparer votre application pour le déploiement

Prérequis

Avant de poursuivre ce tutoriel, nous vous recommandons de lire les informations suivantes en premier :

• Concepts clés
• Référentiels de ressources

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• abonnement à Oracle Content Management
• un compte oracle-content-management doté du rôle Administrateur de contenu
• un ordinateur Windows ou Mac avec Node version 10 ou supérieure

Ce que nous construisons

Notre blog se compose d'un site de trois pages qui permet aux visiteurs d'explorer des articles de blog organisés en thèmes. La première page, la page d'accueil, se compose de la marque (nom et logo de l'entreprise), de certains liens et d'une liste de sujets de blog.

Pour regarder ce que nous construisons, voici l'état de fin de notre tutoriel, un blog Svelte de base qui consomme du contenu d'Oracle Content Management :

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

Voici à quoi ressemblera la page d'accueil à la fin de ce tutoriel :

La deuxième page, la page de sujet, affiche des aperçus de chaque article de blog appartenant au sujet. Voici l'aspect d'une page de sujet :

Enfin, la page d'article affiche l'article de blog final, y compris des informations sur l'auteur du blog. Voici l'aspect d'une page d'article :

Pour continuer, vous devez disposer d'un abonnement actif à Oracle Content Management et être connecté avec le rôle Administrateur de contenu.

Tâche 1 : Préparer Oracle Content Management

Si vous ne disposez pas encore d'une instance Oracle Content Management, reportez-vous à Démarrage rapide pour savoir comment vous inscrire à Oracle Cloud, provisionner une instance Oracle Content Management et configurer Oracle Content Management en tant que CMS sans tête.

Pour ce tutoriel, vous devez créer un modèle de contenu de deux façons. Un pack de ressources téléchargeables est disponible pour remplir votre référentiel vide avec les types de contenu et le contenu associé, ou vous pouvez créer votre propre modèle de contenu et contenu.

Pour préparer Oracle Content Management :

1. Créez un référentiel de canaux et de ressources.
2. Créez un modèle de contenu à l'aide de l'une des deux méthodes suivantes :
   • Méthode 1 : Importer le pack de ressources d'échantillons Oracle Content Management
   • Méthode 2 : Créer votre propre modèle de contenu

Créer un référentiel de canaux et de ressources

Vous devez d'abord créer un canal et un référentiel de ressources dans Oracle Content Management afin de pouvoir publier du contenu.

Pour créer un canal et un référentiel de ressources dans Oracle Content Management, procédez comme suit :

1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

2. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Canaux de publication dans la liste de sélection de l'en-tête de page.

   

3. Dans l'angle supérieur droit, cliquez sur Créer pour créer un canal. Nommez le canal 'OCEGettingStartedChannel' dans le cadre de ce tutoriel, puis conservez l'accès public. Cliquez sur Enregistrer pour créer le canal.

   

4. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page.

   

5. Dans l'angle supérieur droit, cliquez sur Créer pour créer un référentiel de ressources. Nommez le référentiel de ressources 'OCEGettingStartedRepository' dans le cadre de ce tutoriel.

   

6. Dans le champ Canaux de publication, sélectionnez le canal OCEGettingStartedChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEGettingStartedRepository peut être publié sur le canal OCEGettingStartedChannel. Cliquez sur Enregistrer une fois que vous avez terminé.

   

Créer un modèle de contenu

L'étape suivante consiste à créer un modèle de contenu. Vous pouvez utiliser l'une des deux méthodes suivantes :

• Méthode 1 : Importer le pack de ressources d'échantillons Oracle Content Management
• Méthode 2 : Créer votre propre modèle de contenu

Importer le pack de ressources d'échantillons Oracle Content Management

Vous pouvez télécharger un pack de ressources Oracle Content Management préconfiguré contenant tous les types de contenu et toutes les ressources requis pour ce tutoriel. Si vous préférez, vous pouvez également créer votre propre modèle de contenu au lieu de télécharger le pack de ressources échantillon.

Vous pouvez télécharger une copie du contenu que nous utilisons dans ce tutoriel à partir du pack de ressources d'échantillons Oracle Content Management. Vous pourrez ainsi expérimenter les types de contenu et modifier le contenu. Si vous voulez importer le pack de ressources d'échantillons Oracle Content Management, vous pouvez télécharger l'archive de pack de ressources, OCESamplesAssetPack.zip, et l'extraire dans le répertoire de votre choix :

1. Téléchargez le pack de ressources d'échantillons Oracle Content Management (OCESamplesAssetPack.zip) à partir de la page Téléchargements d'Oracle Content Management. Extrayez le fichier ZIP téléchargé vers un emplacement sur votre ordinateur. Après l'extraction, cet emplacement inclut un fichier nommé OCEGettingStarted_data.zip.

2. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

3. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page. Sélectionnez maintenant OCEGettingStartedRepository et cliquez sur le bouton Importer le contenu dans la barre d'actions supérieure.

   

4. Téléchargez OCEGettingStarted_data.zip à partir de votre ordinateur local vers le dossier Documents.

   

5. Une fois téléchargé, sélectionnez OCEGettingStarted_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.

   

6. Une fois le contenu importé, accédez à la page Ressources et ouvrez le référentiel OCEGettingStartedRepository. Vous verrez que toutes les images et tous les éléments de contenu associés ont été ajoutés au référentiel de ressources.

   

7. Cliquez sur Tout sélectionner en haut à gauche, puis sur Publier pour ajouter toutes les ressources importées au canal de publication que vous avez créé précédemment, OCEGettingStartedChannel.

   

8. Avant la publication, vous devez valider toutes les ressources. Ajoutez d'abord OCEGettingStartedChannel en tant que canal sélectionné, puis cliquez sur le bouton Valider.

   

9. Une fois les ressources validées, vous pouvez publier toutes les ressources sur le canal sélectionné en cliquant sur le bouton Publier dans l'angle supérieur droit.

   

Une fois cette opération terminée, vous pouvez voir sur la page Immobilisations que toutes les immobilisations ont été publiées. (Vous pouvez utiliser l'icône située au-dessus du nom de la ressource.)

Après avoir importé le pack de ressources d'échantillons Oracle Content Management, vous pouvez commencer à créer le blog à Svelte.

Créer votre propre modèle de contenu

Au lieu d'importer le pack de ressources d'échantillons Oracle Content Management, vous pouvez également créer votre propre modèle de contenu.

Pour ce tutoriel, nous utilisons un type de contenu appelé "OCEGettingStartedHomePage" pour créer la page d'accueil de notre blog. Cette page d'accueil se compose de la marque (nom de la société et logo), de certaines URL de liens et d'une liste de sujets de blog à inclure dans la page.

Pour créer des types de contenu pour le modèle de contenu :

1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
2. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Types d'immobilisation dans la liste de sélection de l'en-tête de page.
3. Cliquez sur Créer dans l'angle supérieur droit.
4. Choisissez de créer un type de contenu (et non un type de ressource numérique). Répétez cette opération pour tous les types de contenu requis.

Nous allons créer quatre types de contenu, chacun comportant son propre ensemble de champs :

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

Le premier type de contenu, OCEGettingStartedHomePage, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Obligatoire	Nom de l'ordinateur
Nom de la société	Champ de texte à valeur unique	X	company_name
Logo de la société	Champ de texte à valeur unique	X	company_logo
Rubriques	Champ de référence à valeurs multiples	X	rubriques
URL du contact	Champ de texte à valeur unique	X	contact_url
A propos de l'URL	Champ de texte à valeur unique	X	about_url

Voici à quoi votre définition de type de contenu OCEGettingStartedHomePage doit ressembler :

Le deuxième type de contenu, OCEGettingStartedTopic, doit contenir le champ suivant :

Nom d'affichage	Type de champ	Obligatoire	Nom de l'ordinateur
Miniature	Champ d'image à valeur unique	X	miniature

Voici à quoi votre type de contenu OCEGettingStartedTopic doit ressembler :

Le troisième type de contenu, OCEGettingStartedAuthor, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Obligatoire	Nom de l'ordinateur
Avatar	Champ d'image à valeur unique	X	avatar

Voici à quoi votre type de contenu OCEGettingStartedAuthor doit ressembler :

Le quatrième et le dernier type de contenu, OCEGettingStartedArticle, doivent comporter les champs suivants :

Nom d'affichage	Type de champ	Obligatoire	Nom de l'ordinateur
Date de publication	Champ de date à valeur unique	X	published_name
Auteur	Champ de référence à valeur unique	X	auteur
Image	Champ d'image à valeur unique	X	image
Légende d'image	Champ de texte à valeur unique	X	image_caption
Contenu de l'article	Champ de texte long à valeur unique	X	article_content
Sujet	Champ de référence à valeur unique	X	sujet

Voici à quoi votre type de contenu OCEGettingStartedArticle doit ressembler :

Une fois les types de contenu créés, vous pouvez les ajouter au référentiel créé précédemment, OCEGettingStartedRepository :

1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
2. Accédez à OCEGettingStartedRepository.
3. Modifiez le référentiel et, sous Types de ressource, indiquez les quatre nouveaux types de contenu. Cliquez sur le bouton Save (Enregistrer) pour enregistrer vos modifications.

Après avoir ajouté les types de contenu au référentiel, vous pouvez ouvrir le référentiel OCEGettingStartedRepository sur la page Ressources et commencer à créer vos éléments de contenu pour tous les types de contenu.

Tâche 2 : Construire le blog à Svelte

Pour utiliser notre contenu Oracle Content Management dans une application Svelte rendue côté serveur, nous pouvons utiliser l'exemple de blog Svelte, disponible en tant que référentiel open source sur GitHub.

Remarque : N'oubliez pas que l'utilisation de l'exemple Svelte est facultative et que nous l'utilisons dans ce tutoriel pour vous lancer rapidement. Vous pouvez également créer votre propre application Svelte.

Pour construire le blog à Svelte :

1. Cloner le référentiel échantillon et installer les dépendances
2. Configurer l'application Svelte
3. Utiliser le kit SDK Oracle Content Management Content
4. Utiliser le kit SDK Content pour extraire du contenu

Cloner le référentiel échantillon et installer les dépendances

L'exemple de blog Svelte est disponible en tant que référentiel open source sur GitHub.

Vous devez d'abord cloner l'exemple de GitHub vers votre ordinateur local et remplacer votre répertoire par la racine du référentiel :

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

Maintenant que vous disposez de votre base de code, vous devez télécharger les dépendances pour l'application. Exécutez la commande suivante à partir du répertoire racine :

npm install

Configuration de l'application Svelte

Dans cet exemple de blog Svelte, vous devez configurer quelques informations afin que votre kit SDK Oracle Content Management Content (et toutes autres demandes) puisse cibler l'URL d'instance et la version d'API correctes avec le jeton de canal correct. Ces valeurs sont utilisées dans src/scripts/server-config-utils.js pour instancier un nouveau client de distribution.

Cette application utilise un fichier .env lu par Webpack lorsqu'elle regroupe les applications client et serveur. En utilisant webpack.DefinePlugin, toutes les valeurs lues à partir du fichier .env peuvent être mises à disposition partout dans l'application.

Ouvrez le fichier .env dans un éditeur de texte. Les informations suivantes s'affichent :

# 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

Modifiez chaque paire clé-valeur afin qu'elle reflète l'URL de l'instance, la version d'API à cibler et le jeton de canal associé au canal de publication. Le canal de ce tutoriel est OCEGettingStartedChannel.

Utiliser le kit SDK Oracle Content Management Content

Oracle Content Management propose un kit SDK de contenu dans deux versions différentes, selon que vous l'utilisez dans un contexte côté client (groupe de navigateurs) ou dans un contexte côté serveur (Node.js).

Les deux kits SDK sont disponibles en tant que bibliothèques open source sur GitHub :

• Content SDK (navigateur)
• Content SDK (Node.js)

En outre, le kit SDK Content est disponible en tant que module NPM avec chaque instance d'Oracle Content Management, où {server} ci-dessous représente l'URL de l'instance (reportez-vous à Démarrage rapide pour plus d'informations sur l'extraction de l'URL de l'instance) :

• Navigateur : {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-1.1.0.tgz
• Node.js : {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-node-1.1.0.tgz

Vous pouvez également utiliser le bundle côté client miniifié : {server}/_sitesclouddelivery/renderer/app/sdk/js/content.min.js

Utiliser le kit SDK Content pour extraire du contenu

Nous pouvons désormais utiliser le kit SDK Oracle Content Management Content pour extraire le contenu afin de le rendre dans notre application Svelte.

Le dossier src/scripts contient le code permettant d'obtenir des données à partir d'Oracle Content Management à l'aide de Content SDK.

Le fichier src/scripts/server-config-utils.js importe le SDK Oracle Content Management Content, puis crée un client de distribution à l'aide de la configuration indiquée dans .env.

La commande suivante importe le kit SDK :

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

La commande suivante crée le client de distribution :

return createDeliveryClient(serverconfig);

Le fichier src/scripts/services.js contient tout le code permettant d'obtenir les données de l'application. Il existe une fonction principale pour chaque composant de page dans l'application pour obtenir toutes les données de cette page. Pour le rendu des images, services.js fournit une méthode d'aide permettant d'extraire l'ensemble de sources d'une ressource construite à partir des rendus de la ressource.

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;
    }

Données de la page d'accueil

La page d'accueil nécessite plusieurs appels de données pour obtenir toutes ses données :

1. Nous recherchons d'abord les éléments du canal spécifié dans .env.
2. Pour chaque élément de sujet, nous extraisons ses détails.

Ouvrez src/scripts/services.js et recherchez la fonction getTopicsListPageData(), qui obtient toutes les données de la page d'accueil.

La fonction fetchHomePage(), appelée par la fonction getTopicsListPageData(), obtient tous les éléments du canal. Permet d'obtenir l'ID logo, le nom de la société, les URL A propos et Contact, ainsi qu'une liste de sujets. La fonction fetchTopic() est ensuite appelée pour chaque ID de sujet afin d'obtenir les détails complets du sujet.

Les fonctions suivantes sont appelées pour extraire toutes les données nécessaires à la page d'accueil :

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));
    }

Page Sujet

La page de rubrique reçoit un ID de sujet et nécessite plusieurs appels de données pour obtenir toutes ses données :

1. Obtenir tous les articles pour le sujet spécifié.
2. Pour chaque article, obtenez ses URL de rendu.

Ouvrez src/scripts/services.js et recherchez la fonction fetchTopicArticles(topicId), qui permet d'obtenir toutes les données de la page de rubrique.

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));
    }

Page Article

La page d'article reçoit un ID article et nécessite plusieurs appels de données pour obtenir toutes ses données :

1. Obtenir les détails de l'article spécifié.
2. Pour l'auteur de l'article, obtenez les URL de rendu de l'avatar.

Ouvrez src/scripts/services.js et recherchez la fonction fetchArticleDetails(articleId), qui obtient les données de la page d'article.

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));
    }

Maintenant que nous disposons de nos requêtes de données, nous pouvons afficher les réponses dans nos composants Svelte.

Composants Svelte

L'application de blog décompose chaque page en plusieurs composants plus petits.

Les sections suivantes fournissent un aperçu de la manière dont Svelte affiche notre application dans chacun de nos composants :

• Itinéraires
• Composant TopicsListPage
• Composant d'en-tête
• Composant TopicsListItem
• Composant ArticesListPage
• Composant ArticesListItem
• Composant ArticleDetailsPage
• Chemins de navigation et composants de chemin de navigation

Itinéraires

Les pages de Sapper sont des composants Svelte écrits dans des fichiers .svelte. Lorsqu'un utilisateur visite pour la première fois l'application, il reçoit une version de la route en question affichée par le serveur, ainsi qu'un code JavaScript qui "hydrille" la page et initialise un routeur côté client. A partir de ce moment, la navigation vers d'autres pages est entièrement gérée sur le client pour un aspect rapide et semblable aux applications. Le nom du fichier détermine la route.

Sur notre site, nous voulons fournir trois routes :

• La page d'accueil, qui se compose de la liste des rubriques.
• La page de rubrique, qui affiche tous les articles pour le sujet sélectionné
• Page d'article individuelle affichant l'article sélectionné

Le fichier src/routes/index.svelte sert de page d'accueil. Le src/routes/articles/[slug].svelte sert la page du sujet et le src/routes/article/[slug].svelte sert la page de l'article.

Composant TopicsListPage

La page d'accueil se compose d'une liste de rubriques d'un canal. Il est rendu par le composant, situé à src/routes/index.svelte.

Le composant importe l'API pour obtenir les données du fichier services.js. Dans preload(), appelé pendant la phase de création, le composant obtient toutes les données requises pour afficher la page d'accueil.

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

Composant d'en-tête

Le composant TopicsListPage utilise le composant En-tête pour afficher le titre de la société, le logo de la société et les liens Nous contacter/A propos de nous.

Il est situé à src/component/Header.svelte et reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Composant TopicsListItem

Le composant TopicsListPage utilise le composant TopicsListItem pour afficher la rubrique individuelle dans la liste.

Le composant TopicsListItem, situé à src/component/TopicsListItem.svelte, reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Composant ArticlesListPage

La page Rubrique affiche les articles de la rubrique dont l'ID est transmis au composant sur l'URL. Il est rendu par le composant ArticlesListPage, situé à src/routes/articles/[slug].svelte.

Le composant importe l'API pour obtenir les données du fichier services.js.

<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>

Composant ArticlesListItem

Le composant ArticlesListPage utilise le composant ArticlesListItem pour afficher les articles individuels dans la liste.

Le composant ArticlesListItem se trouve à src/component/ArticlesListItem.svelte et reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Composant ArticleDetailsPage

La page Article affiche les détails de l'article dont l'ID est transmis sur l'URL. Il est rendu par le composant ArticleDetails, situé à src/routes/article/[slug].svelte.

Le composant importe l'API pour obtenir les données du fichier services.js.

<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>

Chemins de navigation et composants de chemin de navigation

Les composants ArticlesListPage et ArticleDetailsPage utilisent les composants Chemin de navigation et Chemin de navigation pour afficher le chemin de navigation en haut de la page, ce qui permet à l'utilisateur de revenir à la page Sujet ou à la page d'accueil. Les deux composants reçoivent toutes leurs données en tant que propriétés ; ils n'obtiennent aucune donnée supplémentaire du serveur.

Tâche 3 : Préparer votre application pour le déploiement

Maintenant que nous avons créé notre site de blog Svelte, nous devons le voir sur un serveur de développement local afin de pouvoir déboguer tous les problèmes et prévisualiser l'application avant de la mettre en service.

Préparez l'application pour le déploiement en trois étapes :

1. Créez l'application
2. Exécuter l'application à l'aide du noeud
3. Utiliser des scripts pour créer et exécuter l'application en développement

Construire l'application

Sapper vous permet d'exporter un site statique avec une seule commande d'export sapper de configuration zéro. Pour créer l'application, exécutez la commande suivante.

npm run export

Cette opération crée un dossier sapper/export avec une version prête pour la production de votre site.

Exécuter l'application à l'aide du noeud

Une fois le dossier de création créé, vous pouvez le lancer comme suit :

npm run start

Ouvrez ensuite votre navigateur vers http://localhost:5000 pour voir votre site en action.

Utiliser des scripts pour créer et exécuter l'application dans les environnements de développement et de production

Le fichier package.json situé à la racine du projet contient des scripts qui facilitent la création des bundles et l'exécution de l'application.

Développement

Vous pouvez utiliser le script dev au cours du développement :

npm run dev

Production

Le script de production de Sapper est fourni en deux versions, la création et l'exportation. La commande 'build' génère une application de noeud hébergable et l'export génère une version statique du site. Pour la production, vous pouvez utiliser :

npm run build
    npm run startbuild

Ou pour une version statique, utilisez

npm run export
    npm run start

Conclusion

Dans ce tutoriel, nous avons créé un site de blog à Svelte, disponible sur GitHub. Ce site utilise Oracle Content Management comme CMS sans tête. Après avoir configuré et configuré Oracle Content Management avec un canal de contenu publié pour le tutoriel du site de blog, nous avons installé et exécuté le site Svelte pour extraire le contenu requis et créer le site.

Pour plus d'informations sur Svelte, visitez le site Web de Svelte.

Découvrez les concepts importants d'Oracle Content Management dans la documentation.

Vous trouverez d'autres exemples de ce type sur la page Exemples Oracle Content Management du centre d'aide Oracle.

---

Informations relatives au titre et au copyright

Créer un blog à Svelte avec Oracle Content Management en mode Headless

F51070-01

Décembre 2021

Copyright © 2021, Oracle and/or its affiliates.

Auteur principal : Oracle Corporation