將重寫原先使用 Contentful + Gatsby.js 所寫的個人部落格:
https://judysocute.com/blog/
用 Sanity 作為 CMS、Next.js 作為前端重寫此部落格。
本篇將使用 Next.js 顯示 Sanity 內部落格文章的內容。首先會建立文章列表,並且透過 next/link 將頁面導入個別文章內容。頁面 css 的話...
Sanity 圖片 url 結構 現在可以看一看一般在搜尋圖片欄位時的圖片欄位參照內容: *[_type == "blogPost" &am...
不同於上一篇的 Sanity 圖片 url 直接在查詢圖片時就把圖片 url 查詢出來或是用 _ref 組合出圖片的 url。這次要使用的是 @Sanity/i...
前面花了兩篇解決了圖片顯示的問題,接下來來解決文章顯示的問題現在我們是用 Sanity 預設的 text 型別,並且在裡面存放 markdown 格式的內容,渲...
因為我原先使用的 CMS 是 Contentful,之前寫了也有 5x 篇文章,當然是可以手動一篇一篇去搬,不過可以的話還是能找到直接 Contentful 匯...
寫到現在才總算要把主題稍微拉回到 Next.js 了,不過這幾篇的設定主要會是集中在基礎的設定。 首先是設定字型設定,這次我選用 Noto Sans 字型跟...
這是我用 ChatGPT 幫我從一個我選定的基本顏色所產生的色票集。 我選的色票顏色:#2c387e 他幫我產生的色票集是這個: import type { C...
樣式調整 一開始一樣,先初步的把首頁的樣式調整一下: import Link from "next/link"; import { clie...
不管在任何地方,要實踐 Pagination 功能最基本都要有兩個功能: 分頁 總頁面數 只要有了這兩個資訊就可以實做出一個基本的內容分頁功能了。 總頁面數...
在繼續 Next.js 前端之前,先建立一個 網站設定 的資料型別作為網站的基本資料設定的後台,裡頭包含了 metadata 的設定、favicon、精選文章、...