Astro 秘籍

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

官方秘籍

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

• 安装 Vite 或 Rollup 插件

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

• 分析打包体积

  了解如何使用 `rollup-plugin-visualizer` 分析 Astro 生成的包。

• 构建自定义图像组件

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

• 使用 API 路由构建表单

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

• 在 Astro 页面中构建 HTML 表单

  了解如何构建 HTML 表单并在 frontmatter 中处理提交。

• 在 Astro 中使用 Bun

  了解如何在你的 Astro 网站中使用 Bun。

• 从服务器调用端点

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

• 验证 Captcha

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

• 动态导入图像

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

• 使用 Docker 构建你的 Astro 站点

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

• 为外部链接添加图标

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

• 添加 i18n 功能

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

• 添加阅读时间

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

• 添加最后修改时间

  构建一个 remark 插件，为你的 Markdown 和 MDX 添加最后修改时间。

• 创建一个开发工具栏应用

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

• 添加 RSS 订阅源

  为你的 Astro 网站添加 RSS 源，让用户可以订阅你的内容。

• 在群岛之间共享状态

  了解如何使用 Nano Stores 在框架组件之间共享状态。

• 在 Astro 组件间共享状态

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

• 使用 Tailwind Typography 设置渲染后的 Markdown 样式

  了解如何使用 @tailwind/typography 来为渲染后的 Markdown 添加样式。

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

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

• 在构建输出中自定义文件名

  了解如何使用 Vite 的 Rollup 选项在 Astro 中更改已构建资源（如 JavaScript、CSS 和图像）的默认命名模式。

社区资源

在 Astro Tips 查找更多由社区编写和提交的秘籍。