sanity測(cè)試

If you're looking for a headless CMS with amazing features and tons of customization, look no further than Sanity.io. I recently migrated my personal site from embedded Markdown files to Sanity, and it's been a great experience so far. So, I figured I would share what I learned with you.

如果您正在尋找具有驚人功能和大量自定義功能的無(wú)頭CMS， 那么Sanity.io就是您的最佳選擇 。 最近，我將個(gè)人網(wǎng)站從嵌入式Markdown文件遷移到Sanity，到目前為止，這是非常不錯(cuò)的體驗(yàn)。 因此，我想與您分享我學(xué)到的東西。

為什么我選擇理智 ( Why I Chose Sanity )

After considering many options, I chose Sanity for three reasons.

在考慮了多種選擇之后，出于三個(gè)原因，我選擇了Sanity。

可定制性 (Customizability)

With Sanity, there's no centralized dashboard. Because of that, you have to manage it yourself, and this has some pretty interesting implications. You get full customization over the dashboard, but you also have the extra responsibility of managing it. More on this to come.

有了Sanity，就沒(méi)有集中式儀表板。 因此，您必須自己管理它，這具有一些非常有趣的含義。 您可以通過(guò)儀表板獲得完全的自定義，但是您還要承擔(dān)管理它的額外責(zé)任。 關(guān)于此的更多信息。

價(jià)錢(qián) (Pricing)

One of my big concerns with Headless CMS options is the jump from free tier to a paid tier. For personal projects, I don't want to pay $50+ per month. Well, with Sanity, they do have a pricing jump, but they also have pay-as-you-go options. If you need more file storage, you can pay just a few bucks a month to add it. Check out the full Sanity pricing.

我對(duì)Headless CMS選項(xiàng)的最大擔(dān)憂(yōu)之一是從免費(fèi)套餐過(guò)渡到付費(fèi)套餐。 對(duì)于個(gè)人項(xiàng)目，我不想每月支付$ 50 +。 好吧，有了理智，他們確實(shí)有價(jià)格上的飛躍，但是他們也有按需付費(fèi)的選擇。 如果您需要更多文件存儲(chǔ)空間，則每月只需支付幾美元即可添加它。 查看完整的理智定價(jià) 。

Side Note: If you want more control over your headless CMS costs, you can look into self-hosting your own headless CMS like WordPress, Ghost, or Strapi.

旁注 ：如果您想更好地控制無(wú)頭CMS成本，則可以考慮自行托管自己的無(wú)頭CMS，例如WordPress ， Ghost或Strapi 。

支持 (Support)

After looking for advice on Twitter the co-founder of Sanity reached out to offer some clarifications and help. I also had Knut, a developer advocate at Sanity, join me for a series of streams to help through my migration to Sanity. There's nothing more impactful than getting some hands-on assistance from the Sanity team itself!

在Twitter上尋求建議后，Sanity的聯(lián)合創(chuàng)始人伸出手來(lái)提供一些說(shuō)明和幫助。 我還讓Sanity的開(kāi)發(fā)者擁護(hù)者Knut參加了我的一系列活動(dòng)，以幫助我遷移到Sanity。 沒(méi)有什么比從Sanity團(tuán)隊(duì)本身獲得一些動(dòng)手幫助更具影響力的了！

創(chuàng)建入門(mén)項(xiàng)目 ( Creating the Starter Project )

To get started with Sanity, we are going to use one of the starter projects. You can find the list of starter projects, here.

要開(kāi)始使用Sanity，我們將使用一個(gè)入門(mén)項(xiàng)目。 您可以在此處找到入門(mén)項(xiàng)目的列表。

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

I'm personally a fan of Gatsby (static site generator built with React), so in this demo, we will choose "Blog with Gatsby".

我個(gè)人是Gatsby（使用React構(gòu)建的靜態(tài)網(wǎng)站生成器）的粉絲，因此在此演示中，我們將選擇“ Blog with Gatsby”。

To take full advantage of this starter template, log in with both your Github and Netlify accounts. This will allow Sanity to create a new Github repository for you and then deploy the Sanity studio AND the Gatsby site to Netlify.

要充分利用此入門(mén)模板，請(qǐng)同時(shí)使用Github和Netlify帳戶(hù)登錄。 這將使Sanity可以為您創(chuàng)建一個(gè)新的Github存儲(chǔ)庫(kù)，然后將Sanity Studio和Gatsby站點(diǎn)部署到Netlify。

While many other Headless CMS options will host the dashboard for you, I want to stress again that it's your responsibility to manage the Sanity dashboard. You get full customizability, but you have to deploy/host it yourself. Thankfully, the starter generator took care of the initial deployment to Netlify for you.

盡管許多其他Headless CMS選項(xiàng)將為您托管儀表板，但我想再次強(qiáng)調(diào)，管理Sanity儀表板是您的責(zé)任。 您可以獲得完全的可定制性，但是您必須自己部署/托管它。 值得慶幸的是，啟動(dòng)程序生成器已為您完成了Netlify的初始部署。

With Sanity, it's your responsibility to manage and deploy the dashboard.

使用Sanity，您有責(zé)任管理和部署儀表板。

Alright, let's look at what Sanity created for us by opening up the Sanity studio.

好吧，讓我們看看Sanity通過(guò)開(kāi)設(shè)Sanity工作室為我們創(chuàng)造了什么。

Click the "Open Sanity Studio" button. You will probably be prompted to log in.

單擊“打開(kāi)Sanity Studio”按鈕。 可能會(huì)提示您登錄。

You can remove the getting started sidebar in the studio

您可以在Studio中刪除入門(mén)側(cè)邊欄

Now, look at the `Netlify Sites` section.

現(xiàn)在，查看“ Netlify網(wǎng)站”部分。

Two sites were created. You'll also notice that there are Netlify widgets with each of the sites. These show the current status of the sites. They will originally be in the building state but will update as the builds finish.

創(chuàng)建了兩個(gè)站點(diǎn)。 您還將注意到，每個(gè)站點(diǎn)都有Netlify小部件。 這些顯示站點(diǎn)的當(dāng)前狀態(tài)。 它們最初將處于構(gòu)建狀態(tài)，但會(huì)隨著構(gòu)建完成而更新。

蓋茨比網(wǎng)站 (Gatsby Site)

Once the build has finished, you can open your deployed Gatsby site. Click the link to open your brand new site!

構(gòu)建完成后，您可以打開(kāi)已部署的Gatsby站點(diǎn)。 單擊鏈接打開(kāi)您的全新網(wǎng)站！

Not too bad eh?

還不錯(cuò)吧？

理智工作室 (Sanity Studio)

The Sanity Studio is also deployed inside of Netlify. This is the site that you are currently viewing. Click on the desk button/logo at the top of the page. Here, you'll see the content creator/editor. Notice there are a few data types created for us in this starter project: blog posts, authors, and categories. We'll take a closer look at these in a bit.

Sanity Studio也部署在Netlify內(nèi)部。 這是您當(dāng)前正在查看的網(wǎng)站。 單擊頁(yè)面頂部的桌面按鈕/徽標(biāo)。 在這里，您將看到內(nèi)容創(chuàng)建者/編輯者。 請(qǐng)注意，在這個(gè)入門(mén)項(xiàng)目中為我們創(chuàng)建了一些數(shù)據(jù)類(lèi)型：博客文章，作者和類(lèi)別。 我們將仔細(xì)研究這些內(nèi)容。

Github中的項(xiàng)目存儲(chǔ)庫(kù) (Project Repository in Github)

Lastly, the starter project created a repository for us. You can find the link to the repo under the `Project Info` section.

最后，入門(mén)項(xiàng)目為我們創(chuàng)建了一個(gè)存儲(chǔ)庫(kù)。 您可以在“項(xiàng)目信息”部分下找到指向倉(cāng)庫(kù)的鏈接。

Go ahead and open the repo.

繼續(xù)并打開(kāi)倉(cāng)庫(kù)。

We'll check out the code locally next, but you might have noticed you get some warnings on vulnerabilities. We'll take a look at updating those in a bit as well.

接下來(lái)，我們將在本地檢查代碼，但是您可能已經(jīng)注意到您收到有關(guān)該漏洞的一些警告。 我們還將介紹一下這些內(nèi)容的更新。

查看源代碼 ( Check out the Source Code )

Grab the clone URL and clone the repo to your computer with the following command.

抓住克隆URL，并使用以下命令將存儲(chǔ)庫(kù)克隆到您的計(jì)算機(jī)。

git clone <CLONE_URL>

git clone <CLONE_URL>

Then, open it in your favorite text editor, which in my case, is VS Code. Once you get the code open, you'll notice there are two main folders, studio and web. You can probably guess what those correlate to at this point.

然后，在您喜歡的文本編輯器（在我的情況下為VS Code）中打開(kāi)它。 打開(kāi)代碼后，您會(huì)注意到有兩個(gè)主要文件夾， studio和web 。 您可能會(huì)猜到這些相關(guān)的內(nèi)容。

To run both of these locally, you'll need to install NPM packages.

要在本地運(yùn)行這兩個(gè)程序，您需要安裝NPM軟件包。

蓋茨比項(xiàng)目 (Gatsby Project)

For the Gatsby app, cd into the web directory and then run npm install.

對(duì)于Gatsby應(yīng)用程序，將cd插入web目錄，然后運(yùn)行npm install 。

After that finishes, run npm run dev and you should see that your app has started at localhost:8000. If you open it up, it should look exactly like the deployed app we saw earlier. Although the focus of this article isn't on Gatsby, you have full control over your Gatsby site.

完成之后，運(yùn)行npm run dev ，您應(yīng)該看到您的應(yīng)用npm run dev localhost:8000啟動(dòng)。 如果您打開(kāi)它，它應(yīng)該看起來(lái)像我們之前看到的已部署應(yīng)用程序。 盡管本文的重點(diǎn)不在Gatsby上，但是您可以完全控制Gatsby網(wǎng)站。

理智工作室 (Sanity Studio)

For the Sanity studio app, cd into the studio directory and run npm install. After that finishes, run npm run dev. This will start the Sanity studio at localhost:3333. You can open that and see the locally running studio.

對(duì)于Sanity studio應(yīng)用程序，將其cd進(jìn)入studio目錄并運(yùn)行npm install 。 完成后，運(yùn)行npm run dev 。 這將在localhost:3333啟動(dòng)Sanity studio。 您可以打開(kāi)它并查看本地運(yùn)行的工作室。

升級(jí)理智儀表板 ( Upgrade the Sanity Dashboard )

As you saw earlier in the Github repo, you might have some outdated packages. If you do, you'll need to upgrade the Sanity dashboard, which luckily is pretty easy.

如您在Github存儲(chǔ)庫(kù)中前面所看到的，您可能有一些過(guò)時(shí)的軟件包。 如果這樣做，則需要升級(jí)Sanity儀表板，幸運(yùn)的是，這很容易。

Inside of the studio directory, run sanity upgrade to update all of your packages.

在studio目錄中，運(yùn)行sanity upgrade以更新所有軟件包。

After all of that finishes, make sure to run another npm install to ensure that the package.lock.json file gets updated to match the new versions of the packages. I missed this step earlier and learned the hard way.

完成所有這些操作后，請(qǐng)確保運(yùn)行另一個(gè)npm install以確保package.lock.json文件得到更新以匹配軟件包的新版本。 我較早地錯(cuò)過(guò)了這一步，并學(xué)到了艱難的方法。

From there, you can add all of the updates to your master branch and push. This will trigger a new build of your site in Netlify.

從那里，您可以將所有更新添加到master分支并進(jìn)行推送。 這將在Netlify中觸發(fā)您的網(wǎng)站的新版本。

自定義架構(gòu) ( Customizing the Schema )

Finally, let's take a look at customization. Unlike other Headless CMS options, with Sanity, you get full control over your dashboard including the types of data you work with.

最后，讓我們看一下定制。 與其他Headless CMS選項(xiàng)不同，有了Sanity，您可以完全控制儀表板，包括使用的數(shù)據(jù)類(lèi)型。

All of your data types are defined in the schemas/documents directory. If you look, you'll see the corresponding schemas for author, category, and post. Go ahead and update the post schema, post.js.

您的所有數(shù)據(jù)類(lèi)型都在schemas/documents目錄中定義。 如果您看的話(huà)，將會(huì)看到作者，類(lèi)別和帖子的相應(yīng)架構(gòu)。 繼續(xù)并更新發(fā)布架構(gòu)post.js

Inside of the fields array is where all of the individual fields for this data type are stored. They typically have the following properties.

在fields數(shù)組內(nèi)部是存儲(chǔ)此數(shù)據(jù)類(lèi)型的所有單個(gè)字段的位置。 它們通常具有以下屬性。

• name
  名稱(chēng)
• type
  類(lèi)型
• title
  標(biāo)題
• description
  描述

So, to add a new field, it's pretty easy. Just add another object to the fields array. For my blog posts, they often include an embedded YouTube video (like the one above), so I might want to add a link for a YouTube video.

因此，添加一個(gè)新字段非常簡(jiǎn)單。 只需將另一個(gè)對(duì)象添加到fields數(shù)組即可。 對(duì)于我的博客文章，它們通常包含嵌入式Y(jié)ouTube視頻（如上述視頻），因此我可能想添加YouTube視頻的鏈接。

{name: 'videoLink',type: 'string',title: 'Link for the Video',description: 'link for the video' },

After doing so, restart the Sanity studio locally (if it wasn't still running) and check out one of your posts. You'll see a new field for the video link!

這樣做之后，請(qǐng)?jiān)诒镜刂匦聠?dòng)Sanity Studio（如果它仍未運(yùn)行）并簽出您的其中一篇文章。 您會(huì)在視頻鏈接中看到一個(gè)新字段！

That's super easy but there are two important things to know. Any time you update your types, you'll need to make sure you deploy the changes to the Sanity GraphQL layer. To do so, run sanity graphql deploy.

超級(jí)簡(jiǎn)單，但有兩點(diǎn)要知道。 每次更新類(lèi)型時(shí)，都需要確保將更改部署到Sanity GraphQL層。 為此，運(yùn)行sanity graphql deploy 。

Secondly, if you add a completely new data type, you'll need to import that data type into the schema.js file. You can think of this file as being the definition of all of your types in one place. This is the schema that the GraphQL layer uses.

其次，如果添加全新的數(shù)據(jù)類(lèi)型，則需要將該數(shù)據(jù)類(lèi)型導(dǎo)入schema.js文件。 您可以將此文件視為一個(gè)位置上所有類(lèi)型的定義。 這是GraphQL層使用的架構(gòu)。

結(jié)語(yǔ) ( Wrap Up )

If you're looking for a new Headless CMS to try out, Sanity is a great one to start with. I love the pricing tier and the customizability, but also the community. The team at Sanity is engaged and extremely helpful.

如果您正在尋找一種新的Headless CMS進(jìn)行試用，那么Sanity就是一個(gè)不錯(cuò)的選擇。 我喜歡定價(jià)層和可定制性，也喜歡社區(qū)。 Sanity的團(tuán)隊(duì)敬業(yè)度高，樂(lè)于助人。

I'm curious, what CMS options are you using? How do you like it? Let us know in the comments below.

我很好奇，您正在使用哪些CMS選項(xiàng)？ 你喜歡嗎？ 在下面的評(píng)論中讓我們知道。

翻譯自: https://scotch.io/tutorials/getting-started-with-sanityio-a-headless-cms-you-can-customize

sanity測(cè)試

總結(jié)

以上是生活随笔為你收集整理的sanity测试_Sanity.io入门-您可以自定义的无头CMS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。