Heim > Web-Frontend > js-Tutorial > Hauptteil

Sanity CMS – Alles darüber

Mary-Kate Olsen
Freigeben: 2024-10-12 22:27:02
Original
868 Leute haben es durchsucht

Sanity CMS - All About It

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


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

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

설정 방법:

  1. Sanity CLI 설치:
   npm install -g @sanity/cli
Nach dem Login kopieren
  1. Sanity 프로젝트 초기화:
   sanity init
Nach dem Login kopieren

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

  1. 콘텐츠 스튜디오 시작:
   sanity start
Nach dem Login kopieren
Nach dem Login kopieren

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

2. 스키마

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

예: 블로그 스키마 생성

  1. 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',
       },
     ],
   };
Nach dem Login kopieren
  1. schema.js에 스키마를 추가합니다.
   import blog from './blog';
   export default createSchema({
     name: 'default',
     types: schemaTypes.concat([blog]),
   });
Nach dem Login kopieren
  1. 스튜디오를 다시 시작하여 새 스키마를 로드합니다.
   sanity start
Nach dem Login kopieren
Nach dem Login kopieren

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


3. 문서

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

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

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

4. 이동 가능한 텍스트

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

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

  1. 스키마에서 필드를 'portableText' 유형으로 지정합니다.
  2. 이식 가능한 텍스트를 확장하여 사용자 정의 블록을 포함할 수 있습니다.
   export default {
     name: 'body',
     title: 'Body',
     type: 'array',
     of: [
       { type: 'block' }, // Basic block elements like paragraphs
       { type: 'image' }, // Custom image blocks
     ],
   };
Nach dem Login kopieren

5. 새니티 클라이언트

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

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

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

npm install @sanity/client @sanity/image-url
Nach dem Login kopieren

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

  1. 프런트 엔드 프로젝트에 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
   });
Nach dem Login kopieren

GROQ 쿼리 예:

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

import { client } from './sanity';

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

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


6. 이미지 처리

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

변환에 이미지 URL 사용:

  1. @sanity/image-url 패키지를 설치합니다.
   npm install @sanity/image-url
Nach dem Login kopieren
  1. 이미지 URL 작성 도구 설정:
   import imageUrlBuilder from '@sanity/image-url';
   import { client } from './sanity';

   const builder = imageUrlBuilder(client);

   export function urlFor(source) {
     return builder.image(source);
   }
Nach dem Login kopieren
  1. 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>
   );
Nach dem Login kopieren

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


7. 데이터 관계

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

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

{
  name: 'author',
  title: 'Author',
  type: 'reference',
  to: [{ type: 'author' }]
}
Nach dem Login kopieren

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


8. 실시간 협업

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

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


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

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

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;
Nach dem Login kopieren
  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;
Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonSanity CMS – Alles darüber. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage