Sanity CMS - 그것에 관한 모든 것
- Mary-Kate Olsen원래의
- 2024-10-12 22:27:02891검색
다음은 핵심 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.
This setup allows you to efficiently manage, query, and display content in front-end frameworks like Next.js and React.js.
위 내용은 Sanity CMS - 그것에 관한 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!