如何开始使用Sanity CMS

1,956 阅读4分钟

如何开始使用Sanity CMS

Sanity是一个React开源的内容管理系统。

如果你不熟悉CMS的概念,内容管理系统(CMS)是一种软件应用程序,可以让用户设计、编辑、发布和保存数字信息。

CMS使你无需从头开始就能构建应用程序,它通常用于网络和商业内容管理系统。

理智让我们专注于应用设计,而不是担心内容文件的存储和数据库。这个工具提供了有效的方法来创建可扩展和用户友好的应用程序。

先决条件

要继续学习本教程,读者需要具备以下条件。

  • 有基本的编程背景知识。
  • 安装有[Node.js]。
  • 一个代码编辑器(推荐使用VSCode)。

作为无头CMS的Sanity

无头CMS是一个仅有后台的内容管理系统,它通过API使用户设备可以访问内容,不需要内置显示层。

无头CMS依赖于JAMstack,JAMstack代表(JavaScript、API和Markup),将你的网络应用程序内容变成基于云的API,可以从任何应用程序访问。

在JAMstack中,Sanity是A,在这种情况下,是(API),因为它与你的应用程序解耦,给你的数据库提供了一个单一的真理源,以便对内容进行建模和定制。

Sanity提供了一个开源的工作室来管理内容,数据存储在内容湖中。它支持使用GraphQL、Webhooks和实时更新从CDN查询。

开始使用

设置我们的Sanity应用程序 - Sanity CLI安装

要开始使用Sanity,首先要安装Sanity CLI。

在你的终端中运行下面的命令。

npm install -g @sanity/cli

接下来,用下面的命令初始化它。

npx sanity init

Sanity 命令行界面 (CLI)

为了使用Sanity CLI,我们需要回答几个问题,以便我们能够创建一个理想的项目结构。

问题
  • 用谷歌、GitHub或电子邮件地址和密码登录。
  • 填入你的项目名称。
  • 使用数据集的默认选项。
  • 选择一个项目路线。
  • 选择一个没有预定义模式的空白项目来启动sanity。

启动sanity内容工作室

  • 在你的终端运行下面的命令。
sanity start
  • 在你的浏览器标签中,转到http://localhost:3333 (启动sanity)

sanity-studio

注意:无论何时你想启动sanity,运行localhost:3333 ;这是Sanity CMS的默认端口。

下面是我们的项目在没有预设数据的情况下应该是什么样子。

sanity-studio

看一看sanity自动创建的文件和文件夹,特别是schema文件夹。

创建模式

模式是一个计划的代表。它描述了我们的数据库将如何结构化。

默认的sanity schema.js 我们的sanity默认schema.js应该完全是这样的。

sanity-studio

默认情况下,我们只有一个schema.js文件。我们将需要因此而定义我们的模式和类型。

创建一个new.js 文件来创建一个自定义模式文件。例如nameofSchema.js 文件在schema文件夹中,在该文件内,你将编写普通的JavaScript代码。

在下面的图片中看到一个例子。

import custom schema

导入自定义模式

要使用我们的自定义模式,我们需要将其导入到默认的schema.js 文件中,并声明其类型。我们可以根据需要制作任意多的模式文件;我们所要做的就是将它们全部导入。

请看下面的图片中的一个例子。

import custom schema

让我们看一下我们的理智工作室,看看有什么变化。

sanity-studio

它似乎与最初的布局不同,因为现在我们有了内容和我们的第一个文件类型,即用户。

继续填写用户名和图片链接,发布一个新用户。我们刚刚通过建立一个模式实现了一个数据库,为用户提供了添加新内容的能力。

部署Sanity项目

继续并运行。

sanity deploy

来部署一个sanity项目。Sanity部署的应用程序是实时发生的,这意味着你在部署后在本地所做的任何改变都会反映在部署的版本中。

总结

我们学会了如何设置一个数据库,并创建一个允许用户向数据库上传新内容的模式。考虑一下,如果我们在MERN堆栈应用(MongoDB Express React和Node.js)或任何其他技术堆栈上构建这个,需要多长时间才能达到这个位置。相反,我们可以使用Sanity快速构建复杂的应用程序,因为我们不需要担心内容文件或数据库查询的问题。