Prepr CMS & Astro

Prepr CMS est un CMS headless avec personnalisation intégrée.

Intégration avec Astro

Prepr CMS fournit une API GraphQL pour connecter vos données à Astro.

Conditions préalables

Pour 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 titre (title) et un contenu (content). Les autres champs sont facultatifs.

Configuration des informations d’identification

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

PREPR_ENDPOINT=VOTRE_URL_API_PREPR

Vous trouverez votre valeur VOTRE_URL_API_PREPR 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

Cré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 :

export async function Prepr(query, variables) {
    const response = await fetch(import.meta.env.PREPR_ENDPOINT, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query, variables }),
    })
    return response
}

Votre répertoire racine doit maintenant contenir ces fichiers :

Répertoiresrc/
- Répertoirelib/
  - prepr.js
.env
astro.config.mjs
package.json

Récupération de données

Vous récupérerez vos données auprès de Prepr en écrivant des requêtes pour interagir avec son API GraphQL.

Créer 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 :

  const GetArticles = `
  query {
      Articles {
        items {
          _id
          _slug
          title
      }
    }
  }
  `
  export default GetArticles

Pour afficher une liste de liens vers vos articles de blog sur une page, importez et exécutez votre requête, incluant le point de terminaison Prepr nécessaire. Vous aurez alors accès à tous les titres de vos articles et à leurs slugs à afficher sur la page. (Dans l’étape suivante, vous allez créer des pages individuelles pour vos articles de blog.)

---
import Layout from '../layouts/Layout.astro';
import { Prepr } from '../lib/prepr.js';
import GetArticles from '../queries/get-articles.js';

const response = await Prepr(GetArticles)
const { data } = await response.json()
const articles = data.Articles
---

<Layout title="Mon blog">
  <h1>
    Mon blog
  </h1>
  <ul>
    {
      articles.items.map((post) => (
        <li>
          <a href={post._slug}>{post.title}</a>
        </li>
      ))
    }
  </ul>
</Layout>

Votre répertoire racine doit contenir ces nouveaux fichiers :

Répertoiresrc/
- Répertoirelib/
  - prepr.js
- Répertoirepages/
  - index.astro
- Répertoirequeries /
  - get-articles.js
.env
astro.config.mjs
package.json

Création de pages individuelles pour les articles de blog

Pour créer une page pour chaque article de blog, vous exécuterez une nouvelle requête GraphQL sur une page .astro utilisant le routage dynamique. Cette requête récupérera un article spécifique par son 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 dossier queries et ajoutez ce qui suit pour interroger un article spécifique par son slug et renvoyer des données telles que le titre (title) et le contenu (content) de l’article :
src/lib/queries/get-article-by-slug.js
```
const GetArticleBySlug = `
query ($slug: String) {
   Article (slug: $slug) {
     _id
     title
     content {
       __typename
       ... on Text {
         body
         text
       }
       ... on Assets {
         items {
           url
         }
       }
     }
   }
}`

export default GetArticleBySlug
```
Vous pouvez créer et tester des requêtes GraphQL en utilisant l’explorateur Apollo dans Prepr. Ouvrez l’API de l’explorateur à 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é :

---
import Layout from '../layouts/Layout.astro';
import {Prepr} from '../lib/prepr.js';
import GetArticleBySlug from '../queries/get-article-by-slug.js';

const { slug } = Astro.params;
const response = await Prepr(GetArticleBySlug, {slug})
const { data } = await response.json()
const article = data.Article
---

<Layout title={article.title}>
  <main>
    <h1>{article.title}</h1>
    {
      article.content.map((content) => (
        <div>
          {
            content.__typename === "Assets" &&
            <img src={content.items[0].url} width="300" height="250"/>
          }
          {
            content.__typename === 'Text' &&
            <div set:html={content.body}></div>
          }
        </div>
      ))
    }
  </main>
</Layout>

Votre répertoire racine doit maintenant contenir ces nouveaux fichiers :

Répertoiresrc/
- Répertoirelib/
  - prepr.js
- Répertoirepages/
  - index.astro
  - […slug].astro
- Répertoirequeries/
  - get-articles.js
  - get-article-by-slug.js
.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

Pour déployer votre blog Prepr, consultez nos guides de déploiement et suivez les instructions de votre hébergeur préféré.

Ressources officielles

Suivez le guide de démarrage rapide avec Astro de Prepr CMS 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.

Plus de guides sur les CMS

Contribuer Communauté Parrainer