社区教育内容

还有更多可以帮助你学习和使用 Astro 构建的内容！以下是 Astro 社区制作和维护的一些教育内容。

¥There is so much more out there that can help you learn and build with Astro! Here is some educational content produced and maintained by the Astro community.

所有链接都是外部的，可能基于 Astro 的早期版本。请务必检查任何社区内容的日期，并相应地调整你的项目。

¥All links are external, and may be based on earlier versions of Astro. Be sure to check the date on any community content, and adapt to your project accordingly.

如需更多 Astro 教育内容，请查看 Astro 博客 或注册 Astro 官方通讯，我们将在其中回顾每个月的最佳社区内容。

¥For more Astro educational content, check out the Astro Blog or sign up for the official Astro newsletter where we recap the best community content of each month.

课程和教程

Section titled 课程和教程

¥Courses and Tutorials

课程和教程专注于教你新概念，通常包含练习或示例项目。这些是学习新概念的好方法，并为你提供处理自己的 Astro 项目所需的工具。

¥Courses and tutorials are focused on teaching you new concepts, often with exercises or sample projects to build. These are a great way to learn new concepts and give you the tools you need for working on your own Astro project.

查看以下课程和教程以了解有关 Astro 的更多信息。

¥Check out the following courses and tutorials to learn more about Astro.

入门教程

Section titled 入门教程

¥Introductory Tutorials

• Astro Web 框架速成课程 by freeCodeCamp

• 20 分钟内完成 Astro 速成课程 by Chris Pennington（全额付费课程：学习 Astro）

• Astro 3.0 速成课程 by James Q Quick（全额付费课程：使用 Astro 构建现代网站）

• 60 分钟内完成 Astro 速成课程 by @developedbyed

• 了解 Astro（电子书） by Ohans Emmanuel

• 代码之谷 - Astro by Flavio Copes

• 从头开始学习 Astro 3：初学者课程 + Astro 应用（西班牙语） by @midudev

• Astro 网络框架简介（付费）由 Udemy 上的 Tech Razor 提供

视频教程

Section titled 视频教程

¥Video Tutorials

• Astro 快速入门课程：构建 SSR 博客

• 如何使用 Astro 3.x 创建电影应用

• 你可能实际上并不了解内容集合…

• 使用 Astro 和 Appwrite 构建自定义博客平台

• Astro JS 产品组合速成课程

• 使用 Astro 构建全栈博客

• (ES)Astro 课程，Web 统计站点生成器

秘诀和指南

Section titled 秘诀和指南

¥Recipes and Guides

请参阅向 Astro 项目添加功能的指导示例。

¥See guided examples of adding features to your Astro project.

官方秘诀

Section titled 官方秘诀

¥Official Recipes

Astro 的官方秘诀是简短、重点突出的操作指南，可引导读者完成特定任务的工作示例。通过遵循分步说明，秘诀是向你的 Astro 项目添加新功能或行为的好方法！

¥Astro’s official recipes are short, focused how-to guides that walk a reader through completing a working example of a specific task. Recipes are a great way to add new features or behavior to your Astro project by following step-by-step instructions!

• 安装 Vite 或 Rollup 插件

  了解如何通过向项目添加 Rollup 插件来导入 YAML 数据。

• 构建自定义图片组件

  了解如何使用 getImage 函数构建支持媒体查询的自定义图片组件。

• 使用 API 路由构建表单

  了解如何使用 JavaScript 将表单提交发送到 API 路由。

• 在 Astro 页面中构建 HTML 表单

  了解如何构建 HTML 表单并处理前言中的提交。

• 将 Bun 与 Astro 一起使用

  了解如何在 Astro 网站上使用 Bun。

• 从服务器调用端点

  了解如何从 Astro 中的服务器调用端点。

• 验证验证码

  了解如何创建 API 路由并从客户端获取它。

• 使用 Docker 构建你的 Astro 站点

  了解如何使用 Docker 构建 Astro 站点。

• 动态导入图片

  了解如何使用 Vite 的 import.meta.glob 函数动态导入图片。

• 向外部链接添加图标

  了解如何安装 rehype 插件以向 Markdown 文件中的外部链接添加图标。

• 添加国际化功能

  使用动态路由和内容集合为你的 Astro 站点添加国际化支持。

• 创建开发工具栏应用

  了解如何为你的网站创建开发工具栏应用。

• 添加上次修改时间

  构建一个 remark 插件，将上次修改时间添加到 Markdown 和 MDX 中。

• 添加阅读时间

  构建一个 remark 插件以添加 Markdown 或 MDX 文件的阅读时间。

• 在群岛之间共享状态

  了解如何使用 Nano Store 跨框架组件共享状态。

• 在 Astro 组件之间共享状态

  了解如何使用 Nano Stores 跨 Astro 组件共享状态。

• 使用流式传输来提高页面性能

  了解如何使用流式传输来提高页面性能。

• 使用 Tailwind Typography 渲染 Markdown 样式

  了解如何使用 @tailwind/typography 来设计渲染的 Markdown。

Add your own!

Have you published a recipe or guide for working with Astro? Edit this page and add your link below in the appropriate section!

CSS

Section titled CSS

• 在 Astro 中使用 UnoCSS

• 使用 Tailwind CSS 添加夜间模式到 Astro

• 将 Bootstrap 与 Astro 结合使用

验证

Section titled 验证

¥Authentication

• 使用 Lucia 添加 GitHub OAuth

• 添加 Lucia 的用户名和密码身份验证

• 使用 Clerk 和 React 在 Astro 中对用户进行身份验证

RSS

Section titled RSS

• Use a dynamic filename when importing images

• 使用 Storyblok 的故事将 RSS 提要添加到 Astro

• 如何将任何数据发送到你的 RSS 源？Astro + RSS 指南

• 在 Astro 中添加 RSS 提要内容和修复 Markdown 图片路径

图片

Section titled 图片

¥Images

• 将博客文章图片添加到你的 Astro RSS Feed

• 为 Astro 博客生成 Open Graph 图片

编辑器工具

Section titled 编辑器工具

¥Editor Tooling

• 让 VSCode、ESLint 和 Prettier 与 Astro 配合使用

• 将 Prettier 与 Astro 和 Tailwind CSS 集成

Markdown

Section titled Markdown

• 根据 Astro 的 Markdown 标题构建目录

• 创建一个 Remark 插件来删除 Markdown 文件中的短句

• 通过配置驱动的内容创作在 Astro 中有效设置草稿页面

性能

Section titled 性能

¥Performance

• 增强你的 Astro 构建：构建后修改 HTML 文件

• 使用 Astro 设置微前端

• 如何在 Astro 中实现增量静态再生 (ISR)

实用程序

Section titled 实用程序

¥Utilities

• 在 Astro 中使用 tRPC

• 将 Sentry 与 Astro 集成

• 为你的 Astro 和 Storyblok 项目生成本地化站点地图

• 使用 Pagefind 将搜索添加到你的网站

• 使用 Fuse.js 将搜索添加到你的网站

• 使用 Giscus 向你的 Astro 博客添加评论部分

• 使用 Astro 创建分页组件

动画

Section titled 动画

¥Animation

• 在 Astro 中使用 GreenSock 动画平台 (GSAP)

• 在 Astro 中使用 GreenSock 动画平台 (GSAP) 和视图转换

• 在 Astro 中使用 Animate On Scroll (AOS)：分步指南

国际化和本地化

Section titled 国际化和本地化

¥Internationalization and Localization

• 如何使用 Crowdin 使你的 Astro 网站支持多种语言：Astro 本地化指南

• 在 Astro 中翻译内容集合和子页面的路由

Astro DB

Section titled Astro DB

• 使用 Astro DB 创建留言簿

• 如何使用 Astro DB 构建观看次数计数器