Sanity CMS - そのすべて

Hier finden Sie eine ausführliche Erklärung der wichtigsten Sanity-Konzepte und deren Verwendung mit Front-End-Frameworks wie Next.js und React.js :

---

1. Sanity Content Studio

Content Studio ist der Ort, an dem Sie Ihre Inhalte visuell verwalten. Es ist anpassbar und mit React erstellt, wodurch es flexibel für die Erstellung verschiedener Datenstrukturen für verschiedene Arten von Inhalten ist.

So richten Sie es ein:

1. Sanity CLI installieren:

   npm install -g @sanity/cli

1. Initialisieren Sie ein Sanity-Projekt:

   sanity init

Folgen Sie den Anweisungen, um eine Projektvorlage auszuwählen und Einstellungen (Projektname, Datensatz usw.) auszuwählen.

1. Starten Sie das Content Studio:

   sanity start

Dadurch wird das Content Studio unter http://localhost:3333 geöffnet. Hier können Sie nun Ihre Inhalte verwalten.

2. Schemata

Schemata in Sanity definieren die Struktur Ihrer Inhalte, ähnlich wie die Definition von Modellen in einer Datenbank. Sie definieren Schemata im Schemaordner Ihres Sanity-Projekts.

Beispiel: Erstellen Sie ein Blog-Schema

1. Erstellen Sie eine Schemadatei blog.js im Schemas-Ordner:

   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. Fügen Sie das Schema zu schema.js hinzu:

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

1. Starten Sie das Studio neu, um das neue Schema zu laden:

   sanity start

Dieses Schema erstellt eine Struktur für Blogbeiträge, einschließlich Feldern für Titel, Text, Autorenreferenz und Veröffentlichungsdatum.

---

3. Dokumente

Dokumente sind Inhaltseinträge in Sanity. Sobald Ihre Schemata definiert sind, können Sie im Content Studio Dokumente basierend auf diesen Schemata erstellen.

So erstellen Sie ein Dokument im Studio:

1. Öffnen Sie Ihr Sanity Studio (http://localhost:3333).
2. Wählen Sie „Blog-Beitrag“ (oder Ihren Schemanamen) aus der Seitenleiste.
3. Füllen Sie das Formular mit Inhalten aus (z. B. Titel, Text und Autor) und klicken Sie auf Veröffentlichen.

---

4. Portabler Text

Portable Text ist der flexible Rich-Text-Editor von Sanity, mit dem Sie definieren können, wie verschiedene Textelemente (wie Bilder, Überschriften oder benutzerdefinierte Komponenten) in Ihren Inhalten angezeigt werden.

Verwenden von tragbarem Text im Schema:

1. Geben Sie in Ihrem Schema ein Feld als Typ an: „portableText“.
2. Sie können Portable Text um benutzerdefinierte Blöcke erweitern:

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

---

5. Sanity Client

Der Sanity Client wird in Ihrem Front-End-Framework (wie React oder Next.js) verwendet, um Inhalte von Sanity abzurufen. Es verwendet GROQ, eine Abfragesprache, die speziell für Sanity entwickelt wurde.

Installieren Sie den Sanity-Client:

In Ihrem Next.js- oder React.js-Projekt installieren Sie den Sanity-Client:

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

Richten Sie den Sanity Client ein:

1. Erstellen Sie eine sanity.js-Datei in Ihrem Front-End-Projekt, um den Client zu konfigurieren:

   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
   });

Beispiel einer GROQ-Abfrage:

Um Blogbeiträge abzurufen, verwenden Sie GROQ mit dem Client:

import { client } from './sanity';

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

Sie haben jetzt alle Blogbeiträge abgerufen und können sie in Ihren Next.js- oder React-Komponenten rendern.

---

6. Bildbearbeitung

Sanity bietet leistungsstarke Bildbearbeitungsfunktionen, mit denen Sie Bilder problemlos zuschneiden, in der Größe ändern und optimieren können.

Verwenden Sie Bild-URLs mit Transformationen:

1. Installieren Sie das @sanity/image-url-Paket:

   npm install @sanity/image-url

1. Richten Sie den Bild-URL-Builder ein:

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

   const builder = imageUrlBuilder(client);

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

1. Verwendung in einer Next.js- oder React-Komponente:

   import { urlFor } from './sanity';

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

Dieses Beispiel zeigt, wie Sie eine optimierte Bild-URL von Sanity zum Rendern in Ihrer Komponente generieren.

---

7. Datenbeziehungen

Sie können Beziehungen zwischen Dokumenten in Sanity erstellen, indem Sie den Referenztyp verwenden. Dies ist nützlich, um Daten wie Blog-Autoren und ihre Beiträge zu verknüpfen.

Beispiel: Autorenreferenz im Blog-Post-Schema

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

Im Content Studio können Sie dann beim Erstellen eines Blogbeitrags ein Autorendokument als Referenz auswählen.

---

8. Zusammenarbeit in Echtzeit

Sanity bietet Echtzeit-Zusammenarbeit, bei der mehrere Benutzer gleichzeitig an demselben Dokument arbeiten können. Änderungen werden sofort für alle Benutzer angezeigt, die am Inhalt arbeiten.

Diese Funktion ist automatisch in Sanity Studio integriert und Sie müssen keine spezielle Einrichtung vornehmen, um sie zu aktivieren.

---

9. Integration von Sanity mit Next.js/React.js

Um Sanity in ein Next.js- oder React.js-Projekt zu integrieren, befolgen Sie diese Schritte:

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.

以上がSanity CMS - そのすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。