| title | description | type | stub | service | i18nReady |
|---|---|---|---|---|---|
Payload CMS & Astro |
Ajouter du contenu à votre projet Astro en utilisant Payload comme CMS |
cms |
true |
Payload CMS |
true |
import { Steps } from '@astrojs/starlight/components';
PayloadCMS est un système de gestion de contenu open-source qui peut être utilisé pour fournir du contenu à votre projet Astro.
- Un projet Astro - Si vous n'avez pas encore de projet Astro, notre Guide d'installation vous permettra d'être opérationnel en un rien de temps.
- Une base de données MongoDB - PayloadCMS vous demandera une chaîne de connexion MongoDB lors de la création d'un nouveau projet. Vous pouvez en installer une localement ou utiliser MongoDBAtlas pour héberger une base de données sur le web gratuitement.
- Une API REST PayloadCMS - Créez un projet PayloadCMS et connectez-le à votre base de données MongoDB pendant l'installation.
:::note[Choix d'un modèle] Lors de l'installation de PayloadCMS, il vous sera demandé si vous souhaitez utiliser un modèle.
Le choix d'un des modèles disponibles à cette étape (tel que 'blog') génère automatiquement des collections supplémentaires que vous pouvez utiliser. Sinon, vous devrez créer manuellement vos collections PayloadCMS. :::
Votre modèle de projet Payload contiendra un fichier appelé Posts.ts dans src/collections/. Si vous n'avez pas choisi un modèle lors de l'installation qui a créé une collection de contenu pour vous, vous pouvez créer une nouvelle collection Payload CMS en ajoutant ce fichier de configuration manuellement. L'exemple ci-dessous montre ce fichier pour une collection appelée posts qui nécessite les champs title, content et slug :
import { CollectionConfig } from "payload/types";
const Posts: CollectionConfig = {
slug: "posts",
admin: {
useAsTitle: "title",
},
access: {
read: () => true,
},
fields: [
{
name: "title",
type: "text",
required: true,
},
{
name: "content",
type: "text",
required: true,
},
{
name: "slug",
type: "text",
required: true,
},
],
};
export default Posts;import Users from "./collections/Users";
import Posts from "./collections/Posts";
export default buildConfig({
serverURL: "http://localhost:4321",
admin: {
user: Users.slug,
},
collections: [Users, Posts],
typescript: {
outputFile: path.resolve(__dirname, "payload-types.ts"),
},
graphQL: {
schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
},
});
```
Une nouvelle collection appelée "Posts" apparaîtra dans votre tableau de bord PayloadCMS à côté de la collection "Users".
-
Entrez dans la collection "Posts" et créez un nouveau message. Après l'avoir enregistré, vous remarquerez que l'URL de l'API apparaît dans le coin inférieur droit.
-
Avec le serveur de développement en cours d'exécution, ouvrez
http://localhost:4321/api/postsdans votre navigateur. Vous devriez voir un fichier JSON contenant le message que vous avez créé en tant qu'objet.{ "docs":[ { "id":"64098b16483b0f06a7e20ed4", "title":"Astro & PayloadCMS Title 🚀", "content":"Astro & PayloadCMS Content", "slug":"astro-payloadcms-slug", "createdAt":"2023-03-09T07:30:30.837Z", "updatedAt":"2023-03-09T07:30:30.837Z" } ], "totalDocs":1, "limit":10, "totalPages":1, "page":1, "pagingCounter":1, "hasPrevPage":false, "hasNextPage":false, "prevPage":null, "nextPage":null }
:::tip
Par défaut, Astro et PayloadCMS utilisent le port 4321. Vous pouvez changer le port de PayloadCMS dans le fichier src/server.ts. N'oubliez pas de mettre à jour le serverURL dans src/payload.config.ts également.
:::
Récupérez les données de PayloadCMS via l'URL unique de l'API REST de votre site et la route de votre contenu (par défaut, PayloadCMS monte toutes les routes via /api). Ensuite, vous pouvez rendre les propriétés de vos données en utilisant la directive Astro set:html="".
Avec votre message, PayloadCMS renverra des métadonnées de premier niveau. Les documents réels sont imbriqués dans le tableau docs.
Par exemple, pour afficher une liste de titres d'articles et leur contenu :
---
import HomeLayout from "../layouts/HomeLayout.astro";
const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default
const posts = await res.json()
---
<HomeLayout title='Blog Astro'>
{
posts.docs.map((post) => (
<h2 set:html={post.title} />
<p set:html={post.content} />
))
}
</HomeLayout>Créez une page d'index de blog src/pages/index.astro pour lister chacun de vos articles avec un lien vers sa propre page.
La recherche via l'API renvoie un tableau d'objets (posts) qui incluent, entre autres, les propriétés suivantes :
titlecontentslug
---
import HomeLayout from "../layouts/HomeLayout.astro";
const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts par défaut
const posts = await res.json()
---
<HomeLayout title='Astro Blog'>
<h1>Astro + PayloadCMS 🚀</h1>
<h2>Liste d'articles de blog :</h2>
<ul>
{
posts.docs.map((post) =>(
<li>
<a href={`posts/${post.slug}`} set:html={post.title} />
</li>
))
}
</ul>
</HomeLayout>Créer une page src/pages/posts/[slug].astro pour générer dynamiquement une page pour chaque post.
---
import PostLayout from "../../layouts/PostLayout.astro"
const {title, content} = Astro.props
// La fonction getStaticPaths() est nécessaire pour les sites statiques sous Astro.
// Si vous utilisez le SSR, vous n'aurez pas besoin de cette fonction.
export async function getStaticPaths() {
let data = await fetch("http://localhost:5000/api/posts")
let posts = await data.json()
return posts.docs.map((post) => {
return {
params: {slug: post.slug},
props: {title: post.title, content: post.content},
};
});
}
---
<PostLayout title={title}>
<article>
<h1 set:html={title} />
<p set:html={content} />
</article>
</PostLayout>Pour déployer votre site, consultez notre guide de déploiement et suivez les instructions de votre hébergeur préféré.
- Essayez ce Payload CMS & Astro Template.
- Consultez Astroad pour un développement facile et un déploiement VPS avec Docker.