Logo
☆☆☆☆☆
0.0
Beginner
20h

使用 Astro 构建静态页面以实现完美的核心 Web 指标

Astro 是一个与框架无关的全功能网页框架,旨在构建高性能网站。其岛屿架构(island architecture)帮助实现这一目标。 在本互动课程中,你将学习如何遵循最佳实践并使用 Astro 搭建一个性能出色、具备良好 SEO 和无障碍访问特性的静态博客。你还将了解不同渲染模式之间的差异,例如 SSR(服务端渲染)和 SSG(静态站点生成),以及 MPA(多页面应用)与 SPA(单页面应用)架构的区别。此外,你将学习如何处理路由、创建用于数据获取的 API 端点,并借助 Astro 岛屿功能为页面添加交互性。 完成本课程后,你将掌握在 Astro 中启动新项目的基础知识,并能够以极小的 JavaScript 依赖构建高性能组件。

8 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
使用 Astro 构建静态页面以实现完美的核心 Web 指标
Astro 是一个与框架无关的全功能网页框架,旨在构建高性能网站。其岛屿架构(island architecture)帮助实现这一目标。 在本互动课程中,你将学习如何遵循最佳实践并使用 Astro 搭建一个性能出色、具备良好 SEO 和无障碍访问特性的静态博客。你还将了解不同渲染模式之间的差异,例...

WHAT YOU'LL LEARN

对 Astro 的理解,包括其语法、项目结构和配置文件

Content

8 Lessons • 0 Quizzes • 0 Challenges

简介
  1. 1

    开始之前

  2. 2

    我们将构建内容的概览

  3. 3

    单页应用(SPA)与多页应用(MPA)

  4. 4

    为什么选择 Astro?

  5. 5

    衡量核心网页指标

  6. 6

    Astro 岛屿(Astro Islands)

开始使用 Astro
  1. 1

    Astro 语法与 JSX 对比

  2. 2

    Astro 项目结构:文件夹

  3. 3

    配置文件和环境变量

  4. 4

    使用 Astro 与你喜爱的框架

  5. 5

    测验:开始使用 Astro

结论
  1. 1

    Astro 最佳实践

  2. 2

    恭喜你!

设置主页
  1. 1

    使用 Astro 的文件路由创建页面

  2. 2

    如何在 Astro 中使用静态资源

  3. 3

    使用布局

  4. 4

    创建一个SEO组件

  5. 5

    通过结构化数据提升SEO

  6. 6

    CSS 和样式在 Astro 中

  7. 7

    构建可复用的 Astro 组件

  8. 8

    交互性与事件处理

  9. 9

    使用 Markdown 存储数据

  10. 10

    高阶组件

  11. 11

    实现分页

  12. 12

    测验:设置主页

附录
  1. 1

    有用的资源

设置单个文章
  1. 1

    动态路由简介

  2. 2

    动态路由与自定义内容渲染

  3. 3

    自定义 404 页面

  4. 4

    Astro 中的渲染策略:SSR 与 SSG

  5. 5

    在 Astro 中构建 API 端点

  6. 6

    通过推荐组件提升SEO

  7. 7

    测验:设置单个文章

设置联系页面
  1. 1

    经验、专业性、权威性和可信度(EEAT)

  2. 2

    构建联系页面

  3. 3

    添加作者组件

  4. 4

    添加联系表单

  5. 5

    测验:设置联系页面

构建 Astro
  1. 1

    探索构建过程与自定义

  2. 2

    高级 Astro 项目 SEO 策略

  3. 3

    添加RSS订阅源

  4. 4

    通过后构建脚本优化构建过程

  5. 5

    渐进式网页应用(PWAs)在 Astro 中

  6. 6

    测验:构建 Astro

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:Anonymous User

Reviews

Read reviews from students who have taken this course and share your own experience.

Reviews & Comments (0)