其實在上一篇就有寫到這段了,只是沒有特別講到而已,現在再拉出來特別講一下重點區域,主要是 sanityFetch() 方法: import "serv...
在要寫前一篇的後續:「Sanity Visual Editing 跟 Next.js 的 Security 驗證」時,發現自己前面寫得太開心,自己都沒有注意到安...
前一篇設定了 Sanity Visual Editing 到頁面上,但是也因此影響了 Next.js 的前端頁面,讓整個前端頁面都套用了 Visual Edit...
一直在想要不要寫這個主題,因為 Visual Editing 這個需要介紹的技術實在太多了,從 Sanity 本身的設定到 Next.js 前端專案的設定,是一...
在 Next.js 中使用 Sanity Webhook 很簡單,官方也有準備好各種的套件給使用者使用,如果是有跟著本系列開啟 Next.js 專案的話,可以使...
要設定 Sanity 的 Webhook 要從右上角這邊進入管理頁面: 進入管理頁面後到 API > Webhooks 內設定 Webhook 按 C...
本篇開始使用前一篇建立的 網站設定 表單來建立一些網站的基本樣式,像是 Navbar、Footer 、 metadata 等。 第一件要做的是老樣子,寫好 Qu...
在 Day 19 - Sanity GROQ Pagination 中有提到網頁的幾種分頁模式: 我原本的網站是用 分頁式 的,這一次重做網站我打算改用 Lo...
在繼續 Next.js 前端之前,先建立一個 網站設定 的資料型別作為網站的基本資料設定的後台,裡頭包含了 metadata 的設定、favicon、精選文章、...
不管在任何地方,要實踐 Pagination 功能最基本都要有兩個功能: 分頁 總頁面數 只要有了這兩個資訊就可以實做出一個基本的內容分頁功能了。 總頁面數...
這是我用 ChatGPT 幫我從一個我選定的基本顏色所產生的色票集。 我選的色票顏色:#2c387e 他幫我產生的色票集是這個: import type { C...
因為我原先使用的 CMS 是 Contentful,之前寫了也有 5x 篇文章,當然是可以手動一篇一篇去搬,不過可以的話還是能找到直接 Contentful 匯...
前面花了兩篇解決了圖片顯示的問題,接下來來解決文章顯示的問題現在我們是用 Sanity 預設的 text 型別,並且在裡面存放 markdown 格式的內容,渲...
不同於上一篇的 Sanity 圖片 url 直接在查詢圖片時就把圖片 url 查詢出來或是用 _ref 組合出圖片的 url。這次要使用的是 @Sanity/i...
Sanity 圖片 url 結構 現在可以看一看一般在搜尋圖片欄位時的圖片欄位參照內容: *[_type == "blogPost" &am...
本篇將使用 Next.js 顯示 Sanity 內部落格文章的內容。首先會建立文章列表,並且透過 next/link 將頁面導入個別文章內容。頁面 css 的話...
GROQ ( Graph-Relational Object Queries ) 語法是 Sanity 自己開發的 open-source 查詢語法。儘管 S...
型別檔輸出設定 ( sanity-typegen.json ) 前一篇講那麼久,都是輸出型別檔後,再手動複製型別檔到其他專案內,或是輸出的檔名固定是 sanit...
Sanity TypeGen Sanity TypeGen 可以透過分析 Sanity 定義的 schema 跟使用 GROQ String helper 定義...
講了六篇 Sanity 設定,也是時候把前端專案啟動起來了。 啟動 Next.js 專案 使用 create-next-app 啟動一個空的 Next.js 專...
在 Sanity 中,替某些欄位加入預設值是可以加快開發時程的,像是發布日期預設在當天、各種不同樣板等等。Sanity 裡有兩種方法可以設置欄位預設值,一種是在...
Sanity 是可以定義”必填”、”欄位限制條件”及”提示訊息”等諸如此類的。 export default defineType({ // ... f...
先拿一張 Sanity 官方的圖片 可以看到 preview 分為三個部分。 title subtitle media 所以設計 preview 就是要怎麼...
Sanity schema 首先來了解一下 Sanity 的 schema 是如何定義的。看看 sanity.config.ts // ... import {...
首先到 Sanity 的官網申請帳號。註冊完成後會導到 管理頁面,在點擊上方的 Create new project 這邊選 Form scratch with...
個人簡介 哈囉哈囉大家好!我是在外商公司的全端工程師,寫程式寫7年了。 系列簡介 將使用 Sanity 跟 Next.js 重寫將近兩年沒有維護了的個人部落格作...