社区教学内容

社区中有丰富的资源可以帮助你学习和使用 Astro 构建项目！以下是由 Astro 社区创建和维护的教学内容。

请注意，所有链接都指向外部网站，且可能基于 Astro 的早期版本。在使用任何社区内容时，建议你检查其发布日期，并根据项目需求进行相应调整。

想了解更多 Astro 教学内容，请访问 Astro 博客 或订阅 官方 Astro newletter，我们会在每个月回顾最佳社区内容。

课程和教程

段落标题 课程和教程

课程和教程是教授新概念的有效途径，它们通常包含练习或示例项目供你实践。这是一个很好的学习方式，可以为你的 Astro 项目提供必要的知识和工具。

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

入门教程

段落标题 入门教程

• Astro 网络框架速成课程 由 freeCodeCamp 提供
• 20 分钟 Astro 速成课程 由 Chris Pennington 提供（完整付费课程：学习 Astro）
• Astro 3.0 速成课程 由 James Q Quick 提供（完整付费课程：使用 Astro 构建现代网站）
• 60 分钟 Astro 速成课程 由 @developedbyed 提供
• 理解 Astro (电子书) 由 Ohans Emmanuel 提供
• 代码之谷 - Astro 由 Flavio Copes 提供
• 从零开始学习 Astro 3：初学者课程 + Astro 应用程序（西班牙语） 由 @midudev 提供
• Astro 网络框架入门（付费）由 Tech Razor 在 Udemy 提供

视频教程

段落标题 视频教程

• Astro 快速入门课程：构建一个服务端渲染博客
• 我如何使用 Astro 3.x 创建一个电影应用
• 你可能实际上并不理解内容集合…
• 使用 Astro 和 Apprwrite 构建自定义博客平台
• Astro JS 作品集速成课程
• 使用 Astro 构建全栈博客
• (西班牙语) Astro 静态网站生成器课程

方案和指南

段落标题 方案和指南

查看为 Astro 项目添加功能的指导示例。

官方方案

段落标题 官方方案

Astro 的官方方案是一系列简洁明了的操作指南，它们通过分步骤的说明，帮助读者完成特定任务。如果你想为你的 Astro 项目添加新功能或行为，方案是一个非常实用的参考资源！

• 安装一个 Vite 或 Rollup 插件

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

• 构建自定义图像组件

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

• 使用 API 路由构建表单

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

• 在 Astro 页面中构建 HTML 表单

  了解如何在 Astro 页面中构建 HTML 表单并在你的 frontmatter 中处理提交请求。

• 在 Astro 中使用 Bun

  了解如何在 Astro 站点中使用 Bun。

• 调用服务器端点

  了解如何在 Astro 中调用服务器端点

• 校验验证码

  了解如何创建一个 API 路由并从客户端进行获取。

• 用 Docker 来构建你的 Astro 网站

  了解如何使用 Docker 来构建你的 Astro 网站。

• 动态导入图片

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

• 为链接添加图标

  了解如何安装 rehype 插件并为你 Markdown 文件中的链接添加图标。

• 添加 i18n 功能

  通过动态路由和内容集合来让你的 Astro 站点支持国际化。

• 创建开发者工具栏应用

  学习如何为你的网站创建开发者工具栏应用。

• 添加最后修改时间

  编写一个在你的 Markdown 和 MDX 文件里添加最后修改时间的 remark 插件。

• 添加阅读时间

  编写一个在你的 Markdown 和 MDX 文件里添加阅读所需时间的 remark 插件。

• 状态共享

  学习如何使用 Nano Stores 在框架组件之间共享状态

• 在 Astro 组件中共享状态

  了解如何通过 Nano Stores 在 Astro 组件中共享状态。

• 使用流式处理来提升页面性能

  了解如何使用流式处理来提升页面性能

• 使用 Tailwind Typography 美化渲染后的 Markdown

  了解如何使用 @tailwind/typography 美化你渲染后的 Markdown。

添加你自己的内容！

你有没有发布过一些使用 Astro 的方案或指南？编辑此页面 并在下面相应的部分添加你的链接！

CSS

段落标题 CSS

• 在 Astro 中使用 UnoCSS
• 为 Astro 中的 Tailwind CSS 添加暗黑模式
• 在 Astro 中使用 Bootstrap

认证

段落标题 认证

• 使用 Lucia 添加 Github OAuth
• 使用 Lucia 添加用户名和密码认证
• 在 Astro 中使用 Clerk 和 React 进行用户认证

摘要

段落标题 摘要

• 在导入图片时使用动态文件名
• 使用 Storyblok 的故事为 Astro 添加 RSS 摘要
• 如何将任何数据发送到你的 RSS 摘要？一个使用 Astro + RSS 的指南
• 在 Astro 中添加 RSS Feed 内容并修复 Markdown 图片路径

图片

段落标题 图片

• 为你的 Astro RSS 摘要添加博客文章图片
• 为 Astro 博客生成开放图形图片

编辑器工具

段落标题 编辑器工具

• 让 VSCode、ESLint 和 Prettier 与 Astro 协同工作
• 将 Prettier 与 Astro 和 Tailwind CSS 集成

Markdown

段落标题 Markdown

• 从 Astro 的 Markdown 标题构建目录
• 创建一个 Remark 插件以从你的 Markdown 文件中移除短行
• 在 Astro 中有效设置草稿页面，使用配置驱动的内容创作

性能

段落标题 性能

• 增强你的 Astro 构建：在构建后修改 HTML 文件
• 使用 Astro 设置微前端
• 在 Astro 中实现增量静态再生（ISR）的方法

实用工具

段落标题 实用工具

• 在 Astro 中使用 tRPC
• 将 Sentry 与 Astro 集成
• 为你的 Astro 和 Storyblok 项目生成本地化站点地图
• 使用 Pagefind 为你的网站添加搜索功能
• 使用 Fuse.js 为你的网站添加搜索功能
• 使用 Giscus 为你的 Astro 博客添加评论区
• 使用 Astro 创建分页组件

动画

段落标题 动画

• 在 Astro 中使用 GreenSock 动画平台（GSAP）
• 在 Astro 中结合视图转换使用 GreenSock 动画平台（GSAP）
• 在 Astro 中使用滚动动画（AOS）：分步指南

国际化和本地化

段落标题 国际化和本地化

• 使用 Crowdin 为你的 Astro 网站实现多语言支持：Astro 本地化指南
• 翻译 Astro 路由以适应内容集合和子页面

Astro DB

段落标题 Astro DB

• 使用 Astro DB 创建留言簿
• 如何使用 Astro DB 构建浏览量计数器