功能完整的 Sanity Studio + React Router Vite 範本

[!WARNING]
此範本已更新至 React Router 7，但目前無法部署至 Vercel，因為他們的建置外掛程式尚未更新。請自行更新以適應您選擇的伺服器。當 Vercel 更新建置外掛程式時，它將會更新。

--

包含所有功能的 React Router 7 網站，使用 Vite 並搭配 Vercel 的部署預設，並具備 視覺化編輯功能，以便在由嵌入式 Sanity Studio 驅動的 簡報中進行互動式即時預覽。

Presentation tool in Sanity Studio

Sanity 文件 | React Router 文件

安裝

從命令列中，將此專案安裝為 React Router 範本

npx create-react-router@latest --template SimeonGriggs/sanity-react-router-template

此範本隨附一個 init 腳本，如果您選擇不執行它，您可以稍後使用以下命令執行它

npx react-router init

此腳本應使用新的或現有的 Sanity 專案的 ID 和資料集名稱的詳細資訊填入您的 .env 檔案，並建立一個會話金鑰和具有檢視者權限的 API 權杖。如果 init 腳本已被刪除，您可以透過執行以下命令輕鬆重設您的 .env 檔案

npx sanity@latest init --env

然後，啟動開發伺服器

npm run dev

現在在 localhost:5173/studio 開啟 Studio 並開始撰寫內容！

使用虛擬內容填充 Studio

您的新 Sanity 專案開始時沒有內容。此儲存庫中包含一個腳本 使用 Faker 生成內容 以開始使用。

[!WARNING]
此腳本每次執行時都會刪除資料集中現有的內容。它僅適用於新的資料集。

npx sanity@latest exec ./scripts/createData.ts --with-user-token

包含

有用的 Sanity 範例，帶有一些主觀的模式

嵌入式 Studio

從 React Router 應用程式本身存取 Sanity Studio v3。現在整個 Studio 是一個元件，它位於 /studio 路由。

在簡報中進行互動式即時預覽的視覺化編輯

由 簡報 和 @sanity/react-loader 驅動

Sanity Studio 內的經過驗證的使用者可以使用簡報工具瀏覽網站，並將特定欄位設為編輯目標，並即時查看變更。

簡報使用的資源路由（/resource/preview）將設定一個會話權杖，以便即使在簡報之外也可以看見覆蓋層。

預先設定的 Studio

Studio 已預先設定基本的「唱片收藏」架構，以及基本的 Desk Structure，以便在檢視窗格中包含即時預覽。

可攜式文字元件

由 @portabletext/react 驅動

此元件允許自訂和擴充可攜式文字在您的應用程式中呈現的方式。Sanity 中的富文字欄位是物件的陣列。內容即資料！

圖片 URL 建構器

由 @sanity/image-url 驅動

<RecordCover /> 元件有一個範例，說明如何僅根據資產的 ID 生成完整的 Sanity CDN 資產 URL。這很有用，因為我們不需要在查詢中解析完整的圖片文件。

裝飾輸入範例

由 @sanity/ui 驅動

在 Sanity Studio v3 中，建立「裝飾」輸入從未如此簡單。./app/sanity/components/Duration.tsx 是一個 13 行的範例，其中一個 number 欄位類型用於以秒為單位儲存持續時間，也可以以分鐘為單位顯示。開發人員只需付出極少的努力，即可獲得最大的作者影響。

Sanity Client 變更

由 @sanity/client 驅動

需要 .env 中具有編輯器權限的權杖。按一下唱片頁面上的喜歡/不喜歡按鈕將觸發一個 React Router 動作，該動作會將變更傳送到文件。這是一個範例，說明網站上的使用者動作如何觸發 Sanity 資料集上的變更。

類型化和驗證的回應

由 Zod 驅動

./app/routes/$slug.tsx 中的 Sanity 查詢結果會使用 Zod 驗證器進行剖析。這可確保內容始終在執行階段以預期的形狀傳回，並自動產生從 loader 饋送到 useLoaderData() 中的類型。

動態 OG 圖片

record 類型使用 ~/routes/resource.og 資源路由產生動態開放圖形圖片。

其他開發選擇

  • eslint 和 Prettier
  • 具有 @sanity/demo 預設值的 Tailwind CSS
  • Tailwind Prose 和 Prettier 外掛程式

Sanity Studio

在您的 React Router 應用程式中造訪 https://127.0.0.1:5173/studio。您需要執行以下操作

  1. 將 .env.template 重新命名為 .env
  2. 從您的 Sanity 管理中的專案設定正確的專案 ID、資料集名稱和偏好的 API 版本
  3. 將 https://127.0.0.1:5173 新增至該專案上的 CORS 設定，並具有允許憑證權限

部署

此 React Router 範本專為在 Vercel 上託管而設定。

  1. 將此儲存庫簽入您自己的原始碼控制系統（如 GitHub）並部署到 Vercel。