Sanity CMS - Tout à propos de ça

Voici une explication détaillée des concepts clés de Sanity et comment l'utiliser avec des frameworks front-end comme Next.js et React.js  :

---

1. Studio de contenu Sanity

Content Studio est l'endroit où vous gérez visuellement votre contenu. Il est personnalisable et construit avec React, ce qui le rend flexible pour créer différentes structures de données pour différents types de contenu.

Comment configurer :

1. Installer Sanity CLI :

   npm install -g @sanity/cli

1. Initialiser un projet Sanity :

   sanity init

Suivez les invites pour sélectionner un modèle de projet et choisir les paramètres (nom du projet, ensemble de données, etc.).

1. Démarrez Content Studio :

   sanity start

Cela ouvrira Content Studio à l'adresse http://localhost:3333. Vous pouvez désormais gérer votre contenu ici.

2. Schémas

Les schémas dans Sanity définissent la structure de votre contenu, de la même manière que la définition de modèles dans une base de données. Vous définirez des schémas dans le dossier schémas de votre projet Sanity.

Exemple : créer un schéma de blog

1. Créez un fichier de schéma blog.js dans le dossier schemas :

   export default {
     name: 'blog',
     title: "'Blog Post',"
     type: 'document',
     fields: [
       {
         name: 'title',
         title: "'Title',"
         type: 'string',
       },
       {
         name: 'body',
         title: "'Body',"
         type: 'portableText', // For rich text fields
       },
       {
         name: 'author',
         title: "'Author',"
         type: 'reference',
         to: [{ type: 'author' }], // Reference to another document type
       },
       {
         name: 'publishedAt',
         title: "'Published At',"
         type: 'datetime',
       },
     ],
   };

1. Ajoutez le schéma à schema.js :

   import blog from './blog';
   export default createSchema({
     name: 'default',
     types: schemaTypes.concat([blog]),
   });

1. Redémarrez le studio pour charger le nouveau schéma :

   sanity start

Ce schéma crée une structure pour les articles de blog, comprenant des champs pour le titre, le corps, la référence de l'auteur et la date de publication.

---

3. Documents

Les documents sont des entrées de contenu dans Sanity. Une fois vos schémas définis, vous pouvez créer des documents basés sur ces schémas dans Content Studio.

Comment créer un document dans le Studio :

1. Ouvrez votre Sanity Studio (http://localhost:3333).
2. Choisissez « Article de blog » (ou le nom de votre schéma) dans la barre latérale.
3. Remplissez le formulaire avec le contenu (par exemple, titre, corps et auteur) et cliquez sur Publier.

---

4. Texte portable

Portable Text est l'éditeur de texte riche flexible de Sanity, qui vous permet de définir la façon dont différents éléments de texte (comme les images, les titres ou les composants personnalisés) apparaissent dans votre contenu.

Utilisation de texte portable dans le schéma :

1. Dans votre schéma, spécifiez un champ comme type : 'portableText'.
2. Vous pouvez étendre Portable Text pour inclure des blocs personnalisés :

   export default {
     name: 'body',
     title: 'Body',
     type: 'array',
     of: [
       { type: 'block' }, // Basic block elements like paragraphs
       { type: 'image' }, // Custom image blocks
     ],
   };

---

5. Client de santé mentale

Le client Sanity est utilisé dans votre framework front-end (comme React ou Next.js) pour récupérer du contenu depuis Sanity. Il utilise GROQ, un langage de requête conçu spécifiquement pour Sanity.

Installez le client Sanity :

Dans votre projet Next.js ou React.js, installez le client Sanity :

npm install @sanity/client @sanity/image-url

Configurez le client Sanity :

1. Créez un fichier sanity.js dans votre projet front-end pour configurer le client :

   import sanityClient from '@sanity/client';

   export const client = sanityClient({
     projectId: 'yourProjectId', // found in sanity.json or sanity studio
     dataset: 'production',
     apiVersion: '2023-01-01', // use a specific API version
     useCdn: true, // 'false' if you want the latest data
   });

Exemple de requête GROQ :

Pour récupérer des articles de blog, utilisez GROQ avec le client :

import { client } from './sanity';

const query = `*[_type == "blog"]{title, body, publishedAt}`;
const blogs = await client.fetch(query);

Vous avez maintenant récupéré tous les articles de blog et pouvez les afficher dans vos composants Next.js ou React.

---

6. Gestion des images

Sanity offre de puissantes capacités de gestion d'images, vous permettant de recadrer, redimensionner et optimiser facilement les images.

Utiliser les URL d'images avec les transformations :

1. Installez le package @sanity/image-url :

   npm install @sanity/image-url

1. Configurez le générateur d'URL d'image :

   import imageUrlBuilder from '@sanity/image-url';
   import { client } from './sanity';

   const builder = imageUrlBuilder(client);

   export function urlFor(source) {
     return builder.image(source);
   }

1. Utiliser dans un composant Next.js ou React :

   import { urlFor } from './sanity';

   const Blog = ({ blog }) => (
     <div>
       <h1>{blog.title}</h1>
       <img src={urlFor(blog.image).width(800).url()} alt="Blog Image" />
     </div>
   );

Cet exemple montre comment générer une URL d'image optimisée à partir de Sanity pour le rendu dans votre composant.

---

7. Relations entre données

Vous pouvez créer des relations entre les documents dans Sanity en utilisant le type référence. Ceci est utile pour relier des données telles que les auteurs de blogs et leurs articles.

Exemple : référence de l'auteur dans le schéma de l'article de blog

{
  name: 'author',
  title: 'Author',
  type: 'reference',
  to: [{ type: 'author' }]
}

Dans Content Studio, vous pouvez ensuite sélectionner un document d'auteur comme référence lors de la création d'un article de blog.

---

8. Collaboration en temps réel

Sanity offre une collaboration en temps réel, où plusieurs utilisateurs peuvent travailler simultanément sur le même document. Les modifications apparaissent instantanément pour tous les utilisateurs travaillant sur le contenu.

Cette fonctionnalité est automatiquement intégrée à Sanity Studio et vous n'avez pas besoin d'effectuer de configuration spéciale pour l'activer.

---

9. Intégrer Sanity avec Next.js/React.js

Pour intégrer Sanity à un projet Next.js ou React.js, suivez ces étapes :

Example: Fetch Blog Data in Next.js

1. Use getStaticProps to fetch Sanity data at build time:

   import { client } from '../sanity';

   export async function getStaticProps() {
     const blogs = await client.fetch(`*[_type == "blog"]`);
     return {
       props: { blogs },
     };
   }

   const BlogList = ({ blogs }) => (
     <div>
       {blogs.map(blog => (
         <div key={blog._id}>
           <h2>{blog.title}</h2>
           <p>{blog.body[0]?.children[0]?.text}</p>
         </div>
       ))}
     </div>
   );

   export default BlogList;

1. In React.js, use useEffect to fetch data dynamically:

   import { client } from './sanity';
   import { useState, useEffect } from 'react';

   const BlogList = () => {
     const [blogs, setBlogs] = useState([]);

     useEffect(() => {
       const fetchBlogs = async () => {
         const data = await client.fetch(`*[_type == "blog"]`);
         setBlogs(data);
       };
       fetchBlogs();
     }, []);

     return (
       <div>
         {blogs.map(blog => (
           <div key={blog._id}>
             <h2>{blog.title}</h2>
             <p>{blog.body[0]?.children[0]?.text}</p>
           </div>
         ))}
       </div>
     );
   };

   export default BlogList;

---

Summary:

• Sanity Studio: Manage content visually and customize data structure with schemas.
• Schemas: Define content structure (documents, objects, references).
• Portable Text: Flexible rich text editor with support for custom components.
• Sanity Client: Fetch content using GROQ in React/Next.js.
• Image Handling: Easily generate optimized image URLs.
• Data Relationships: Link documents using references.
• Real-Time Collaboration: Built-in for team workflows.

This setup allows you to efficiently manage, query, and display content in front-end frameworks like Next.js and React.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!