iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 204 瀏覽

鐵人賽佛心分享-SideProject30 DAY 1

用 Sanity 跟 Nextjs 重寫個人部落格系列第 1 篇

技術 Day 1 - 前言

個人簡介哈囉哈囉大家好！我是在外商公司的全端工程師，寫程式寫7年了。系列簡介將使用 Sanity 跟 Next.js 重寫將近兩年沒有維護了的個人部落格作...

Wayne Chang ‧ 2024-09-15

0 Like 0 留言 178 瀏覽

鐵人賽佛心分享-SideProject30 DAY 29

用 Sanity 跟 Nextjs 重寫個人部落格系列第 29 篇

技術 Day 29 - Next.js 與 Sanity 的 Security 驗證

在要寫前一篇的後續：「Sanity Visual Editing 跟 Next.js 的 Security 驗證」時，發現自己前面寫得太開心，自己都沒有注意到安...

Wayne Chang ‧ 2024-10-13

0 Like 0 留言 164 瀏覽

鐵人賽佛心分享-SideProject30 DAY 19

用 Sanity 跟 Nextjs 重寫個人部落格系列第 19 篇

技術 Day 19 - Sanity GROQ Pagination

不管在任何地方，要實踐 Pagination 功能最基本都要有兩個功能：分頁總頁面數只要有了這兩個資訊就可以實做出一個基本的內容分頁功能了。總頁面數...

Wayne Chang ‧ 2024-10-03

0 Like 0 留言 153 瀏覽

鐵人賽佛心分享-SideProject30 DAY 10

用 Sanity 跟 Nextjs 重寫個人部落格系列第 10 篇

技術 Day 10 - Sanity GROQ 語法入門

GROQ ( Graph-Relational Object Queries ) 語法是 Sanity 自己開發的 open-source 查詢語法。儘管 S...

Wayne Chang ‧ 2024-09-24

0 Like 0 留言 134 瀏覽

鐵人賽佛心分享-SideProject30 DAY 4

用 Sanity 跟 Nextjs 重寫個人部落格系列第 4 篇

技術 Day 4 - Sanity preview 設定

先拿一張 Sanity 官方的圖片可以看到 preview 分為三個部分。 title subtitle media 所以設計 preview 就是要怎麼...

Wayne Chang ‧ 2024-09-18

0 Like 0 留言 134 瀏覽

鐵人賽佛心分享-SideProject30 DAY 8

用 Sanity 跟 Nextjs 重寫個人部落格系列第 8 篇

技術 Day 8 - Sanity 產生 TypeScript 型別檔

Sanity TypeGen Sanity TypeGen 可以透過分析 Sanity 定義的 schema 跟使用 GROQ String helper 定義...

Wayne Chang ‧ 2024-09-22

0 Like 0 留言 126 瀏覽

鐵人賽佛心分享-SideProject30 DAY 30

用 Sanity 跟 Nextjs 重寫個人部落格系列第 30 篇

技術 Day 30 - Sanity Visual Editing 即時響應 & 完賽心得

其實在上一篇就有寫到這段了，只是沒有特別講到而已，現在再拉出來特別講一下重點區域，主要是 sanityFetch() 方法： import "serv...

Wayne Chang ‧ 2024-10-14

0 Like 0 留言 126 瀏覽

鐵人賽佛心分享-SideProject30 DAY 20

用 Sanity 跟 Nextjs 重寫個人部落格系列第 20 篇

技術 Day 20 - 建立網站設定資料型別

在繼續 Next.js 前端之前，先建立一個網站設定的資料型別作為網站的基本資料設定的後台，裡頭包含了 metadata 的設定、favicon、精選文章、...

Wayne Chang ‧ 2024-10-04

0 Like 0 留言 119 瀏覽

鐵人賽佛心分享-SideProject30 DAY 6

用 Sanity 跟 Nextjs 重寫個人部落格系列第 6 篇

技術 Day 6 - Sanity initialValue ( 欄位預設值 )

在 Sanity 中，替某些欄位加入預設值是可以加快開發時程的，像是發布日期預設在當天、各種不同樣板等等。Sanity 裡有兩種方法可以設置欄位預設值，一種是在...

Wayne Chang ‧ 2024-09-20

0 Like 0 留言 118 瀏覽

鐵人賽佛心分享-SideProject30 DAY 28

用 Sanity 跟 Nextjs 重寫個人部落格系列第 28 篇

技術 Day 28 - Next.js Draft Mode With Sanity Visual Editing

前一篇設定了 Sanity Visual Editing 到頁面上，但是也因此影響了 Next.js 的前端頁面，讓整個前端頁面都套用了 Visual Edit...

Wayne Chang ‧ 2024-10-12

0 Like 0 留言 109 瀏覽

鐵人賽佛心分享-SideProject30 DAY 23

用 Sanity 跟 Nextjs 重寫個人部落格系列第 23 篇

技術 Day 23 - Next.js 使用 Sanity 網站設定

本篇開始使用前一篇建立的網站設定表單來建立一些網站的基本樣式，像是 Navbar、Footer 、 metadata 等。第一件要做的是老樣子，寫好 Qu...

Wayne Chang ‧ 2024-10-07

0 Like 0 留言 106 瀏覽

鐵人賽佛心分享-SideProject30 DAY 2

用 Sanity 跟 Nextjs 重寫個人部落格系列第 2 篇

技術 Day 2 - Sanity 安裝與配置

首先到 Sanity 的官網申請帳號。註冊完成後會導到管理頁面，在點擊上方的 Create new project 這邊選 Form scratch with...

Wayne Chang ‧ 2024-09-16

0 Like 0 留言 106 瀏覽

鐵人賽佛心分享-SideProject30 DAY 17

用 Sanity 跟 Nextjs 重寫個人部落格系列第 17 篇

技術 Day 17 - CSS 設定色票、基本排版

這是我用 ChatGPT 幫我從一個我選定的基本顏色所產生的色票集。我選的色票顏色：#2c387e 他幫我產生的色票集是這個： import type { C...

Wayne Chang ‧ 2024-10-01

0 Like 0 留言 96 瀏覽

鐵人賽佛心分享-SideProject30 DAY 7

用 Sanity 跟 Nextjs 重寫個人部落格系列第 7 篇

技術 Day 7 - Next.js 與 Sanity 專案連線

講了六篇 Sanity 設定，也是時候把前端專案啟動起來了。啟動 Next.js 專案使用 create-next-app 啟動一個空的 Next.js 專...

Wayne Chang ‧ 2024-09-21

0 Like 0 留言 96 瀏覽

鐵人賽佛心分享-SideProject30 DAY 3

用 Sanity 跟 Nextjs 重寫個人部落格系列第 3 篇

技術 Day 3 - Sanity 資料型別規劃

Sanity schema 首先來了解一下 Sanity 的 schema 是如何定義的。看看 sanity.config.ts // ... import {...

Wayne Chang ‧ 2024-09-17

0 Like 0 留言 93 瀏覽

鐵人賽佛心分享-SideProject30 DAY 27

用 Sanity 跟 Nextjs 重寫個人部落格系列第 27 篇

技術 Day 27 - Sanity Visual Editing

一直在想要不要寫這個主題，因為 Visual Editing 這個需要介紹的技術實在太多了，從 Sanity 本身的設定到 Next.js 前端專案的設定，是一...

Wayne Chang ‧ 2024-10-11

0 Like 0 留言 85 瀏覽

鐵人賽佛心分享-SideProject30 DAY 5

用 Sanity 跟 Nextjs 重寫個人部落格系列第 5 篇

技術 Day 5 - Sanity Validation ( 欄位驗證 )

Sanity 是可以定義”必填”、”欄位限制條件”及”提示訊息”等諸如此類的。 export default defineType({ // ... f...

Wayne Chang ‧ 2024-09-19

0 Like 0 留言 83 瀏覽

鐵人賽佛心分享-SideProject30 DAY 15

用 Sanity 跟 Nextjs 重寫個人部落格系列第 15 篇

技術 Day 15 - Contentful 內容轉移到 Sanity

因為我原先使用的 CMS 是 Contentful，之前寫了也有 5x 篇文章，當然是可以手動一篇一篇去搬，不過可以的話還是能找到直接 Contentful 匯...

Wayne Chang ‧ 2024-09-29

0 Like 0 留言 81 瀏覽

鐵人賽佛心分享-SideProject30 DAY 9

用 Sanity 跟 Nextjs 重寫個人部落格系列第 9 篇

技術 Day 9 - Sanity TypeGen 進階設定

型別檔輸出設定 ( sanity-typegen.json ) 前一篇講那麼久，都是輸出型別檔後，再手動複製型別檔到其他專案內，或是輸出的檔名固定是 sanit...

Wayne Chang ‧ 2024-09-23

0 Like 0 留言 74 瀏覽

鐵人賽佛心分享-SideProject30 DAY 14

用 Sanity 跟 Nextjs 重寫個人部落格系列第 14 篇

技術 Day 14 - Sanity Markdown Plugin

前面花了兩篇解決了圖片顯示的問題，接下來來解決文章顯示的問題現在我們是用 Sanity 預設的 text 型別，並且在裡面存放 markdown 格式的內容，渲...

Wayne Chang ‧ 2024-09-28

0 Like 0 留言 72 瀏覽

鐵人賽佛心分享-SideProject30 DAY 11

用 Sanity 跟 Nextjs 重寫個人部落格系列第 11 篇

技術 Day 11 - Next.js 顯示 Sanity 文章內容

本篇將使用 Next.js 顯示 Sanity 內部落格文章的內容。首先會建立文章列表，並且透過 next/link 將頁面導入個別文章內容。頁面 css 的話...

Wayne Chang ‧ 2024-09-25

0 Like 0 留言 70 瀏覽

鐵人賽佛心分享-SideProject30 DAY 12

用 Sanity 跟 Nextjs 重寫個人部落格系列第 12 篇

技術 Day 12 - Sanity 圖片 url 參數解析

Sanity 圖片 url 結構現在可以看一看一般在搜尋圖片欄位時的圖片欄位參照內容： *[_type == "blogPost" &am...

Wayne Chang ‧ 2024-09-26

0 Like 0 留言 67 瀏覽

鐵人賽佛心分享-SideProject30 DAY 13

用 Sanity 跟 Nextjs 重寫個人部落格系列第 13 篇

技術 Day 13 - @Sanity/image-url + Next.js

不同於上一篇的 Sanity 圖片 url 直接在查詢圖片時就把圖片 url 查詢出來或是用 _ref 組合出圖片的 url。這次要使用的是 @Sanity/i...

Wayne Chang ‧ 2024-09-27

0 Like 0 留言 67 瀏覽

鐵人賽佛心分享-SideProject30 DAY 25

用 Sanity 跟 Nextjs 重寫個人部落格系列第 25 篇

技術 Day 25 - Sanity Webhook 創立與 Header 解析

要設定 Sanity 的 Webhook 要從右上角這邊進入管理頁面：進入管理頁面後到 API > Webhooks 內設定 Webhook 按 C...

Wayne Chang ‧ 2024-10-09

0 Like 0 留言 65 瀏覽

鐵人賽佛心分享-SideProject30 DAY 21

用 Sanity 跟 Nextjs 重寫個人部落格系列第 21 篇

技術 Day 21 - Next.js 載入更多文章

在 Day 19 - Sanity GROQ Pagination 中有提到網頁的幾種分頁模式：我原本的網站是用分頁式的，這一次重做網站我打算改用 Lo...

Wayne Chang ‧ 2024-10-05

0 Like 0 留言 64 瀏覽

鐵人賽佛心分享-SideProject30 DAY 26

用 Sanity 跟 Nextjs 重寫個人部落格系列第 26 篇

技術 Day 26 - Next.js + Sanity Webhook

在 Next.js 中使用 Sanity Webhook 很簡單，官方也有準備好各種的套件給使用者使用，如果是有跟著本系列開啟 Next.js 專案的話，可以使...

Wayne Chang ‧ 2024-10-10