(一)v-show: 根據條件的布林值來控制元素的顯示和隱藏，與CSS的display屬性相關聯，但與v-if指令不同，v-show 不會將元素從DOM中移除，...
前言: 今天這篇還是在測試程式(scripts\strapi-request.mjs)裡，寫有關API對接的範例是獨立的程式，並不會動到專案裡的程式碼。 安裝套...
(一) v-text:設置標籤的文本內容textContent我們除了可以用兩個大括號{{}}將data值綁定之外，也可用使用v-txet <div id...
(一)Vue.js 的實體物件: 透過new Vue()或Vue.createApp()得到新物件，並指定變數名稱，透過此物件來掛載在網頁上的某個 DOM 節點...
Vue是一個用於建立使用者介面的 JavaScript 框架。他提供聲明性和基於元件的程式設計模型，幫助開發人員構建交互性強、高效的網頁應用程序。以下是Vue的...
http://localhost:1337/api/reviews資料格式 測試api (在前端資料夾) 後端需要啟動ironman_2023\scripts\...
一、導覽列(navbar)是網頁或應用程式界面中常見的一種元素，用於幫助使用者導航和定位到網站或應用的不同部分或功能。它通常位於網頁或應用的頂部或側邊，提供了一...
(一)陰影(二) 定位、文繞圖一、定位1.一般定位position2.圖層定位利用到z-index屬性來設定元件層次，z-index 數字越大的在越上面，反之則...
Headless CMS: A headless Content Management System, or headless CMS, is a back e...
CSS串接樣式表，可控制版面位置、網頁配色以及產生文字與圖片特效(一) 在HTML文件裡面使用CSS樣式，有三種方式1.行內宣告:將CSS寫在html標記裡，&...
(一)超連結a target: 設定連結的網頁開啟方式1)_blank: 在新的瀏覽器窗口或標簽中打開連結。2)_self: 連結的目標會開啟在目前執行的視窗...
今天的內容是要把進行中的專案部署到網路上Next.js 是由Vercel這家公司所開發的所以可以把Next.js專案免費部署到Vercel基本上只要先將專案gi...
HTML由元素所組成，使用一種由標籤（tags）與內容(content)組成的語法，而這些標籤可以控制內容樣貌，如字體大小、顏色，以及在網頁中嵌入圖片或影片等...
app\page.jsx import Link from "next/link" import Heading from "@/...
lib\reviews.js export async function getReviews() { const slugs = await get...
app\reviews[slug]\page.jsx // 產生靜態頁面 export async function generateStaticParams(...
編輯 app\reviews\stardew-valley\page.jsx 檔案內容如下: import { readFile } from "no...
安裝所需套件 npm i -D marked npm install -D @tailwindcss/typography npm install -D gra...
編輯 app\page.jsx 檔案內容如下: import Link from "next/link" import Heading fr...
這邊用到的字型來自Google Font 挑一款自己喜歡的字型吧 編輯 app\fonts.js 檔案內如下: import { Orbitron } from...
在專案的根目錄下建立 public\images 資料夾找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片) 接著在 app\reviews\ 底...
在導入TailWind Css之後，網頁的樣式被清除了，如h1需要使用者重新定義標籤的樣式 編輯 app\page.jsx 檔案內容如下: function H...
編輯 app\layout.jsx 檔案內容如下: import Link from "next/link"; import "....
安裝所需套件: npm install --save-dev tailwindcss postcss autoprefixer npx tailwindcss...
加入Link 在Next.js 裡使用Link來取代原本的 <a> 標籤編輯 app\layout.jsx 內容如下 import Link fro...
在vs code 底下直接創建資料夾/檔案 的小技巧 操作方法:直接新增檔案 資料夾名稱/檔名.副檔名 接下來要用上面的方法在專案裡多建立幾個頁面 app/ab...
接下來在app 資料夾底下建立 reviews資料夾 底下建立 page.jsx 內容如下 function ReviewsPage() { retur...
前言： 手動建立專案流程： 在C槽(windows系統)底下建立一個資料夾作為專案名稱 如: C:\ironman_2023 在ironman_2023 底...
前言： 這次鐵人賽的內容是以我學習React+Next.js 的過程中所記錄的筆記與心得教材是在Udemy上面，隨機挑選比較新的課程且好評數量高的 購買證明：...
不惑的胖虎
iThome鐵人賽
看影片追技術