社区教学内容

社区中有丰富的资源可以帮助你学习和使用 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 项目添加新功能或行为，方案是一个非常实用的参考资源！

• Installing a Vite or Rollup plugin

  Learn how you can import YAML data by adding a Rollup plugin to your project.

• Build a custom image component

  Learn how to build a custom image component that supports media queries using the getImage function.

• Build forms with API routes

  Learn how to use JavaScript to send form submissions to an API Route.

• Build HTML forms in Astro pages

  Learn how to build HTML forms and handle submissions in your frontmatter.

• Use Bun with Astro

  Learn how to use Bun with your Astro site.

• Call endpoints from the server

  Learn how to call endpoints from the server in Astro.

• Verify a Captcha

  Learn how to create an API route and fetch it from the client.

• Build your Astro Site with Docker

  Learn how to build your Astro site using Docker.

• Dynamically import images

  Learn how to dynamically import images using Vite's import.meta.glob function.

• Add icons to external links

  Learn how to install a rehype plugin to add icons to external links in your Markdown files.

• Add i18n features

  Use dynamic routing and content collections to add internationalization support to your Astro site.

• Create a dev toolbar app

  Learn how to create a dev toolbar app for your site.

• Add last modified time

  Build a remark plugin to add the last modified time to your Markdown and MDX.

• Add reading time

  Build a remark plugin to add reading time to your Markdown or MDX files.

• Share state between Islands

  Learn how to share state across framework components with Nano Stores.

• Share state between Astro Components

  Learn how to share state across Astro components with Nano Stores.

• Using streaming to improve page performance

  Learn how to use streaming to improve page performance.

• Style rendered Markdown with Tailwind Typography

  Learn how to use @tailwind/typography to style your rendered 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 构建浏览量计数器