sanity測試

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.

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

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

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

在考慮了多種選擇之后，出于三個原因，我選擇了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，就沒有集中式儀表板。 因此，您必須自己管理它，這具有一些非常有趣的含義。 您可以通過儀表板獲得完全的自定義，但是您還要承擔管理它的額外責任。 關于此的更多信息。

價錢 (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.

我對Headless CMS選項的最大擔憂之一是從免費套餐過渡到付費套餐。 對于個人項目，我不想每月支付$ 50 +。 好吧，有了理智，他們確實有價格上的飛躍，但是他們也有按需付費的選擇。 如果您需要更多文件存儲空間，則每月只需支付幾美元即可添加它。 查看完整的理智定價 。

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.

旁注 ：如果您想更好地控制無頭CMS成本，則可以考慮自行托管自己的無頭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的聯合創始人伸出手來提供一些說明和幫助。 我還讓Sanity的開發者擁護者Knut參加了我的一系列活動，以幫助我遷移到Sanity。 沒有什么比從Sanity團隊本身獲得一些動手幫助更具影響力的了！

創建入門項目 ( 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.

要開始使用Sanity，我們將使用一個入門項目。 您可以在此處找到入門項目的列表。

@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".

我個人是Gatsby（使用React構建的靜態網站生成器）的粉絲，因此在此演示中，我們將選擇“ 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.

要充分利用此入門模板，請同時使用Github和Netlify帳戶登錄。 這將使Sanity可以為您創建一個新的Github存儲庫，然后將Sanity Studio和Gatsby站點部署到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選項將為您托管儀表板，但我想再次強調，管理Sanity儀表板是您的責任。 您可以獲得完全的可定制性，但是您必須自己部署/托管它。 值得慶幸的是，啟動程序生成器已為您完成了Netlify的初始部署。

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

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

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

好吧，讓我們看看Sanity通過開設Sanity工作室為我們創造了什么。

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

單擊“打開Sanity Studio”按鈕。 可能會提示您登錄。

You can remove the getting started sidebar in the studio

您可以在Studio中刪除入門側邊欄

Now, look at the `Netlify Sites` section.

現在，查看“ Netlify網站”部分。

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.

創建了兩個站點。 您還將注意到，每個站點都有Netlify小部件。 這些顯示站點的當前狀態。 它們最初將處于構建狀態，但會隨著構建完成而更新。

蓋茨比網站 (Gatsby Site)

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

構建完成后，您可以打開已部署的Gatsby站點。 單擊鏈接打開您的全新網站！

Not too bad eh?

還不錯吧？

理智工作室 (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內部。 這是您當前正在查看的網站。 單擊頁面頂部的桌面按鈕/徽標。 在這里，您將看到內容創建者/編輯者。 請注意，在這個入門項目中為我們創建了一些數據類型：博客文章，作者和類別。 我們將仔細研究這些內容。

Github中的項目存儲庫 (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.

最后，入門項目為我們創建了一個存儲庫。 您可以在“項目信息”部分下找到指向倉庫的鏈接。

Go ahead and open the repo.

繼續并打開倉庫。

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.

接下來，我們將在本地檢查代碼，但是您可能已經注意到您收到有關該漏洞的一些警告。 我們還將介紹一下這些內容的更新。

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

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

抓住克隆URL，并使用以下命令將存儲庫克隆到您的計算機。

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）中打開它。 打開代碼后，您會注意到有兩個主要文件夾， studio和web 。 您可能會猜到這些相關的內容。

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

要在本地運行這兩個程序，您需要安裝NPM軟件包。

蓋茨比項目 (Gatsby Project)

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

對于Gatsby應用程序，將cd插入web目錄，然后運行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.

完成之后，運行npm run dev ，您應該看到您的應用npm run dev localhost:8000啟動。 如果您打開它，它應該看起來像我們之前看到的已部署應用程序。 盡管本文的重點不在Gatsby上，但是您可以完全控制Gatsby網站。

理智工作室 (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.

對于Sanity studio應用程序，將其cd進入studio目錄并運行npm install 。 完成后，運行npm run dev 。 這將在localhost:3333啟動Sanity studio。 您可以打開它并查看本地運行的工作室。

升級理智儀表板 ( 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存儲庫中前面所看到的，您可能有一些過時的軟件包。 如果這樣做，則需要升級Sanity儀表板，幸運的是，這很容易。

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

在studio目錄中，運行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.

完成所有這些操作后，請確保運行另一個npm install以確保package.lock.json文件得到更新以匹配軟件包的新版本。 我較早地錯過了這一步，并學到了艱難的方法。

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分支并進行推送。 這將在Netlify中觸發您的網站的新版本。

自定義架構 ( 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選項不同，有了Sanity，您可以完全控制儀表板，包括使用的數據類型。

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.

您的所有數據類型都在schemas/documents目錄中定義。 如果您看的話，將會看到作者，類別和帖子的相應架構。 繼續并更新發布架構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數組內部是存儲此數據類型的所有單個字段的位置。 它們通常具有以下屬性。

• name
  名稱
• type
  類型
• title
  標題
• 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.

因此，添加一個新字段非常簡單。 只需將另一個對象添加到fields數組即可。 對于我的博客文章，它們通常包含嵌入式YouTube視頻（如上述視頻），因此我可能想添加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!

這樣做之后，請在本地重新啟動Sanity Studio（如果它仍未運行）并簽出您的其中一篇文章。 您會在視頻鏈接中看到一個新字段！

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.

超級簡單，但有兩點要知道。 每次更新類型時，都需要確保將更改部署到Sanity GraphQL層。 為此，運行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.

其次，如果添加全新的數據類型，則需要將該數據類型導入schema.js文件。 您可以將此文件視為一個位置上所有類型的定義。 這是GraphQL層使用的架構。

結語 ( 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進行試用，那么Sanity就是一個不錯的選擇。 我喜歡定價層和可定制性，也喜歡社區。 Sanity的團隊敬業度高，樂于助人。

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

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

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

sanity測試

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。