Prepr CMS & Astro
Prepr.io est un CMS headless pour construire des sites web avec un ciblage par segment.
Intégrer avec Astro
Titre de la section Intégrer avec AstroPrepr CMS fournit une GraphQL API pour connecter vos données à Astro.
Conditions préalables
Titre de la section Conditions préalablesPour commencer, vous aurez besoin des éléments suivants :
- Un projet Astro nouveau ou existant configuré pour le rendu à la demande.
- Un compte Prepr gratuit
- Un environnement Prepr avec des articles de blog existants. Ces articles doivent comporter un
title
et uncontent
. Les autres champs sont facultatifs.
Configuration des informations d’identification
Titre de la section Configuration des informations d’identificationPour ajouter le point de terminaison Prepr à votre projet Astro, créez un fichier .env
à la racine de votre projet s’il n’existe pas déjà et ajoutez la variable suivante :
Vous trouverez votre valeur YOUR_PREPR_API_URL
dans les paramètres de votre compte Prepr :
-
Allez dans Settings > Access tokens pour voir vos jetons d’accès de prévisualisation et de production.
-
Utilisez la valeur API URL du jeton d’accès GraphQL Production pour récupérer uniquement les éléments de contenu publiés pour votre site Astro.
Configuration du point de terminaison Prepr
Titre de la section Configuration du point de terminaison PreprCréez un nouveau dossier src/lib/
et ajoutez un nouveau fichier appelé prepr.js
. C’est là que vous configurerez le point de terminaison Prepr. Ajoutez le code suivant pour récupérer vos données depuis le CMS Prepr :
Votre répertoire racine doit maintenant contenir ces fichiers :
Répertoirelib/
- prepr.js
Répertoiresrc/
- …
- .env
- astro.config.mjs
- package.json
Récupération de données
Titre de la section Récupération de donnéesVous récupérerez vos données auprès de Prepr en écrivant des requêtes pour interagir avec son API GraphQL.
Créez une requête GraphQL pour récupérer les articles de votre blog :
Titre de la section Créez une requête GraphQL pour récupérer les articles de votre blog :-
Créez un nouveau dossier
src/queries/
et ajoutez un fichier nomméget-articles.js
. -
Ajoutez la requête suivante à ce fichier pour récupérer tous les articles :
-
Pour afficher une liste liée de vos articles de blog sur une page, importez et exécutez votre requête, y compris le point de terminaison Prepr nécessaire. Vous aurez alors accès à tous les titres de vos articles et à leurs slugs à rendre sur la page. (Dans l’étape suivante, vous allez créer des pages individuelles pour vos articles de blog.)
Votre répertoire racine doit contenir ces nouveaux fichiers :
Répertoirelib/
- prepr.js
Répertoirequeries /
- get-articles.js
Répertoiresrc/
- …
- .env
- astro.config.mjs
- package.json
Création de pages individuelles pour les articles de blog
Titre de la section Création de pages individuelles pour les articles de blogPour créer une page pour chaque article de blog, vous devez exécuter une nouvelle requête GraphQL sur une page dynamic routing .astro
. Cette requête récupérera un article spécifique par son nom (slug) et une nouvelle page sera créée pour chaque article de blog.
-
Créez un fichier appelé
get-article-by-slug.js
dans le dossierqueries
et ajoutez ce qui suit pour interroger un article spécifique par son slug et renvoyer des données telles que letitle
et lecontent
de l’article :Vous pouvez créer et tester des requêtes GraphQL en utilisant l’Apollo explorer dans Prepr. Ouvrez l’explorateur API à partir de la page de l’élément de contenu Article dans Prepr. Le contenu de l’article est stocké dans un Dynamic content field (champ de contenu dynamique). Consultez la documentation GraphQL pour plus de détails sur comment récupérer les données dans ce champ.
-
Dans le dossier
src/pages
, créez un fichier appelé[...slug].astro
. Ajoutez le code suivant pour importer et exécuter la requête de l’étape précédente et afficher l’article récupéré :
Votre répertoire racine doit maintenant contenir ces nouveaux fichiers :
Répertoirelib/
- prepr.js
Répertoirequeries/
- get-articles.js
- get-article-by-slug.js
Répertoiresrc/
Répertoirepages/
- index.astro
- […slug].astro
- .env
- astro.config.mjs
- package.json
Désormais, lorsque vous cliquez sur le lien d’un article dans la liste principale des articles de blog, vous accédez à une page contenant son contenu individuel.
Publier votre site
Titre de la section Publier votre sitePour déployer votre blog Prepr, consultez nos guides de déploiement et suivez les instructions de votre hébergeur préféré.
Ressources officielles
Titre de la section Ressources officielles- Suivez le guide Prepr CMS Astro quickstart pour créer un blog simple avec Astro et Prepr CMS.
- Consultez Connecter Prepr CMS à Astro pour un aperçu des ressources Astro et Prepr CMS.