iT邦幫忙

中年大叔相關文章
共有 90 則文章
鐵人賽 自我挑戰組 DAY 30

技術 DAY30 - 三十天功德圓滿

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

鐵人賽 自我挑戰組 DAY 29

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

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

鐵人賽 自我挑戰組 DAY 28

技術 DAY28 - next/image

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

鐵人賽 自我挑戰組 DAY 27

技術 DAY27- ESLint

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

鐵人賽 自我挑戰組 DAY 26

技術 DAY26 - Static Build with CMS Data

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

鐵人賽 自我挑戰組 DAY 25

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

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

鐵人賽 自我挑戰組 DAY 24

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

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

鐵人賽 自我挑戰組 DAY 23

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

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

鐵人賽 自我挑戰組 DAY 22

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

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

鐵人賽 自我挑戰組 DAY 21

技術 DAY21 - Strapi API Parameters

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

鐵人賽 自我挑戰組 DAY 20

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

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

鐵人賽 自我挑戰組 DAY 19

技術 DAY19 - Headless CMS

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

鐵人賽 自我挑戰組 DAY 18

技術 DAY18 - 線上部署

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

鐵人賽 自我挑戰組 DAY 17

技術 DAY17 - 網頁metadata 設定

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

鐵人賽 自我挑戰組 DAY 16

技術 DAY16 - 增加排序功能

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

鐵人賽 自我挑戰組 DAY 15

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

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

鐵人賽 自我挑戰組 DAY 14

技術 DAY14 - Review頁面重構

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

鐵人賽 自我挑戰組 DAY 13

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

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

鐵人賽 自我挑戰組 DAY 12

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

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

鐵人賽 自我挑戰組 DAY 11

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

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

鐵人賽 自我挑戰組 DAY 10

技術 DAY10 - 引入靜態資源

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

鐵人賽 自我挑戰組 DAY 9

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

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

鐵人賽 自我挑戰組 DAY 8

技術 DAY08- 初步完成網頁layout

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

鐵人賽 自我挑戰組 DAY 7

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

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

鐵人賽 自我挑戰組 DAY 6

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

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

鐵人賽 自我挑戰組 DAY 5

技術 DAY05 - 完成APP路由設定

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

鐵人賽 自我挑戰組 DAY 4

技術 DAY04 - 建立App路由

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

鐵人賽 自我挑戰組 DAY 3

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

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

鐵人賽 自我挑戰組 DAY 2

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

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

鐵人賽 自我挑戰組 DAY 1

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

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