tina-cms.mdx

title	description	type	stub	service	i18nReady
Tina CMS & Astro	Ajouter du contenu a votre projet Astro en utilisant Tina CMS	cms	false	Tina CMS	true

import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Grid from '/components/FluidGrid.astro'; import Card from '~/components/ShowcaseCard.astro'; import { Steps } from '@astrojs/starlight/components';

Tina CMS est un système de gestion de contenu headless soutenu par Git.

Integration avec Astro

Pour commencer, vous aurez besoin d'un projet Astro existant.

1. Exécutez la commande suivante pour installer Tina dans votre projet Astro.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx @tinacms/cli@latest init
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm dlx @tinacms/cli@latest init
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn dlx @tinacms/cli@latest init
  ```
  </Fragment>
</PackageManagerTabs>

- Lorsqu'on vous demande un Cloud ID, appuyez sur <kbd>Enter</kbd> pour passer. Vous en générerez un plus tard si vous souhaitez utiliser Tina Cloud.
- A la question "What framework are you using", choisissez **Other**.
- Lorsque l'on vous demande où sont stockées les ressources publiques, appuyez sur <kbd>Enter</kbd>.

Une fois cette opération terminée, vous devriez avoir un dossier `.tina` à la racine de votre projet et un fichier `hello-world.md` généré dans `content/posts`.

2. Changez le script dev dans package.json :

   ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ``` ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ``` ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ```

3. TinaCMS est maintenant configuré en mode local. Testez-le en lançant le script dev, puis en naviguant vers /admin/index.html#/collections/post.

   L'édition du post "Hello, World !" mettra à jour le fichier content/posts/hello-world.md dans le répertoire de votre projet.

4. Configurez vos collections Tina en éditant la propriété schema.collections dans .tina/config.ts.

   Par exemple, vous pouvez ajouter une propriété frontmatter "date posted" à nos posts :

   import { defineConfig } from "tinacms";
   
   // Il est probable que votre hébergeur expose cette variable d'environnement
   const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";
   
   export default defineConfig({
     branch,
     clientId: null, // Obtenir cette information de tina.io
     token: null, // Obtenir cette information de tina.io
     build: {
       outputFolder: "admin",
       publicFolder: "public",
     },
     media: {
       tina: {
         mediaRoot: "images",
         publicFolder: "public",
       },
     },
     schema: {
       collections: [
         {
           name: "posts",
           label: "Posts",
           path: "src/content/posts",
           format: 'mdx',
           fields: [
             {
               type: "string",
               name: "title",
               label: "Title",
               isTitle: true,
               required: true,
             },
             {
               type: "datetime",
               name: "posted",
               label: "Date Posted",
               required: true,
             },
             {
               type: "rich-text",
               name: "body",
               label: "Body",
               isBody: true,
             },
           ],
         },
       ],
     },
   });

   En savoir plus sur les collections Tina dans la documentation Tina.

5. En production, TinaCMS peut livrer des changements directement à votre dépôt GitHub. Pour configurer TinaCMS pour la production, vous pouvez choisir d'utiliser Tina Cloud ou d'auto-héberger la couche de données Tina. Vous pouvez en savoir plus sur l'inscription à Tina Cloud dans les Tina Docs.

Ressources officielles

• Guide d'intégration de TinaCMS avec Astro.

Ressources communautaires

• Astro Tina Kit de démarrage avec une édition visuelle par Jeff See + Dylan Awalt-Conley
• Astro Tina Kit de démarrage avec une édition basique par Tom Bennet
• Utiliser les optimisations d'images Astro avec Tina

Thèmes