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

0 Like 0 留言 129 瀏覽

鐵人賽自我挑戰組 DAY 30

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

技術 DAY30 - 三十天功德圓滿

終於到了第三十天，算是草草的結束這次的鐵人賽...文章寫到後面水分比西瓜還多，看來了下次的鐵人賽還是要把內容都預先準備起來，如果要每天寫文章變數太大一下停電一下...

不惑的胖虎 ‧ 2023-10-15

0 Like 0 留言 238 瀏覽

鐵人賽自我挑戰組 DAY 29

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

技術 DAY29 - 我使用的字幕翻譯的外掛(chrome)

按照課程的內容，大概寫不完了，今天也整天都在外面忙所以簡單介紹一下，我目前使用的chrome 外掛 for Udemy 課程的字幕翻譯目前我只會買有英文字幕(有...

不惑的胖虎 ‧ 2023-10-14

0 Like 0 留言 141 瀏覽

鐵人賽自我挑戰組 DAY 28

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

技術 DAY28 - next/image

啟用 next/image C:\mylab_2023_9\ironman_2023\app\reviews[slug]\page.jsx import Ima...

不惑的胖虎 ‧ 2023-10-13

0 Like 0 留言 135 瀏覽

鐵人賽自我挑戰組 DAY 27

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

技術 DAY27- ESLint

影片 68 ESLintvs code 安裝微軟出的 ESLint 外掛 npm i --save-dev eslint eslint-config-next...

不惑的胖虎 ‧ 2023-10-12

0 Like 0 留言 141 瀏覽

鐵人賽自我挑戰組 DAY 26

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

技術 DAY26 - Static Build with CMS Data

前言：所有的資料都改用CMS後端原本存放markdown文件檔的 content 資料夾可以整個刪掉這邊要檢視 npm build 所產生的靜態網頁之前St...

不惑的胖虎 ‧ 2023-10-11

0 Like 0 留言 165 瀏覽

鐵人賽自我挑戰組 DAY 25

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

技術 DAY25 - 從cms的資料庫撈資料到前端 4 (end)

前言： lib\reviews.js 裡面的 getReview getReviews 兩隻函式有很多重複的地方另外寫一隻函數來取代，重複的地方有兩個，拆成兩隻...

不惑的胖虎 ‧ 2023-10-10

0 Like 0 留言 87 瀏覽

鐵人賽自我挑戰組 DAY 24

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

技術 DAY24 - 從cms的資料庫撈資料到前端 3

前言：昨天把Review頁面完成後，接下來要做單獨的頁面API資料串接現在點選個別的遊戲頁面連結是會跳出錯誤的，今天就完成這個部分先在測試程式裡實作 sc...

不惑的胖虎 ‧ 2023-10-09

0 Like 0 留言 144 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 DAY23 - 從cms的資料庫撈資料到前端 2

缺少圖片重點把圖片顯示在網頁上 const CMD_URL = "http://localhost:1337"; const...

不惑的胖虎 ‧ 2023-10-08

0 Like 0 留言 111 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術 DAY22 - 從cms的資料庫撈資料到前端 1

前言：昨天的內容是在單獨的js檔案中，完成API的對接，從Strapi的資料庫中，撈出資料，今天的內容就是把寫在測試程式裡的程式碼拿到專案中實作。編輯 li...

不惑的胖虎 ‧ 2023-10-07

0 Like 0 留言 115 瀏覽

鐵人賽自我挑戰組 DAY 21

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

技術 DAY21 - Strapi API Parameters

前言: 今天這篇還是在測試程式(scripts\strapi-request.mjs)裡，寫有關API對接的範例是獨立的程式，並不會動到專案裡的程式碼。安裝套...

不惑的胖虎 ‧ 2023-10-06

0 Like 0 留言 169 瀏覽

鐵人賽自我挑戰組 DAY 20

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

技術 DAY20 - Fetch Api (內容未整理)

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

不惑的胖虎 ‧ 2023-10-05

0 Like 0 留言 193 瀏覽

鐵人賽自我挑戰組 DAY 19

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

技術 DAY19 - Headless CMS

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

不惑的胖虎 ‧ 2023-10-04

0 Like 0 留言 105 瀏覽

鐵人賽自我挑戰組 DAY 18

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

技術 DAY18 - 線上部署

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

不惑的胖虎 ‧ 2023-10-03

0 Like 0 留言 120 瀏覽

鐵人賽自我挑戰組 DAY 17

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

技術 DAY17 - 網頁metadata 設定

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

不惑的胖虎 ‧ 2023-10-02

0 Like 0 留言 97 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 DAY16 - 增加排序功能

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

不惑的胖虎 ‧ 2023-10-01

0 Like 0 留言 104 瀏覽

鐵人賽自我挑戰組 DAY 15

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

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

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

不惑的胖虎 ‧ 2023-09-30

0 Like 0 留言 132 瀏覽

鐵人賽自我挑戰組 DAY 14

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

技術 DAY14 - Review頁面重構

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

不惑的胖虎 ‧ 2023-09-29

0 Like 0 留言 154 瀏覽

鐵人賽自我挑戰組 DAY 13

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

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

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

不惑的胖虎 ‧ 2023-09-28

0 Like 0 留言 112 瀏覽

鐵人賽自我挑戰組 DAY 12

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

技術 DAY12 - 建立最簡響應式頁面

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

不惑的胖虎 ‧ 2023-09-27

0 Like 0 留言 213 瀏覽

鐵人賽自我挑戰組 DAY 11

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

技術 DAY11 - 網頁使用自訂的字型

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

不惑的胖虎 ‧ 2023-09-26

0 Like 0 留言 85 瀏覽

鐵人賽自我挑戰組 DAY 10

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

技術 DAY10 - 引入靜態資源

在專案的根目錄下建立 public\images 資料夾找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片) 接著在 app\reviews\ 底...

不惑的胖虎 ‧ 2023-09-25

0 Like 0 留言 110 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術 DAY09- 自訂可重複使用的組件(components)

在導入TailWind Css之後，網頁的樣式被清除了，如h1需要使用者重新定義標籤的樣式編輯 app\page.jsx 檔案內容如下: function H...

不惑的胖虎 ‧ 2023-09-24

0 Like 0 留言 109 瀏覽

鐵人賽自我挑戰組 DAY 8

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

技術 DAY08- 初步完成網頁layout

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

不惑的胖虎 ‧ 2023-09-23

0 Like 0 留言 162 瀏覽

鐵人賽自我挑戰組 DAY 7

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

技術 DAY07- 在Next.js的專案中使用Tailwind CSS

安裝所需套件: npm install --save-dev tailwindcss postcss autoprefixer npx tailwindcss...

不惑的胖虎 ‧ 2023-09-22

0 Like 0 留言 96 瀏覽

鐵人賽自我挑戰組 DAY 6

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

技術 DAY06 - 使用Link取代a標籤

加入Link 在Next.js 裡使用Link來取代原本的 <a> 標籤編輯 app\layout.jsx 內容如下 import Link fro...

不惑的胖虎 ‧ 2023-09-21

0 Like 0 留言 198 瀏覽

鐵人賽自我挑戰組 DAY 5

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

技術 DAY05 - 完成APP路由設定

在vs code 底下直接創建資料夾/檔案的小技巧操作方法:直接新增檔案資料夾名稱/檔名.副檔名接下來要用上面的方法在專案裡多建立幾個頁面 app/ab...

不惑的胖虎 ‧ 2023-09-20

0 Like 0 留言 104 瀏覽

鐵人賽自我挑戰組 DAY 4

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

技術 DAY04 - 建立App路由

接下來在app 資料夾底下建立 reviews資料夾底下建立 page.jsx 內容如下 function ReviewsPage() { retur...

不惑的胖虎 ‧ 2023-09-19

0 Like 0 留言 168 瀏覽

鐵人賽自我挑戰組 DAY 3

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

技術 DAY03 - 從零開始建立Next.js專案

前言：手動建立專案流程：在C槽(windows系統)底下建立一個資料夾作為專案名稱如: C:\ironman_2023 在ironman_2023 底...

不惑的胖虎 ‧ 2023-09-18

0 Like 0 留言 225 瀏覽

鐵人賽自我挑戰組 DAY 2

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

技術 DAY02 - 建立Next.js專案就踩到坑

前言：這次鐵人賽的內容是以我學習React+Next.js 的過程中所記錄的筆記與心得教材是在Udemy上面，隨機挑選比較新的課程且好評數量高的購買證明：...

不惑的胖虎 ‧ 2023-09-17

0 Like 0 留言 160 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 DAY01 - 中年大叔第三年參加鐵人賽

前言：這次我第三次參加鐵人賽，去年因為意外而中斷連續發文(停電&沒網路)連參加獎(30天鐵人練成)都沒有...TT 簡單自我介紹一下(雖然以前的鐵人賽...

不惑的胖虎 ‧ 2023-09-16