title | description | type | service | stub | i18nReady |
---|---|---|---|---|---|
Prepr CMS & Astro |
Ajouter du contenu à votre projet Astro en utilisant Prepr comme CMS |
cms |
Prepr CMS |
true |
true |
import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
Prepr.io est un CMS headless pour construire des sites web avec un ciblage par segment.
Prepr CMS fournit une GraphQL API pour connecter vos données à Astro.
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
title
et uncontent
. Les autres champs sont facultatifs.
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=YOUR_PREPR_API_URL
Vous trouverez votre valeur YOUR_PREPR_API_URL
dans les paramètres de votre compte Prepr :
- 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.
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 :
- lib/ - **prepr.js** - src/ - **.env** - astro.config.mjs - package.jsonVous récupérerez vos données auprès de Prepr en écrivant des requêtes pour interagir avec son API GraphQL.
1. 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 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.)
--- 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 site de blog"> <h1> My blog site </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 :
- lib/ - prepr.js - **queries**/ - **get-articles.js** - src/ - .env - astro.config.mjs - package.jsonPour 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.
export default GetArticleBySlug
```
:::tip
Vous pouvez créer et [tester des requêtes GraphQL](https://docs.prepr.io/reference/graphql/v1/test-queries) en utilisant l'[Apollo explorer](https://studio.apollographql.com/sandbox/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](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field).
:::
- 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 :
- lib/ - prepr.js - queries/ - get-articles.js - **get-article-by-slug.js** - src/ - pages/ - index.astro - **[…slug].astro** - .env - astro.config.mjs - package.jsonDé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.
Pour déployer votre blog Prepr, consultez nos guides de déploiement et suivez les instructions de votre hébergeur préféré.
- 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.