다음은 핵심 Sanity 개념에 대한 심층적인 설명과 이를 Next.js 및 React.js와 같은 프런트 엔드 프레임워크와 함께 사용하는 방법입니다. :
콘텐츠 스튜디오는 콘텐츠를 시각적으로 관리하는 곳입니다. 사용자 정의가 가능하고 React로 구축되어 다양한 유형의 콘텐츠에 대해 다양한 데이터 구조를 생성할 수 있는 유연성을 제공합니다.
npm install -g @sanity/cli
sanity init
안내에 따라 프로젝트 템플릿을 선택하고 설정(프로젝트 이름, 데이터 세트 등)을 선택합니다.
sanity start
이렇게 하면 http://localhost:3333에서 콘텐츠 스튜디오가 열립니다. 이제 여기에서 콘텐츠를 관리할 수 있습니다.
Sanity의 스키마는 데이터베이스에서 모델을 정의하는 것과 유사하게 콘텐츠의 구조를 정의합니다. Sanity 프로젝트의 스키마 폴더에서 스키마를 정의하게 됩니다.
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', }, ], };
import blog from './blog'; export default createSchema({ name: 'default', types: schemaTypes.concat([blog]), });
sanity start
이 스키마는 제목, 본문, 작성자 참조 및 게시 날짜에 대한 필드를 포함하여 블로그 게시물의 구조를 생성합니다.
문서는 Sanity의 콘텐츠 항목입니다. 스키마가 정의되면 Content Studio에서 해당 스키마를 기반으로 문서를 생성할 수 있습니다.
이동식 텍스트는 Sanity의 유연한 서식 있는 텍스트 편집기로, 이를 통해 콘텐츠에 다양한 텍스트 요소(예: 이미지, 제목, 맞춤 구성요소)가 표시되는 방식을 정의할 수 있습니다.
export default { name: 'body', title: 'Body', type: 'array', of: [ { type: 'block' }, // Basic block elements like paragraphs { type: 'image' }, // Custom image blocks ], };
Sanity 클라이언트는 프런트 엔드 프레임워크(예: React 또는 Next.js)에서 Sanity에서 콘텐츠를 가져오는 데 사용됩니다. Sanity를 위해 특별히 설계된 쿼리 언어인 GROQ를 사용합니다.
Next.js 또는 React.js 프로젝트에서 Sanity 클라이언트를 설치합니다.
npm install @sanity/client @sanity/image-url
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를 사용하세요.
import { client } from './sanity'; const query = `*[_type == "blog"]{title, body, publishedAt}`; const blogs = await client.fetch(query);
이제 모든 블로그 게시물을 가져왔으며 이를 Next.js 또는 React 구성 요소에서 렌더링할 수 있습니다.
Sanity는 강력한 이미지 처리 기능을 제공하므로 이미지를 쉽게 자르고, 크기를 조정하고, 최적화할 수 있습니다.
npm install @sanity/image-url
import imageUrlBuilder from '@sanity/image-url'; import { client } from './sanity'; const builder = imageUrlBuilder(client); export function urlFor(source) { return builder.image(source); }
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을 생성하는 방법을 보여줍니다.
참조 유형을 사용하여 Sanity에서 문서 간의 관계를 생성할 수 있습니다. 이는 블로그 작성자와 게시물 등의 데이터를 연결하는 데 유용합니다.
{ name: 'author', title: 'Author', type: 'reference', to: [{ type: 'author' }] }
콘텐츠 스튜디오에서 블로그 게시물을 작성하는 동안 작성자 문서를 참조로 선택할 수 있습니다.
Sanity는 여러 사용자가 동일한 문서에서 동시에 작업할 수 있는 실시간 공동 작업을 제공합니다. 콘텐츠 작업을 하는 모든 사용자에게 변경 사항이 즉시 나타납니다.
이 기능은 Sanity Studio에 자동으로 내장되어 있으므로 활성화하기 위해 특별한 설정을 수행할 필요가 없습니다.
Sanity를 Next.js 또는 React.js 프로젝트와 통합하려면 다음 단계를 따르세요.
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;
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;
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!