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:*指令
  • 使用多个框架
  • 岛屿之间共享状态
  • 在框架之间共享状态