Sanity CMS - 关于它

这里深入解释了 Sanity 的关键概念以及如何将其与 Next.js 和 React.js 等前端框架一起使用：

---

1. 理智内容工作室

Content Studio 是您直观管理内容的地方。它是可定制的，并使用 React 构建，使其能够灵活地为各种类型的内容创建不同的数据结构。

如何设置：

1. 安装 Sanity CLI：

   npm install -g @sanity/cli

1. 初始化一个 Sanity 项目：

   sanity init

按照提示选择项目模板并选择设置（项目名称、数据集等）。

1. 启动内容工作室：

   sanity start

这将在 http://localhost:3333 打开内容工作室。您现在可以在这里管理您的内容。

2. 架构

Sanity 中的模式定义内容的结构，类似于在数据库中定义模型。您将在 Sanity 项目的 schemas 文件夹中定义模式。

示例：创建博客架构

1. 在 schemas 文件夹中创建一个 schema 文件 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',
       },
     ],
   };

1. 将架构添加到 schema.js：

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

1. 重新启动工作室以加载新架构：

   sanity start

此架构创建博客文章的结构，包括标题、正文、作者参考和发布日期的字段。

---

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

---

5. 理智客户端

Sanity 客户端在前端框架（如 React 或 Next.js）中使用，用于从 Sanity 获取内容。它使用 GROQ，一种专门为 Sanity 设计的查询语言。

安装理智客户端：

在您的 Next.js 或 React.js 项目中，安装 Sanity 客户端：

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

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

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 进行转换：

1. 安装@sanity/image-url 包：

   npm install @sanity/image-url

1. 设置图像 URL 生成器：

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

   const builder = imageUrlBuilder(client);

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

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

此示例展示了如何从 Sanity 生成优化的图像 URL 以在组件中渲染。

---

7. 数据关系

您可以使用引用类型在 Sanity 中创建文档之间的关系。这对于链接博客作者及其帖子等数据非常有用。

示例：博客文章架构中的作者参考

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

在内容工作室中，您可以在创建博客文章时选择作者文档作为参考。

---

8. 实时协作

Sanity 提供实时协作，多个用户可以同时处理同一个文档。所有处理内容的用户都会立即看到更改。

此功能自动内置于 Sanity Studio 中，您无需进行任何特殊设置即可启用它。

---

9. 将 Sanity 与 Next.js/React.js 集成

要将 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;

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.

以上是Sanity CMS - 关于它的详细内容。更多信息请关注PHP中文网其他相关文章！