更多操作指南

为你的 Astro 项目中添加特性的示例。

官方操作指南

• 状态共享

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

• 添加 RSS 摘要

  通过向你的 Astro 网站添加 RSS 摘要让用户来订阅你的内容。

• 安装一个 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 插件。

• 在 Astro 组件中共享状态

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

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

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

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

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

社区资源

晒出你的操作指南！更多详情请查看示例贡献指南。

• 通过动态文件名引入图片
• 用 Swup 添加页面过渡动画
• 在 Astro 中使用 UnoCSS
• 在 Astro 中通过 Markdown 标题构建目录
• 创建用于删除 Markdown 文件中孤立词的 Remark 插件
• 使用 Pagefind 构建站内搜索
• 使用 Fuse.js 构建站内搜索
• 为 Astro 项目在 VSCode 中配置 ESLint 与 Prettier
• 优化 Astro 构建：修改 HTML 文件预发布
• 在 Astro 中用 Tailwind CSS 构建黑夜模式
• 在 Astro+Storyblok 项目中生成本地 sitemaps
• Astro+Tailwind CSS 项目中使用 Prettier
• 使用 Storyblok 的故事集为 Astro 添加 RSS 摘要
• Astro+tRPC 解决方案
• 使用 Crowdin 为 Astro 项目添加多语言支持
• 向您 Astro 博客的 RSS Feed 中加入博文中的图片
• 使用 Astro 设置微前端
• 使用 Lucia 添加用户名和密码认证
• 使用 Lucia 添加 Github OAuth 认证
• 在 Astro 中集成 Sentry
• 通过配置驱动的内容创作在 Astro 中有效设置草稿页面
• 如何将任何数据发送到你的 RSS Feed？一个基于 Astro + RSS 的指南