Sanity CMS - All About It

Berikut ialah penjelasan mendalam tentang konsep Kewarasan utama dan cara menggunakannya dengan rangka kerja hadapan seperti Next.js dan React.js :

---

1. Studio Kandungan Sanity

Content Studio ialah tempat anda mengurus kandungan anda secara visual. Ia boleh disesuaikan dan dibina dengan React, menjadikannya fleksibel untuk mencipta struktur data yang berbeza untuk pelbagai jenis kandungan.

Cara Menyediakan:

1. Pasang Sanity CLI:

   npm install -g @sanity/cli

1. Mulakan projek Sanity:

   sanity init

Ikuti gesaan untuk memilih templat projek dan pilih tetapan (nama projek, set data, dll.).

1. Mulakan Studio Kandungan:

   sanity start

Ini akan membuka Content Studio di http://localhost:3333. Anda kini boleh mengurus kandungan anda di sini.

2. Skema

Skema dalam Sanity mentakrifkan struktur kandungan anda, sama seperti mentakrifkan model dalam pangkalan data. Anda akan menentukan skema dalam folder skema projek Sanity anda.

Contoh: Buat Skema Blog

1. Buat fail skema blog.js di dalam folder skema:

   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. Tambahkan skema pada schema.js:

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

1. Mulakan semula studio untuk memuatkan skema baharu:

   sanity start

Skema ini mencipta struktur untuk catatan blog, termasuk medan untuk tajuk, kandungan, rujukan pengarang dan tarikh diterbitkan.

---

3. Dokumen

Dokumen ialah entri kandungan dalam Sanity. Setelah skema anda ditakrifkan, anda boleh membuat dokumen berdasarkan skema tersebut dalam Content Studio.

Cara Membuat Dokumen dalam Studio:

1. Buka Sanity Studio anda (http://localhost:3333).
2. Pilih "Siaran Blog" (atau nama skema anda) daripada bar sisi.
3. Isi borang dengan kandungan (cth., tajuk, kandungan dan pengarang) dan tekan Terbitkan.

---

4. Teks Mudah Alih

Teks Mudah Alih ialah editor teks kaya fleksibel Sanity, yang membolehkan anda menentukan cara elemen teks yang berbeza (seperti imej, tajuk atau komponen tersuai) muncul dalam kandungan anda.

Menggunakan Teks Mudah Alih dalam Skema:

1. Dalam skema anda, tentukan medan sebagai jenis: 'portableText'.
2. Anda boleh memanjangkan Teks Mudah Alih untuk memasukkan blok tersuai:

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

---

5. Pelanggan Kewarasan

Klien Sanity digunakan dalam rangka kerja bahagian hadapan anda (seperti React atau Next.js) untuk mengambil kandungan daripada Sanity. Ia menggunakan GROQ, bahasa pertanyaan yang direka khusus untuk Sanity.

Pasang Pelanggan Sanity:

Dalam projek Next.js atau React.js anda, pasang klien Sanity:

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

Sediakan Pelanggan Kewarasan:

1. Buat fail sanity.js dalam projek bahagian hadapan anda untuk mengkonfigurasi klien:

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

Contoh Pertanyaan GROQ:

Untuk mengambil catatan blog, gunakan GROQ dengan pelanggan:

import { client } from './sanity';

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

Anda kini mempunyai semua catatan blog diambil dan boleh memaparkannya dalam komponen Next.js atau React anda.

---

6. Pengendalian Imej

Sanity menyediakan keupayaan pengendalian imej yang berkuasa, membolehkan anda memangkas, mengubah saiz dan mengoptimumkan imej dengan mudah.

Gunakan URL Imej dengan Transformasi:

1. Pasang pakej @sanity/image-url:

   npm install @sanity/image-url

1. Sediakan pembina URL imej:

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

   const builder = imageUrlBuilder(client);

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

1. Gunakan dalam komponen Next.js atau 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>
   );

Contoh ini menunjukkan cara menjana URL imej yang dioptimumkan daripada Sanity untuk pemaparan dalam komponen anda.

---

7. Perhubungan Data

Anda boleh membuat perhubungan antara dokumen dalam Sanity dengan menggunakan jenis rujukan. Ini berguna untuk memautkan data seperti pengarang blog dan siaran mereka.

Contoh: Rujukan Pengarang dalam Skema Catatan Blog

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

Dalam Content Studio, anda kemudian boleh memilih dokumen pengarang sebagai rujukan semasa membuat catatan blog.

---

8. Kolaborasi Masa Nyata

Sanity menawarkan kerjasama masa nyata, di mana berbilang pengguna boleh bekerja pada dokumen yang sama secara serentak. Perubahan muncul serta-merta untuk semua pengguna yang mengusahakan kandungan.

Ciri ini terbina dalam Sanity Studio secara automatik dan anda tidak perlu melakukan sebarang persediaan khas untuk mendayakannya.

---

9. Mengintegrasikan Kewarasan dengan Next.js/React.js

Untuk menyepadukan Sanity dengan projek Next.js atau React.js, ikut langkah berikut:

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.

The above is the detailed content of Sanity CMS - All About It. For more information, please follow other related articles on the PHP Chinese website!