helloIndie Hacker Tools

Sanity 入门，开启高效内容管理之路!

Sanity 入门，开启高效内容管理之路!

Sanity Headless CMS 作为一款功能强大的无头内容管理平台，可以极大提升我们构建内容存储的效率。阅读文本之前您需要先了解一些 Sanity 基本信息，➡️传送门。本文将为您介绍 Sanity 快速入门之路。

⚡️快速入门

跟着官方的教学项目 Day One with Sanity Studio 实操一遍，基本就可以用 Sanity 开发。

Day One with Sanity Studio

🧠 GROQ

GROQ 官方文档列了不少资料，其中 GROQ Query Cheat Sheet 最实用，列举了常用查询语句，不会写的时候查查就好。

简单的查询可以让 AI 🤖 帮忙写，但如果遇到棘手的查询它可能给的答案是错的，这种时候就只能老老实实看文档了🙃。

GROQ Query Cheat Sheet

🌐 国际化

海外工具必做多语言，Sanity 的国际化功能参考官方 Localization 文档就能搞定。

其中提到的 demo-course-platform 强烈建议自己运行一遍。里面基本上已经列举了所有国际化的情况，对做国际化非常有用!

sanity demo course platform

⛰️ 图床

没错 Sanity 还能当图床使用😎，先安装 Sanity Media，然后在 Sanity Studio 配置引入插件。

// sanity.conifg.ts
import { media } from 'sanity-plugin-media'

export default defineConfig({
  plugins: [ 
    media(),
    // ...
  ]
  // ...
})
Sanity Media

🌆 图片处理

通过 @sanity/image-url 可以对图片进行裁剪、调整大小、格式转换等操作。轻松实现图片转 webp，提高图片加载速度。

import imageUrlBuilder from '@sanity/image-url'

const builder = imageUrlBuilder({
  baseUrl: 'https://my.custom.domain',
  projectId: 'abc123',
  dataset: 'production',
})
const urlFor = (source) => builder.image(source)

urlFor('image-928ac96d53b0c9049836c86ff25fd3c009039a16-200x200-png')
  .auto('format')
  .fit('max')
  .width(720)
  .toString()

// output: https://my.custom.domain/images/abc123/production/928ac96d53b0c9049836c86ff25fd3c009039a16-200x200.png?auto=format&fit=max&w=720

还可以结合 next-sanity-image 在 next.js 中更加方便使用。

🔒 数据安全

默认情况下 Sanity 数据集（dateset）是公开访问的，也就说如果别人知道你的 projectId 和 dataset 名称就可以请求你所有的数据，非常不安全。《玩转 Sanity Token 认证，保护你的数据安全》这篇文章详细介绍了如何通过 Token 认证保护我们的数据。

玩转 Sanity Token 认证，保护你的数据安全

🧑‍💻 代码高亮

先在 Sanity Studio 中安装 @sanity/code-input 插件，然后添加一些代码。

@sanity/code-input

再在客户端展示，下面用 prismjs 代码高亮库当示例。

import React, { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css"; // code theme
import 'prismjs/components/prism-jsx.min'; // jsx theme

export default function Code({ code, language }) {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  
  return (
    <pre>
      <code className={`language-${language}`}>{code}</code>
    </pre>
  );
}

📹 视频播放

How to add custom YouTube blocks to Portable Text 介绍如何在 Sanity.io 的 Portable Text 中添加自定义的 YouTube 嵌入块，亲测有用。

Portable Text editor with YouTube preview

🔥 项目实战

实战是最重要的，YouTube 上有两个不错的实战视频供参考:

1. Build a Next.js 14 Blog

技术栈：Next.js 14 + React + Sanity + Tailwind + Shadcn/Ui

2. How I use Sanity and Astro to Build Custom Content Management Systems For My Web Design Clients ⭐️

技术栈: Sanity + React + Astro

总之多动手实践，你就可以玩转 Sanity 💪。

喜欢站长
评论