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

0 Like 0 留言 981 瀏覽

鐵人賽 Modern Web DAY 27

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 27 篇

技術在 kbar Command Palette 實作文章搜尋 - Modern Next.js Blog 系列 #27

這是「Modern Blog 30 天」系列第 27 篇文章。上一篇加完了 Command Palette 指令面板，這篇我們來繼續擴充它，讓 Command...

EasonChang ‧ 2022-10-12

0 Like 0 留言 1193 瀏覽

鐵人賽 Modern Web DAY 24

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 24 篇

技術在 MDX 文章側邊加入目錄 - Modern Next.js Blog 系列 #24

上一篇加完了換頁進度條，這篇我們繼續加入另一個炫砲且實用的功能：「文章側邊目錄」，讓讀者一目瞭然文章結構！最終效果如下：這篇修改的程式碼如下： http...

EasonChang ‧ 2022-10-09

1 Like 0 留言 1769 瀏覽

鐵人賽 Modern Web DAY 23

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 23 篇

技術使用 nprogress 加入換頁進度條 - Modern Next.js Blog 系列 #23

這是「Modern Blog 30 天」系列第 23 篇文章。上一篇優化完了內文圖片效能，這篇我們繼續來改善讀者體感效能，使用 nprogress 來加入換頁...

EasonChang ‧ 2022-10-08

0 Like 0 留言 1342 瀏覽

鐵人賽 Modern Web DAY 22

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 22 篇

技術圖片效能最佳化，使用 Next.js Image、plaiceholder、客製 MDX 元件 - Modern Next.js Blog 系列 #22

網站效能瓶頸通常是圖片讀取速度太慢。為了提升讀者體驗、和 SEO 分數，這一篇我們來最佳化內文圖片效能！這篇修改的程式碼如下：https://github....

EasonChang ‧ 2022-10-07

0 Like 0 留言 972 瀏覽

鐵人賽 Modern Web DAY 21

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 21 篇

技術強化內文連結換頁速度、加入外部連結 icon - Modern Next.js Blog 系列 #21

TL;DR 這是「Modern Blog 30 天」系列第 21 篇文章，上一篇我們在內文小標題加入 anchor 錨點了，這篇我們會來修改內文 CustomL...

EasonChang ‧ 2022-10-06

0 Like 0 留言 1330 瀏覽

鐵人賽 Modern Web DAY 19

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 19 篇

技術使用 feed 生成 RSS Feed - Modern Next.js Blog 系列 #19

TL;DR 這是「Modern Blog 30 天」系列第 19 篇文章，上一篇我們做完 Sitemap 生成了，這篇接著來做非常相似的 RSS Feed 生成...

EasonChang ‧ 2022-10-04

0 Like 0 留言 1213 瀏覽

鐵人賽 Modern Web DAY 16

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 16 篇

技術加入程式碼區塊「複製按鈕」，使用客製化 MDX 元件 - Modern Next.js Blog 系列 #16

上一篇我們讓程式碼區塊顯示了標題，這篇我們繼續讓它更好用，來加入「複製按鈕」！結果截圖如下：這篇修改的程式碼如下：https://github.com...

EasonChang ‧ 2022-10-01

0 Like 0 留言 988 瀏覽

鐵人賽 Modern Web DAY 15

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 15 篇

技術加入程式碼區塊標題，使用 rehype-code-titles - Modern Next.js Blog 系列 #15

上一篇我們讓程式碼區塊支援 Syntax Highlighting 了，這篇我們來讓它多出區塊標題！這篇修改的程式碼如下：https://github.co...

EasonChang ‧ 2022-09-30

0 Like 0 留言 789 瀏覽

鐵人賽 Modern Web DAY 14

Full Stack Web Development 網站實作系列第 14 篇

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...

tjabi ‧ 2022-09-29

0 Like 0 留言 1138 瀏覽

鐵人賽 Modern Web DAY 13

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 13 篇

技術文章內頁樣式切版 - Modern Next.js Blog 系列 #13

TL;DR 這是「Modern Blog 30 天」系列第 13 篇文章，上一篇我們使用 Tailwind CSS 美化了首頁樣式，這篇我們會繼續美化文章內頁樣...

EasonChang ‧ 2022-09-28

0 Like 0 留言 872 瀏覽

鐵人賽 Modern Web DAY 12

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 12 篇

技術首頁樣式切版 - Modern Next.js Blog 系列 #12

TL;DR 這是「Modern Blog 30 天」系列第 12 篇文章，上一篇我們使用 Tailwind CSS 美化了 navbar, footer 等全站...

EasonChang ‧ 2022-09-27

0 Like 0 留言 1586 瀏覽

鐵人賽 Modern Web DAY 11

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 11 篇

技術全站樣式切版 - Modern Next.js Blog 系列 #11

TL;DR 這是「Modern Blog 30 天」系列第 11 篇文章，上一篇我們在 Next.js blog 搭配 Tailwind CSS 加入了「暗黑模...

EasonChang ‧ 2022-09-26

0 Like 0 留言 3092 瀏覽

鐵人賽 Modern Web DAY 10

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 10 篇

技術 Dark Mode 深色模式支援，使用 Tailwind CSS、next-themes - Modern Next.js Blog 系列 #10

這篇我們來讓上一篇安裝完的 Tailwind CSS 支援暗黑模式（深色模式、Dark mode）。並搭配 next-themes 管理主題切換以及偏好主題的...

EasonChang ‧ 2022-09-25

0 Like 0 留言 1724 瀏覽

鐵人賽 Modern Web DAY 6

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 6 篇

技術首頁功能實作，加入 Contentlayer 文章列表 - Modern Next.js Blog 系列 #06

讓我們使用上一篇安裝的 Contentlayer，實作首頁文章列表功能，呈現所有 Markdown 文章。結果截圖如下：這篇修改的程式碼如下：https...

EasonChang ‧ 2022-09-21

0 Like 0 留言 1987 瀏覽

鐵人賽 Modern Web DAY 5

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 5 篇

技術 Markdown 簡介 & 安裝 ContentLayer - Modern Next.js Blog 系列 #05

這篇我們來簡介如何使用 Markdown 語法撰寫文章，以及安裝 Contentlayer 將 Markdown 檔案轉換成文章。這篇完整程式碼改動可以在這...

EasonChang ‧ 2022-09-20

0 Like 0 留言 584 瀏覽

鐵人賽 Modern Web DAY 6

Full Stack Web Development 網站實作系列第 6 篇

技術 Day 6 使用Next.js - 開始 coding 一個非常簡單的 blog (1)

Setup 好 Next.js 環境後，可以開始 coding，做一個非常簡單的 blog。首先，在 n02-blog/pages 目錄下，新增一個檔案 i...

tjabi ‧ 2022-09-21

0 Like 0 留言 2563 瀏覽

鐵人賽 Modern Web DAY 3

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 3 篇

技術將 Next.js 專案部署上 Vercel 平台 - Modern Next.js Blog 系列 #03

這篇文章會介紹 Vercel 架站平台、如何把 Next.js 專案部署上去、以及綁定 Github 實現持續部署。內容如下： Vercel 架站平台介紹...

EasonChang ‧ 2022-09-18

0 Like 1 留言 3789 瀏覽

鐵人賽 Modern Web DAY 1

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 1 篇

技術「從零開始打造炫砲個人部落格」系列簡介 - Modern Next.js Blog 系列 #01

歡迎來到 30 天「從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術」系列！這系列我們會在 30 天...

EasonChang ‧ 2022-09-16

0 Like 0 留言 1939 瀏覽

鐵人賽 Modern Web DAY 29

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 29 篇

技術 #29 No-code 之旅 — 部署至 Vercel

哇倒數一天！最近都在準備把專案推上去 production 了，大家可以看看 Next.js 整理的推上 production 之前的注意事項。我們今天來走一...

Jade ‧ 2021-10-14

1 Like 1 留言 3299 瀏覽

鐵人賽 Modern Web DAY 28

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 28 篇

技術 #28 No-code 之旅 — 客製化 Next.js 的錯誤頁面

嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項，其中一項就是...

Jade ‧ 2021-10-13

0 Like 0 留言 1362 瀏覽

鐵人賽 Modern Web DAY 27

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 27 篇

技術 #27 No-code 之旅 — 客製化 Favicon ～

嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon...

Jade ‧ 2021-10-12

1 Like 0 留言 2092 瀏覽

鐵人賽 Modern Web DAY 26

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 26 篇

技術 #26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

連假結束了Ｑ今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark...

Jade ‧ 2021-10-11

0 Like 0 留言 2174 瀏覽

鐵人賽 Modern Web DAY 25

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 25 篇

技術 #25 No-code 之旅 — 實作 Notion 部落格 Pagination (分頁) 功能 ft. SWR

嗨大家！像昨天說的，今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能～還沒看昨天的文章的大家，可以點這裡，今天的文章...

Jade ‧ 2021-10-10

0 Like 0 留言 1732 瀏覽

鐵人賽 Modern Web DAY 24

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 24 篇

技術 #24 No-code 之旅 — 在 Next.js 專案中實作 API

嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這...

Jade ‧ 2021-10-09

1 Like 0 留言 2483 瀏覽

鐵人賽 Modern Web DAY 23

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 23 篇

技術 #23 No-code 之旅 — Next.js 網站可以部署到哪裡呢？

大家～今天文章會也會很短Ｑ昨天講了靜態網站可以部署到哪裡之後，今天來講 Next.js 的專案可以部署到哪？Next.js 專案基本上是用 Node.js...

Jade ‧ 2021-10-08

1 Like 0 留言 17244 瀏覽

鐵人賽 Modern Web DAY 21

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 21 篇

技術 #21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介

大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會...

Jade ‧ 2021-10-06

0 Like 0 留言 1188 瀏覽

鐵人賽 Modern Web DAY 20

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 20 篇

技術 #20 No-code 之旅 — Analytics ft. Google Analytics & Splitbee

嗨！今天的主題是加 analytics 到網站 (專案) 裡～講到 analytics，大家通常會想到 Google Analytics，所以今天會分享怎麼加...

Jade ‧ 2021-10-05

0 Like 0 留言 1478 瀏覽

鐵人賽 Modern Web DAY 18

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 18 篇

技術 #18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK

嗨大家～像昨天文章裡提的，這專案會採用 Notion 來當 CMS (包含資料庫)，意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以，這專案需...

Jade ‧ 2021-10-03

0 Like 0 留言 978 瀏覽

鐵人賽 Modern Web DAY 17

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 17 篇

技術 #17 No-code 之旅 — 專案架構

今天先建立專案，還有開始慢慢地定架構，裝 dependencies ～ Setup 這專案想要用 Next.js + TypeScript 寫，所以用下面指令...

Jade ‧ 2021-10-02

0 Like 0 留言 525 瀏覽

鐵人賽 Modern Web DAY 17

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 17 篇

技術 [Day 17]獨自一人的全端攻略(前端篇)

挑戰目標: MockNative Camp 最近這兩年在工作上一直想要有同事可以交流進步，或者是遇到可以學習的同事，但終究在這兩份工作中都屬於自己一個人單打獨...

Moscle.dev ‧ 2021-10-02

技術 在 kbar Command Palette 實作文章搜尋 - Modern Next.js Blog 系列 #27

技術 在 MDX 文章側邊加入目錄 - Modern Next.js Blog 系列 #24

技術 使用 nprogress 加入換頁進度條 - Modern Next.js Blog 系列 #23

技術 圖片效能最佳化，使用 Next.js Image、plaiceholder、客製 MDX 元件 - Modern Next.js Blog 系列 #22

技術 強化內文連結換頁速度、加入外部連結 icon - Modern Next.js Blog 系列 #21

技術 使用 feed 生成 RSS Feed - Modern Next.js Blog 系列 #19

技術 加入程式碼區塊「複製按鈕」，使用客製化 MDX 元件 - Modern Next.js Blog 系列 #16

技術 加入程式碼區塊標題，使用 rehype-code-titles - Modern Next.js Blog 系列 #15