astro frontend masters

這是前端大師 Astro 課程的配套儲存庫。

設定

此儲存庫的start分支包含一些附加資源，並用作課程的起點：

我們建議在本課程中使用 Node 版本 18。

git clone https://github.com/learnwithjason/astro-frontend-masters.git
cd astro-frontend-masters
git checkout start
npm install

我們正在建設什麼？

小型企業網站使用許多（大多數？）網站最終遵循的幾個常見工作流程。

• 行銷登陸頁面
  • 英雄形象
    • 影像處理
  • 牌
    • 特色產品
  • 時事通訊捕獲
• 店鋪
  • 高級佈局（嵌套）
  • 共享狀態
    • 實心推車
    • 反應項目按鈕（加入購物車）
    • Nano 商店共享狀態
• 部落格
  • 內容集
    • 降價
  • 動態路線
  • RSS 提要
• 關於
  • 降價頁面
• 404頁面

我們想要涵蓋哪些功能？

• 初始化新的 Astro 站點
• 當地發展
• 頁數
  • 支援的文件類型
    • 阿斯特羅
    • 降價
    • 超文本標記語言
  • 基本路由
  • 連結
  • 自訂 404 頁面
• 天文組件
  • 前題
  • 老虎機
• 佈局
  • 基本佈局
  • 進階佈局
• 取得數據
  • 在 Astro 和其他元件中使用fetch
  • 載入API數據
  • 從無頭 CMS 加載
• 造型
  • Astro 元件中的樣式
    • 範圍樣式
    • 全域樣式
  • CSS 的 Astro 好東西
    • class:list
    • define:vars
  • 匯入樣式表
    • 當地的
    • npm 包
  • 在框架中：
    • CSS 模組
• 動態路線
  • 當您想要在建置時渲染一次頁面時
• 分頁
• 內容集
  • 基本設定和配置
    • 定義模式
    • 客製化蛞蝓
  • 使用集合來建立頁面
    • 清單頁面
    • 完整條目頁面
• 端點
  • RSS
  • 蜜蜂
    • 靜止的
• SSR模式
  • 動態路由
  • 當您想要根據每個請求呈現頁面時
  • API端點
• 影像處理
  • assets目錄
• 給JS組件補水
  • client:*指令
  • 使用多個框架
  • 島嶼之間共享狀態
  • 在框架之間共享狀態