😀Sanity.io là gì? Hướng dẫn dành cho người mới bắt đầu (ok)

https://medium.com/@swhabitation/what-is-sanity-a-beginner-friendly-guide-6c9427cccda8

Setting up your Studio

— Create a new Studio with Sanity CLI

npm create sanity@latest -- --project 9pljig1i --dataset production --template clean --typescript --output-path studio-lionel1
cd studio-lionel1

— Run Sanity Studio locally

npm run dev

— Log in to the Studio

 http://localhost:3333

Setting up your Studio

— Create a new document type

/studio-lionel1/schemaTypes/postType.ts

import {defineField, defineType} from 'sanity'
export const postType = defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'slug',
      type: 'slug',
      options: {source: 'title'},
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'publishedAt',
      type: 'datetime',
      initialValue: () => new Date().toISOString(),
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'image',
      type: 'image',
    }),
    defineField({
      name: 'body',
      type: 'array',
      of: [{type: 'block'}],
    }),
  ],
})

— Register the post schema type to the Studio schema

/studio-lionel1/schemaTypes/index.ts

import {postType} from './postType'
export const schemaTypes = [postType]

— Publish your first document

Querying content with GROQ

— Open the Vision tool

— Write your first GROQ query

*[_type == "post"]{ _id, title }

— Run the query

Querying content with GROQ

— Install a new Next.js application

# outside your studio directory
npx create-next-app@latest nextjs-lionel1 --tailwind --ts --app --src-dir --eslint --import-alias "@/*" --turbopack
cd nextjs-lionel1

— Install Sanity dependencies

npm install --legacy-peer-deps next-sanity @sanity/image-url

— Start the development server

npm run dev

— Configure the Sanity client

/nextjs-lionel1/src/sanity/client.ts

import { createClient } from "next-sanity";

export const client = createClient({
  projectId: "9pljig1i",
  dataset: "production",
  apiVersion: "2024-01-01",
  useCdn: false,
});

— Display content on the homepage

/nextjs-lionel1/src/app/page.tsx

import Link from "next/link";
import { type SanityDocument } from "next-sanity";
import { client } from "@/sanity/client";
const POSTS_QUERY = `*[
  _type == "post"
  && defined(slug.current)
]|order(publishedAt desc)[0...12]{_id, title, slug, publishedAt}`;
const options = { next: { revalidate: 30 } };
export default async function IndexPage() {
  const posts = await client.fetch<SanityDocument[]>(POSTS_QUERY, {}, options);
  return (
    <main className="container mx-auto min-h-screen max-w-3xl p-8">
      <h1 className="text-4xl font-bold mb-8">Posts</h1>
      <ul className="flex flex-col gap-y-4">
        {posts.map((post) => (
          <li className="hover:underline" key={post._id}>
            <Link href={`/${post.slug.current}`}>
              <h2 className="text-xl font-semibold">{post.title}</h2>
              <p>{new Date(post.publishedAt).toLocaleDateString()}</p>
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

Source:

146KB

studio-lionel1.zip

archive

Open

48KB

nextjs-lionel1.zip

archive

Open

Tokens

skagdMCzLsn5QTdGnxcHIo9XS0zxNRsAbpBwy79vc19Pzv5dAGnGkYxuPt9gOHdubOMInBGQ2HeFk03y8YQf3tMuU86dAw5lxmL8VYtOaYFNynYzlvnWpiZvSzCnwHvfYXBlTzhUCcFeQESJZjz3taSefQtrbB0WM9QMdP2OyeSpTIkwLmZb

Trước khi bước vào thế giới của Sanity , có một số điều bạn cần biết trước:

• Hệ thống quản lý nội dung (CMS)

• CMS không đầu

Hệ thống quản lý nội dung (CMS)

Bạn là người mới bắt đầu muốn tạo một trang web nhưng dường như không thể vượt qua được thuật ngữ kỹ thuật hoặc sự phức tạp của quy trình? Đừng lo lắng! Trong thế giới xây dựng trang web, có một công cụ kỳ diệu được gọi là CMS .

Theo cách kỹ thuật, hãy nghĩ về CMS (Hệ thống quản lý nội dung) như nền tảng của trang web của bạn. Đây là nơi bạn sẽ tìm thấy tất cả các thành phần bạn muốn thêm vào trang web của mình, từ văn bản đến hình ảnh đến video và mọi thứ ở giữa. Bạn có thể nghĩ về nó như một hộp công cụ kỹ thuật số với tất cả các tính năng và chức năng bạn cần để tùy chỉnh trang web của mình cho phù hợp với nhu cầu của bạn.

CMS không đầu ( Hệ thống quản lý nội dung )

Như chúng ta đã thảo luận trước đó, hãy cùng xem xét lại, Hãy tưởng tượng bạn đang xây dựng một trang web hoặc ứng dụng. Bạn có nội dung, chẳng hạn như văn bản, hình ảnh hoặc video. Bạn cần một cách để sắp xếp và cập nhật nội dung đó. Đó chính là lúc CMS xuất hiện.

CMS giống như một hộp công cụ để sắp xếp và cập nhật nội dung của bạn. Bạn không cần phải là chuyên gia về mã hóa để sử dụng nó.

Nhưng đây chính là lúc mọi chuyện trở nên khó khăn.

Trong CMS truyền thống, chẳng hạn như WordPress , CMS không chỉ lưu trữ nội dung của bạn. Nó còn quyết định nội dung của bạn sẽ trông như thế nào trên web.

Giống như một con rô-bốt nấu bữa tối cho bạn nhưng không quan tâm đến cách phục vụ.

Ngược lại, CMS không có giao diện giống như đầu bếp chỉ biết nấu ăn.

“Phần đầu” của CMS được tách biệt khỏi “phần thân” của nội dung.

CMS không cần đầu hoạt động như thế nào?

CMS không đầu lưu trữ nội dung của bạn ở một vị trí trung tâm. Sau đó, bất cứ khi nào người dùng muốn xem nội dung đó, cho dù trên trang web, ứng dụng di động hay thậm chí trên đồng hồ thông minh, họ sẽ thực hiện thông qua API. API giống như một người phục vụ mang đơn hàng của bạn vào bếp rồi mang đồ ăn của bạn trở lại.

Vì nội dung và giao diện của nội dung được tách biệt, bạn có thể thay đổi giao diện của trang web hoặc ứng dụng mà không cần thay đổi nội dung. Nếu bạn muốn cập nhật thiết kế trang web, bạn không cần phải làm gì cả. Nội dung của bạn vẫn giữ nguyên. Tất cả những gì bạn phải làm là cắm một giao diện mới (phần quyết định giao diện của mọi thứ).

Sự tỉnh táo là gì?

Hệ thống quản lý nội dung (CMS) Sanity.io là hệ thống quản lý nội dung (CMS) đa nền tảng, không có giao diện người dùng (headless) cho phép các nhà phát triển tạo và quản lý nội dung trên nhiều thiết bị và nền tảng. Sanity.io giúp bạn sắp xếp và quản lý nội dung theo cách giúp việc xây dựng và quản lý trang web, ứng dụng và trải nghiệm kỹ thuật số trở nên dễ dàng hơn.

Thật là nhiều thuật ngữ kỹ thuật😄, phải không? Chúng tôi sẽ giúp bạn hiểu dễ hơn.

Giả sử bạn đang tạo một trang web hoặc ứng dụng, như chúng tôi đã đề cập trước đó. Bạn có nội dung (văn bản, hình ảnh, video) và bạn cần sắp xếp và cập nhật nội dung đó. Đó là nơi bạn sẽ tìm thấy một công cụ như sanity.io. Đây là giải pháp tất cả trong một để sắp xếp và cập nhật nội dung của bạn mà không cần phải là chuyên gia về mã hóa.

Bạn có muốn đọc phần còn lại của bài đăng không? Đây rồi, Sanity.Io là gì? Hướng dẫn dành cho người mới bắt đầu