JINL
0 位追蹤者
JINL
0 位追蹤者
全部內容
由新到舊
第一題：「購物車」系統
這個練習的重點在於學習如何使用 map 來處理物件型態的狀態，以及如何在多個元件之間同步這些數據。
練習目標
建立一個商品清單，點擊「加入」按鈕時更新購物車。
若商品已在購物車，數量 +1+1；若不在，則新增一筆。
即時顯示購物車內的商品總數。
第一步：建立
✏️ 專題二實作
1. 建立 Store (src/store/themeStore.ts)
import { atom } from 'nanostores'
// 預設為 false (淺色模式)
export const $isDark = atom(false)
2. 建立切換按鈕
Nano Stores與其它的狀態管理工具（如 Redux 或 Pinia）不同
Nano Stores 是 不可知框架（Framework-agnostic） 的。這意味著你可以在同一個 Astro 專案中，讓 React、Vue、Svelte 和原生 JS 共享同一個狀態。
第一階段：核心概
專題二：Nano Stores —— 連結孤島的橋樑
為什麼需要它？
在 Astro 中，每個互動組件（React, Vue, Svelte）都是一個獨立的「孤島 (Island)」。
問題：如果你在 Header.tsx (React) 有一個購物車圖示，在 ProductCard.tsx
🚀 專題一：Tailwind CSS 實戰開始
我們先從最能直接提升成就感的 Tailwind CSS 開始。
1. 安裝 Tailwind
在你的專案目錄執行：
npx astro add tailwind
(全部選 Yes，這會自動設定 astro.config.mjs 並引入指令
✏️ 1. 利用前一章節建立的 Card.astro 組件。
① blog.astro 匯入 Card.astro
---
import BaseLayout from '../layouts/BaseLayout.astro'
import PostsQuote from '../compon
只是目錄，看看就好
專題一：視覺美學與 UI 框架 —— Tailwind CSS 整合
專題二：狀態管理與跨組件通訊 —— Nano Stores
專題三：持久化資料存放 —— 整合 Supabase 或 Drizzle ORM
第六課：中間件 (Middleware) 與生產部署 (Deployment)
核心觀念：Middleware 是什麼？
中間件是站在「請求 (Request)」與「頁面 (Page)」之間的一道關卡。每當有人點擊你的網站，中間件會先執行。這非常適合用來處理：身份驗證、重定向 ...
