iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-SideProject30

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

將重寫原先使用 Contentful + Gatsby.js 所寫的個人部落格:
https://judysocute.com/blog/

用 Sanity 作為 CMS、Next.js 作為前端重寫此部落格。

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 11

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

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

2024-09-25 ‧ 由 Wayne Chang 分享
DAY 12

Day 12 - Sanity 圖片 url 參數解析

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

2024-09-26 ‧ 由 Wayne Chang 分享
DAY 13

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

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

2024-09-27 ‧ 由 Wayne Chang 分享
DAY 14

Day 14 - Sanity Markdown Plugin

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

2024-09-28 ‧ 由 Wayne Chang 分享
DAY 15

Day 15 - Contentful 內容轉移到 Sanity

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

2024-09-29 ‧ 由 Wayne Chang 分享
DAY 16

Day 16 - Next.js 字型設定

寫到現在才總算要把主題稍微拉回到 Next.js 了,不過這幾篇的設定主要會是集中在基礎的設定。 首先是設定字型設定,這次我選用 Noto Sans 字型跟...

2024-09-30 ‧ 由 Wayne Chang 分享
DAY 17

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

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

2024-10-01 ‧ 由 Wayne Chang 分享
DAY 18

Day 18 - 首頁樣式調整

樣式調整 一開始一樣,先初步的把首頁的樣式調整一下: import Link from "next/link"; import { clie...

2024-10-02 ‧ 由 Wayne Chang 分享
DAY 19

Day 19 - Sanity GROQ Pagination

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

2024-10-03 ‧ 由 Wayne Chang 分享
DAY 20

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

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

2024-10-04 ‧ 由 Wayne Chang 分享