使用集成
使用 Astro 集成只需几行代码就能为你的项目添加新的功能和行为。你可以自己编写一个自定义的集成,可以使用官方集成,还可以使用社区内的集成。
集成能够…
- 解锁 React、Vue、Svelte、Solid 和其他流行的 UI 框架。
- 只需几行代码就能整合 Tailwind 和 Partytown 等工具。
- 为你的项目添加新功能,如自动生成网站地图。
- 编写自定义代码,与构建过程、开发服务器等挂钩。
在我们的 集成目录 中浏览或搜索数百个官方和社区集成的完整集成。在这里你找到可以添加到你的 Astro 项目中的包,涵盖了身份验证、分析、性能、SEO、无障碍、UI、开发者工具等场景。
官方集成
段落标题 官方集成以下集成由 Astro 维护。
UI 框架
SSR 适配器
其他
自动集成设置
段落标题 自动集成设置Astro 包含了一个 astro add
命令来自动设置官方集成。许多社区插件也可以使用这个命令添加。请查阅每个集成的文档,以确定是否支持 astro add
,或者你是否需要手动安装。
只需用你的包管理器运行 astro add
命令,我们的自动集成向导将更新你的配置文件并安装任何必要的依赖。
甚至还可以同时配置多个集成!
如果你在添加集成后看到 "Cannot find package '[package-name]'
或其他类似警告,这意味着你的包管理器可能没有安装对等依赖。要安装这些缺失的包,请运行 npm install [package-name]
。
手动安装
段落标题 手动安装Astro 集成总是添加在 astro.config.mjs
文件中的 integrations
属性。
有三种常见的方法来导入集成到你的 Astro 项目:
-
从项目内部的本地文件导入你自己的集成。
-
直接在配置文件中内联编写集成。
查看集成 API 参考资料,了解所有不同的集成编写方式。
安装 NPM 包
段落标题 安装 NPM 包使用包管理器安装 NPM 包集成,然后手动更新 astro.config.mjs
。
例如,安装 @astrojs/sitemap
集成:
-
使用你偏好的包管理器将集成安装到项目依赖中:
-
将集成导入到你的
astro.config.mjs
文件,并将其连同任何配置选项添加到你的integrations[]
数组中:请注意,不同的集成可能有不同的配置设置。阅读每个集成的文档,并将任何必要的配置选项应用到
astro.config.mjs
中你所选择的集成上。
自定义选项
段落标题 自定义选项集成几乎都是以工厂函数的形式编写的,并返回真实的集成对象。这使得你可以通过向工厂函数传递参数和选项定制集成。
切换集成
段落标题 切换集成你可以切换集成启用状态,而不用担心遗留的 undefined
和布尔值问题,Astro 会自动忽略假值的集成。
更新集成
段落标题 更新集成要同时更新所有官方集成,运行 @astrojs/upgrade
命令。它会把 Astro 和所有官方集成更新到最新版本。
自动更新
段落标题 自动更新手动更新
段落标题 手动更新要手动更新一个或多个集成,使用你的包管理器对应的命令。
移除集成
段落标题 移除集成要移除某个集成,首先从你的项目中卸载它
接下来,从 astro.config.*
文件中移除该集成:
寻找更多集成
段落标题 寻找更多集成你可以在 Astro 集成目录中找到许多由社区开发的集成。点击链接查看详细的使用和配置说明。
构建自己的集成
段落标题 构建自己的集成Astro 的集成 API 受到 Rollup 和 Vite 的启发,其设计使任何曾经写过 Rollup 或 Vite 插件的人都感到熟悉。
查看集成 API,了解集成的作用以及如何自己编写一个集成。
Recipes