iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
自我挑戰組

中年大叔(40+)前端自學筆記 系列

這是一個七年級大叔在閒暇之餘
寫一些個人自學過程中的筆記與心得分享

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

DAY11 - 網頁使用自訂的字型

這邊用到的字型來自Google Font 挑一款自己喜歡的字型吧 編輯 app\fonts.js 檔案內如下: import { Orbitron } from...

DAY 12

DAY12 - 建立最簡響應式頁面

編輯 app\page.jsx 檔案內容如下: import Link from "next/link" import Heading fr...

DAY 13

DAY13 - 讀取Markdown文件檔與渲染到網頁上

安裝所需套件 npm i -D marked npm install -D @tailwindcss/typography npm install -D gra...

DAY 14

DAY14 - Review頁面重構

編輯 app\reviews\stardew-valley\page.jsx 檔案內容如下: import { readFile } from "no...

DAY 15

DAY15 - 在動態路由下產生靜態網頁SSG

app\reviews[slug]\page.jsx // 產生靜態頁面 export async function generateStaticParams(...

DAY 16

DAY16 - 增加排序功能

lib\reviews.js export async function getReviews() { const slugs = await get...

DAY 17

DAY17 - 網頁metadata 設定

app\page.jsx import Link from "next/link" import Heading from "@/...

DAY 18

DAY18 - 線上部署

今天的內容是要把進行中的專案部署到網路上Next.js 是由Vercel這家公司所開發的所以可以把Next.js專案免費部署到Vercel基本上只要先將專案gi...

DAY 19

DAY19 - Headless CMS

Headless CMS: A headless Content Management System, or headless CMS, is a back e...

DAY 20

DAY20 - Fetch Api (內容未整理)

http://localhost:1337/api/reviews資料格式 測試api (在前端資料夾) 後端需要啟動ironman_2023\scripts\...