社区教学内容
社区中有丰富的资源可以帮助你学习和使用 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 项目添加新功能或行为,方案是一个非常实用的参考资源!
-
安装一个 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认证
段落标题 认证摘要
段落标题 摘要- 在导入图片时使用动态文件名
- 使用 Storyblok 的故事为 Astro 添加 RSS 摘要
- 如何将任何数据发送到你的 RSS 摘要?一个使用 Astro + RSS 的指南
- 在 Astro 中添加 RSS Feed 内容并修复 Markdown 图片路径
图片
段落标题 图片编辑器工具
段落标题 编辑器工具Markdown
段落标题 Markdown性能
段落标题 性能实用工具
段落标题 实用工具- 在 Astro 中使用 tRPC
- 将 Sentry 与 Astro 集成
- 为你的 Astro 和 Storyblok 项目生成本地化站点地图
- 使用 Pagefind 为你的网站添加搜索功能
- 使用 Fuse.js 为你的网站添加搜索功能
- 使用 Giscus 为你的 Astro 博客添加评论区