JINL
0 位追蹤者
JINL
0 位追蹤者
全部內容
由新到舊
(進階) 搭配 Nano Stores 完成「即時搜尋」
靜態 HTML
Client Component
Vanilla JS / Framework JS
(進階) 在 Astro 5 中讀取並顯示
我們可以直接在頁面中把這些資料抓出來，並根據 status 分類。
這是一個讓開發者管理自己「想學、正在學、已精通」技術清單的工具，強調極速的頁面切換與流暢的 UI。
環境架構設計
astro v5
tailwind v4
Nano Stores
vercel 佈署
要在 Astro v5 儀表板中加入互動圖表，最推薦的方式是使用 Recharts 或 Chart.js 配合 React 或 Vue 組件，因為圖表需要客戶端（Client-side）的 JavaScript 來達成縮放、懸停提示等互動功能。
在 Astro v5 的架構下，為多語系儀表板加入搜索功能，最推薦的方案是 Pagefind。它是一個極其快速、靜態化的搜尋庫，非常適合 Astro 這種注重效能的框架。
以下是將 Pagefind 整合進你的專案的步驟：
1. 安裝與設定
Pagefind 是在構建（Build）完成後掃描
環境架構設計
astro v5
tailwind v4
vercel 佈署
i18n 多語系架構
第三題：跨框架同步（React 與 Vue 的對話）
這是 Nano Stores 最強大的地方。假設你有一個專案，因為歷史原因或團隊偏好，同時使用了 React 和 Vue。
練習目標
建立一個 React 的輸入框（Input）。
建立一個 Vue 的預覽文字（Preview）。
當
第二題：深色模式（Dark Mode）
深色模式（Dark Mode） 的核心在於如何讓狀態「持久化」（即使重新整理網頁，設定也不會消失），以及如何與系統或手動設定同步。
在 Nano Stores 中，我們可以使用原生提供的 persistent 擴充功能，這能讓我們省去手寫 localSto
第一題：「購物車」系統
這個練習的重點在於學習如何使用 map 來處理物件型態的狀態，以及如何在多個元件之間同步這些數據。
練習目標
建立一個商品清單，點擊「加入」按鈕時更新購物車。
若商品已在購物車，數量 +1+1；若不在，則新增一筆。
即時顯示購物車內的商品總數。
第一步：建立
✏️ 專題二實作
1. 建立 Store (src/store/themeStore.ts)
import { atom } from 'nanostores'
// 預設為 false (淺色模式)
export const $isDark = atom(false)
2. 建立切換按鈕
