Aller au contenu

Keystatic & Astro

Keystatic est un système de gestion de contenu open source qui vous permet de structurer votre contenu et de le synchroniser avec GitHub.

Ajoutez les intégrations Markdoc (pour les entrées de contenu) et React (pour le tableau de bord de l’interface d’administration de Keystatic) à votre projet Astro, en utilisant la commande astro add de votre gestionnaire de paquets.

Fenêtre de terminal
npx astro add react markdoc

Vous aurez également besoin de deux paquets Keystatic :

Fenêtre de terminal
npm install @keystatic/core @keystatic/astro

Ajoutez l’intégration Astro de @keystatic/astro dans votre fichier de configuration Astro :

astro.config.mjs
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import markdoc from '@astrojs/markdoc'
import keystatic from '@keystatic/astro'
// https://astro.build/config
export default defineConfig({
integrations: [react(), markdoc(), keystatic()],
output: 'hybrid',
})

Création d’un fichier de configuration Keystatic

Titre de la section Création d’un fichier de configuration Keystatic

Un fichier de configuration Keystatic est nécessaire pour définir votre schéma de contenu. Ce fichier vous permettra également de connecter un projet à un dépôt GitHub spécifique (si vous décidez de le faire).

Créez un fichier appelé keystatic.config.ts à la racine du projet et ajoutez le code suivant pour définir à la fois votre type de stockage (local) et une collection de contenu unique (posts) :

keystatic.config.ts
import { config, fields, collection } from '@keystatic/core';
export default config({
storage: {
kind: 'local',
},
collections: {
posts: collection({
label: 'Posts',
slugField: 'title',
path: 'src/content/posts/*',
format: { contentField: 'content' },
schema: {
title: fields.slug({ name: { label: 'Title' } }),
content: fields.markdoc({
label: 'Content',
}),
},
}),
},
});

Keystatic est maintenant configuré pour gérer votre contenu en fonction de votre schéma.

Pour lancer le tableau de bord de l’interface d’administration de Keystatic, démarrez le serveur de développement d’Astro :

Fenêtre de terminal
npm run dev

Visitez http://127.0.0.1:4321/keystatic dans le navigateur pour voir l’interface d’administration de Keystatic fonctionner.

  1. Dans le tableau de bord de l’interface d’administration Keystatic, cliquez sur la collection “Posts”.

  2. Utilisez le bouton pour créer un nouveau message. Ajoutez le titre ” Mon premier article ” et un peu de contenu, puis enregistrez l’article.

  3. Ce message devrait maintenant être visible dans votre collection ” Posts “. Vous pouvez afficher et modifier vos messages individuels à partir de cette page du tableau de bord.

  4. Retournez voir vos fichiers de projet Astro. Vous trouverez maintenant un nouveau fichier .mdoc dans le répertoire src/content/posts pour ce nouvel article :

    • Répertoiresrc/
      • Répertoirecontent/
        • Répertoireposts/
          • my-first-post.mdoc
  5. Naviguez vers ce fichier dans votre éditeur de code et vérifiez que vous pouvez voir le contenu Markdown que vous avez saisi. Par exemple, il est possible de voir le contenu Markdown que vous avez saisi :

    ---
    title: Mon premier billet
    ---
    C'est mon tout premier message. Je suis **super** excitée !

Utilisez l’API Content Collections d’Astro pour interroger et afficher vos articles et collections, comme vous le feriez dans n’importe quel projet Astro.

L’exemple suivant affiche une liste des titres de chaque article, avec un lien vers la page de chaque article.

---
import { getCollection } from 'astro:content'
const posts = await getCollection('posts')
---
<ul>
{posts.map(post => (
<li>
<a href={`/posts/${post.slug}`}>{post.data.title}</a>
</li>
))}
</ul>

Pour afficher le contenu d’un article individuel, vous pouvez importer et utiliser le composant <Content /> pour rendre votre contenu en HTML :

---
import { getEntry } from 'astro:content'
const post = await getEntry('posts', 'my-first-post')
const { Content } = await post.render()
---
<main>
<h1>{post.data.title}</h1>
<Content />
</main>

Pour plus d’informations sur l’interrogation, le filtrage, l’affichage du contenu de vos collections et plus encore, consultez la documentation sur les collections.

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

Vous voudrez probablement aussi connecter Keystatic à GitHub afin de pouvoir gérer le contenu de l’instance déployée du projet.

Plus de guides sur les CMS

Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté