Sanity CMS - 그것에 관한 모든 것-JS 튜토리얼-php.cn

Sanity CMS - All About It

다음은 핵심 Sanity 개념에 대한 심층적인 설명과 이를 Next.js 및 React.js와 같은 프런트 엔드 프레임워크와 함께 사용하는 방법입니다. :

1. 새니티 콘텐츠 스튜디오

콘텐츠 스튜디오는 콘텐츠를 시각적으로 관리하는 곳입니다. 사용자 정의가 가능하고 React로 구축되어 다양한 유형의 콘텐츠에 대해 다양한 데이터 구조를 생성할 수 있는 유연성을 제공합니다.

설정 방법:

Sanity CLI 설치:

   npm install -g @sanity/cli

로그인 후 복사

Sanity 프로젝트 초기화:

   sanity init

로그인 후 복사

안내에 따라 프로젝트 템플릿을 선택하고 설정(프로젝트 이름, 데이터 세트 등)을 선택합니다.

콘텐츠 스튜디오 시작:

   sanity start

로그인 후 복사

이렇게 하면 http://localhost:3333에서 콘텐츠 스튜디오가 열립니다. 이제 여기에서 콘텐츠를 관리할 수 있습니다.

2. 스키마

Sanity의 스키마는 데이터베이스에서 모델을 정의하는 것과 유사하게 콘텐츠의 구조를 정의합니다. Sanity 프로젝트의 스키마 폴더에서 스키마를 정의하게 됩니다.

예: 블로그 스키마 생성

schemas 폴더 내에 blog.js 스키마 파일을 생성합니다.

   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',
       },
     ],
   };

로그인 후 복사

schema.js에 스키마를 추가합니다.

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

로그인 후 복사

스튜디오를 다시 시작하여 새 스키마를 로드합니다.

   sanity start

로그인 후 복사

이 스키마는 제목, 본문, 작성자 참조 및 게시 날짜에 대한 필드를 포함하여 블로그 게시물의 구조를 생성합니다.

3. 문서

문서는 Sanity의 콘텐츠 항목입니다. 스키마가 정의되면 Content Studio에서 해당 스키마를 기반으로 문서를 생성할 수 있습니다.

Studio에서 문서를 만드는 방법:

Sanity Studio(http://localhost:3333)를 엽니다.
사이드바에서 "블로그 게시물"(또는 스키마 이름)을 선택하세요.
양식에 콘텐츠(예: 제목, 본문, 저자)를 입력하고 게시를 누르세요.

4. 이동 가능한 텍스트

이동식 텍스트는 Sanity의 유연한 서식 있는 텍스트 편집기로, 이를 통해 콘텐츠에 다양한 텍스트 요소(예: 이미지, 제목, 맞춤 구성요소)가 표시되는 방식을 정의할 수 있습니다.

스키마에서 이식 가능한 텍스트 사용:

스키마에서 필드를 'portableText' 유형으로 지정합니다.
이식 가능한 텍스트를 확장하여 사용자 정의 블록을 포함할 수 있습니다.

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

로그인 후 복사

5. 새니티 클라이언트

Sanity 클라이언트는 프런트 엔드 프레임워크(예: React 또는 Next.js)에서 Sanity에서 콘텐츠를 가져오는 데 사용됩니다. Sanity를 위해 특별히 설계된 쿼리 언어인 GROQ를 사용합니다.

Sanity 클라이언트를 설치합니다.

Next.js 또는 React.js 프로젝트에서 Sanity 클라이언트를 설치합니다.

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

로그인 후 복사

Sanity 클라이언트를 설정합니다:

프런트 엔드 프로젝트에 sanity.js 파일을 생성하여 클라이언트를 구성합니다.

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

로그인 후 복사

GROQ 쿼리 예:

블로그 게시물을 가져오려면 클라이언트에서 GROQ를 사용하세요.

import { client } from './sanity';

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

로그인 후 복사

이제 모든 블로그 게시물을 가져왔으며 이를 Next.js 또는 React 구성 요소에서 렌더링할 수 있습니다.

6. 이미지 처리

Sanity는 강력한 이미지 처리 기능을 제공하므로 이미지를 쉽게 자르고, 크기를 조정하고, 최적화할 수 있습니다.

변환에 이미지 URL 사용:

@sanity/image-url 패키지를 설치합니다.

   npm install @sanity/image-url

로그인 후 복사

이미지 URL 작성 도구 설정:

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

   const builder = imageUrlBuilder(client);

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

로그인 후 복사

Next.js 또는 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>
   );

로그인 후 복사

이 예에서는 구성 요소 렌더링을 위해 Sanity에서 최적화된 이미지 URL을 생성하는 방법을 보여줍니다.

7. 데이터 관계

참조 유형을 사용하여 Sanity에서 문서 간의 관계를 생성할 수 있습니다. 이는 블로그 작성자와 게시물 등의 데이터를 연결하는 데 유용합니다.

예: 블로그 게시물 스키마의 작성자 참조

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

로그인 후 복사

콘텐츠 스튜디오에서 블로그 게시물을 작성하는 동안 작성자 문서를 참조로 선택할 수 있습니다.

8. 실시간 협업

Sanity는 여러 사용자가 동일한 문서에서 동시에 작업할 수 있는 실시간 공동 작업을 제공합니다. 콘텐츠 작업을 하는 모든 사용자에게 변경 사항이 즉시 나타납니다.

이 기능은 Sanity Studio에 자동으로 내장되어 있으므로 활성화하기 위해 특별한 설정을 수행할 필요가 없습니다.

9. Next.js/React.js와 Sanity 통합

Sanity를 Next.js 또는 React.js 프로젝트와 통합하려면 다음 단계를 따르세요.

Example: Fetch Blog Data in Next.js

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;

로그인 후 복사

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.