- 起步
- 核心概念
- 教程
- 基础内容
- 内置功能
- 集成
- 操作指南
- 使用指南
- 配置
- 参考
- 社区资源
- 其他
- 为文档做出贡献
- 手动安装 Astro
- 升级到 Astro v4
- 升级到 Astro v3
- 升级到 Astro v2
- Legacy v0.x Upgrade Guide
- 从 Create React App(CRA)迁移
- 关于本教程
- 第一单元:前期准备
- 准备开发环境
- 创建你的第一个 Astro 项目
- 你的第一行 Astro 代码
- 创建在线代码仓库
- 将你的网站部署到网络
- 第二单元:页面
- 创建你的第一个 Astro 页面
- 编写你的第一篇 Markdown 博客文章
- 添加「关于你」的动态内容
- 给你的「关于」页面添加样式
- 应用全局样式
- 第三单元:组件
- 创建一个可重复使用的导航组件
- 创建社交媒体 footer
- 自己动手搭建导航 Header
- 编写你的第一个浏览器脚本
- 第四单元:布局
- 编写你的第一个布局
- 创建并传递数据到博客布局
- 布局结合,两全其美
- 第五单元 - Astro API
- 创建文章存档页
- 生成标签页面
- 编写标签索引页面
- 添加 RSS 订阅源
- 第六单元 - Astro 群岛
- 搭建你的第一个 Astro 岛屿
- 回到干燥的陆地。让你的博客从白天到黑夜,无需岛屿!
- 恭喜你!
- @astrojs/mdx
- 添加阅读时间
- 创建开发者工具栏应用
- @astrojs/alpinejs
- @astrojs/lit
- @astrojs/preact
- @astrojs/react
- @astrojs/solid-js
- @astrojs/svelte
- @astrojs/vue
- @astrojs/cloudflare
- @astrojs/netlify
- @astrojs/node
- @astrojs/vercel
- @astrojs/db
- @astrojs/markdoc
- @astrojs/partytown
- @astrojs/sitemap
- @astrojs/tailwind
- 使用流式处理来提升页面性能
- 从 Gatsby 迁移
- 从 Next.js 迁移
- 从 NuxtJS 迁移
- 从 Docusaurus 迁移到 Astro
- 从 Eleventy 迁移到 Astro
- 从 GitBook 迁移到 Astro
- 从Gridsome迁移到Astro
- 从 Hugo 迁移
- 从 Jekyll 迁移
- 从 Pelican 迁移
- 从 SvelteKit 迁移
- 从VuePress迁移
- 从 WordPress 迁移
- 状态共享
- Storyblok 与 Astro
- Contentful 与 Astro
- ButterCMS & Astro
- Builder.io & Astro
- Cosmic 与 Astro
- DatoCMS 与 Astro
- Front Matter CMS 与 Astro
- Ghost & Astro
- Hashnode & Astro
- Hygraph 与 Astro
- Keystatic & Astro
- Kontent.ai 与 Astro
- 无头模式的 Statamic 与 Astro
- Strapi 与 Astro
- Tina CMS 与 Astro
- Umbraco & Astro
- 无头(headless)模式的 WordPress 与 Astro
- ApostropheCMS 与 Astro
- Caisy & Astro
- CloudCannon与Astro
- Crystallize 与 Astro
- Decap CMS 与 Astro
- Directus 与 Astro
- KeystoneJS 与 Astro
- microCMS & Astro
- Payload CMS 与 Astro
- Prepr CMS & Astro
- Prismic & Astro
- Sanity & Astro
- Sitecore 体验管理器 & Astro
- Spinal & Astro
- 创作内容
- Firebase 与 Astro
- Supabase 与 Astro
- Turso 和 Astro
- Xata 与 Astro
- Appwrite & Astro
- 部署你的 Astro 站点至 Netlify
- 部署你的 Astro 站点至 Vercel
- 如何将你的 Astro 网站部署到 Deno
- 部署你的 Astro 站点至 GitHub Pages
- 部署你的 Astro 站点至 GitLab Pages
- 部署你的 Astro 站点至 Cloudflare Pages
- 将你的 Astro 网站部署到 AWS
- 将你的 Astro 网站通过 Flightcontrol 部署到 AWS
- 将你的 Astro 网站通过 SST 部署到 AWS
- 将你的 Astro 网站部署至 Google Cloud
- 部署你的 Astro 站点至 Google Firebase 托管
- 将你的 Astro 网站部署到 Heroku
- 将你的 Astro 网站部署到 Microsoft Azure
- 部署你的 Astro 站点至 Buddy
- 将你的 Astro 网站部署到 Edgio
- 将你的 Astro 站点部署到 Fly.io
- 将你的 Astro 网站部署到 Render
- 将你的 Astro 网站部署到 Stormkit
- 将你的 Astro 网站部署到 Surge
- 通过 Cleavr 部署你的 Astro 网站
- 将你的 Astro 站点部署到 Kinsta 应用托管
- 将你的 Astro 网站部署到 Space
- 将你的 Astro 站点部署到 Zeabur
- 将你的 Astro 网站部署到 Zerops
- 添加 RSS 摘要
- 安装一个 Vite 或 Rollup 插件
- 构建自定义图像组件
- 使用 API 路由构建表单
- 在 Astro 页面中构建 HTML 表单
- 在 Astro 中使用 Bun
- 调用服务器端点
- 校验验证码
- 用 Docker 来构建你的 Astro 网站
- 动态导入图片
- 为链接添加图标
- 添加 i18n 功能
- 添加最后修改时间
- 在 Astro 组件中共享状态
- 使用 Tailwind Typography 美化渲染后的 Markdown
- Unknown compiler error.
- Astro.redirect is not available in static mode.
- Astro.clientAddress is not available in current adapter.
- Astro.clientAddress cannot be used inside prerendered routes.
- Astro.clientAddress is not available in static mode.
- No static path found for requested path.
- Invalid type returned by Astro page.
- Missing value for client:media directive.
- No matching renderer found.
- No client entrypoint specified in renderer.
- Missing hint on client:only directive.
- Invalid value returned by a getStaticPaths path.
- Invalid entry inside getStaticPath's return value
- Invalid value returned by getStaticPaths.
- getStaticPaths RSS helper is not available anymore.
- Missing params property on getStaticPaths route.
- Invalid value for getStaticPaths route parameter.
- getStaticPaths() function required for dynamic routes.
- Invalid slot name.
- Cannot use Server-side Rendering without an adapter.
- No import found for component.
- Invalid prerender export.
- Invalid component arguments.
- Page number param not found.
- Image missing required "alt" property.
- Error while loading image service.
- Missing image dimensions
- Failed to retrieve remote image dimensions
- Unsupported image format
- Unsupported image conversion
- Prerendered dynamic endpoint has path collision.
- Expected src to be an image.
- Expected image options.
- Cannot set both densities and widths
- Image not found.
- Could not process image metadata.
- Image not found.
- Could not transform image.
- Unable to set response.
- The middleware didn't return a Response.
- The middleware returned something that is not a Response object.
- The endpoint did not return a Response.
- Value assigned to locals is not accepted.
- Astro.response.headers must not be reassigned.
- Can't load the middleware.
- Local images must be imported.
- Astro.glob() used outside of an Astro file.
- Astro.glob() did not match any files.
- A redirect must be given a location with the Location header.
- Invalid dynamic route.
- Could not find Sharp.
- Unknown Vite Error.
- Could not import file.
- Invalid glob pattern.
- Astro couldn't find the correct page to render
- The provided locale does not exist.
- Index page not found.
- You can't use the current function with the current strategy
- Prerendered routes aren't supported when internationalization domains are enabled.
- 启用了手动国际化路由但没有提供中间件。
- Astro can't render the route.
- Unhandled rejection
- i18n Not Enabled
- Route not found.
- Unknown CSS Error
- CSS Syntax Error
- Unknown Markdown Error.
- Failed to parse Markdown frontmatter.
- Invalid frontmatter injection.
- MDX integration missing.
- Unknown configuration error.
- Specified configuration file not found.
- Legacy configuration detected.
- Unknown CLI Error.
- Failed to generate content types.
- Unknown Content Collection Error.
- Content entry frontmatter does not match schema.
- Invalid content entry slug.
- Content Schema should not contain slug.
- Collection does not exist
- Content and data cannot be in same collection.
- Collection contains entries of a different type.
- Data collection entry failed to parse.
- Duplicate content entry slug.
- Actions must be used with server output.
- Unsupported transform in content config.
CLI 命令
你可以使用 Astro 提供的命令行界面 (CLI) 从终端窗口开发、构建和预览你的项目。
astro
命令
通过使用你喜欢的包管理器运行此页面上记录的命令之一来使用 CLI,可选择后跟任何标志。标志可以自定义命令的行为。
你最常使用的命令之一是 astro dev
。这个命令启动开发服务器,并在浏览器中为你提供一个实时更新的网站预览,以便你在工作时查看。
- npm
- pnpm
- Yarn
# 启动开发服务器
npx astro dev
# 启动开发服务器
pnpm astro dev
# 启动开发服务器
yarn astro dev
你可以在终端中输入 astro --help
来显示所有可用命令的列表:
- npm
- pnpm
- Yarn
npx astro --help
pnpm astro --help
yarn astro --help
下面的消息将在你的终端中显示:
astro [command] [...flags]
Commands
add Add an integration.
build Build your project and write it to disk.
check Check your project for errors.
dev Start the development server.
docs Open documentation in your web browser.
info List info about your current Astro setup.
preview Preview your build locally.
sync Generate content collection types.
preferences Configure user preferences.
telemetry Configure telemetry settings.
Global Flags
--config <path> Specify your config file.
--root <path> Specify your project root folder.
--site <url> Specify your project site.
--base <pathname> Specify your project base.
--verbose Enable verbose logging.
--silent Disable all logging.
--version Show the version number and exit.
--open Open the app in the browser on server start.
--help Show this help message.
package.json
脚本
你也可以在 package.json
中使用脚本来使用这些命令的简短版本。使用脚本允许你使用来自其他项目的相同命令,例如 npm run build
。
当你使用 create astro
向导 创建项目时,以下脚本是为你自动添加的,用于最常用的 astro
命令(astro dev
、astro build
和 astro preview
)。
当你按照手动安装 Astro 的说明进行操作时,你会被告知自己添加这些脚本。你还可以手动为任何你经常使用的命令添加更多脚本到这个列表中。
package.json{
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
}
}
你经常会使用这些 astro
命令,或者运行它们的脚本,而不带任何标志。当你想要自定义命令的行为时,可以向命令添加标志。例如,你可能希望在不同的端口上启动开发服务器,或者使用详细日志构建站点以进行调试。
- npm
- pnpm
- Yarn
# 使用 `package.json` 中的 `start` 脚本,以端口 8080 启动开发服务器
npm run start -- --port 8080
# 使用 `package.json` 中的 `build` 脚本,构建带有详细日志的网站
npm run build -- --verbose
# 使用 `package.json` 中的 `start` 脚本,以端口 8080 启动开发服务器
pnpm start --port 8080
# 使用 `package.json` 中的 `build` 脚本,构建带有详细日志的网站
pnpm build --verbose
# 使用 `package.json` 中的 `start` 脚本,以端口 8080 启动开发服务器
yarn start --port 8080
# 使用 `package.json` 中的 `build` 脚本,构建带有详细日志的网站
yarn build --verbose
astro dev
运行 Astro 的开发服务器。这是一个不打包资源的本地 HTTP 服务器。当你在编辑器中保存更改时,它使用热模块替换 (HMR) 来更新你的浏览器。
astro build
构建你的网站以进行部署。默认情况下,这将生成静态文件并将它们放在 dist/
目录中。如果SSR 被启用,这将生成必要的服务器文件为你的网站提供服务。
可以与下面记录的通用标志结合使用。
astro preview
启动一个本地服务器,用于提供由运行 astro build
创建的静态目录(默认为 dist/
)的内容。
该命令允许你在部署之前构建本地预览你的网站,以便在构建输出中捕获任何错误。它不是为在生产环境中运行而设计的。有关生产托管的帮助,请查看我们的部署 Astro 网站指南。
从 Astro 1.5.0 开始,如果你使用支持它的适配器,astro preview
也适用于 SSR 构建。目前,只有 Node 适配器支持 astro preview
。
可以与下面文档的通用标志结合使用。
astro check
对项目进行检测(比如对 .astro
文件进行类型检查),并向控制台输出错误信息。如果发现任何错误,该进程将以 1 代码退出。
该命令旨在用于 CI 工作流程。
标志
使用这些标志来自定义命令的行为。
--watch
该命令将监听你项目中的任何更改,并报告任何错误。
--root <path-to-dir>
指定一个不同的根目录进行检查。默认使用当前工作目录。
--tsconfig <path-to-file>
指定手动使用的 tsconfig.json
或 jsconfig.json
文件。如果未提供,Astro 将尝试找到配置,或自动推断项目的配置。
--minimumFailingSeverity <error|warning|hint>
指定退出并返回错误代码所需的最低严重性级别。默认为 error
。
例如,运行 astro check --minimumFailingSeverity warning
会在检测到任何警告时使命令退出并报错。
--minimumSeverity <error|warning|hint>
指定要输出的最低严重性级别。默认为 hint
。
例如,运行 astro check --minimumSeverity warning
将显示错误和警告,但不显示提示。
--preserveWatchOutput
指定在监听模式下,不清除检查之间的输出。
阅读更多关于 在 Astro 中类型检查 的信息。astro sync
添加于: astro@2.0.0
为所有 Astro 模块生成 TypeScript 类型。这会为类型推断设置一个src/env.d.ts
文件,并为依赖于生成类型的特性定义模块:
astro add
将集成添加到你的配置中。在集成指南中阅读更多信息。
astro docs
直接从终端启动 Astro Docs 网站。
astro info
显示当前 Astro 环境的有用信息,以便在提交 issue 时提供信息。
astro info
输出示例:
Astro version v2.6.6
Package manager pnpm
Platform darwin
Architecture arm64
Adapter @astrojs/vercel/serverless
Integrations none
astro preferences
使用 astro preferences
命令管理用户偏好。用户偏好是特定于单个 Astro 用户的,不像 astro.config.mjs
文件,它会改变所有项目的所有人的行为。
默认情况下,用户偏好是针对当前项目的,存储在本地的 .astro/settings.json
文件中。
使用 --global
标志,用户偏好也可以应用于当前机器上的每个 Astro 项目。全局用户偏好存储在特定于操作系统的位置。
可配置的偏好设置
devToolbar
— 在浏览器中启用或禁用开发工具栏。(默认值:true
)checkUpdates
— 启用或禁用 Astro CLI 的自动更新检查。(默认值:true
)
list
命令打印所有可配置用户偏好的当前设置。它还支持机器可读的 --json
输出格式。
astro preferences list
终端输出示例:
Preference | Value |
---|---|
devToolbar.enabled | true |
checkUpdates.enabled | true |
你可以通过 enable
、disable
或 reset
命令来启用、禁用或重置偏好设置至默认值。
举个例子,要在特定的 Astro 项目中禁用 devToolbar:
astro preferences disable devToolbar
要在当前机器上的所有 Astro 项目中禁用 devToolbar:
astro preferences disable --global devToolbar
稍后可以使用以下命令启用 devToolbar:
astro preferences enable devToolbar
reset
命令将偏好重置为其默认值:
astro preferences reset devToolbar
list
命令打印所有可配置用户偏好的当前设置。它还支持机器可读的 --json
输出。
astro preferences list
astro telemetry
为当前 CLI 用户设置遥测配置。遥测是匿名数据,可让 Astro 团队深入了解最常使用哪些 Astro 功能。有关更多信息,请参阅 Astro 的遥测页面。
可以通过这个 CLI 命令禁用遥测:
astro telemetry disable
后面也可以随时通过以下方式重新启用遥测:
astro telemetry enable
使用 reset
命令重置遥测数据:
astro telemetry reset
通用标志
--root <path>
指定项目根目录的路径。如果不指定,则假定当前工作目录为根目录。
根目录是用来寻找 Astro 配置文件的。
astro --root myRootFolder/myProjectFolder dev
--config <path>
指定配置文件的路径。默认为 astro.config.mjs
。如果使用了不同的配置文件名称或放在其他文件夹中,请使用:
astro --config config/astro.config.mjs dev
--outDir <path>
添加于: astro@3.3.0
为你的项目配置 outDir
。传递此标志将覆盖 astro.config.mjs
文件中的 outDir
值(如果存在)。
--site <url>
为你的项目配置 site
。传递此标志将覆盖 astro.config.mjs
文件中的 site
值(如果存在)。
--base <pathname>
添加于: astro@1.4.1
为你的项目配置 base
。传递此标志将覆盖 astro.config.mjs
文件中的 base
值(如果存在)。
--port <number>
指定运行开发服务器和预览服务器的端口。默认为 4321
。
--host [optional host address]
设置开发服务器和预览服务器应监听的网络 IP 地址(即非 localhost IP)。这在开发过程中对于在本地设备(如手机)上测试你的项目非常有用。
--host
— 在所有地址上监听,包括 LAN 和公共地址--host <custom-address>
— 在<custom-address>
的网络 IP 地址上公开
--verbose
启用完整日志,调试时有用。
--silent
启用静默日志,当你不想看到 Astro 日志时有用。
全局标志
使用这些标志获取有关 astro
CLI 的信息。
--version
打印 Astro 版本号并退出。
--open
在服务器启动时自动在浏览器中打开应用程序。可以传递完整的 URL 字符串 (例如 --open http://example.com
) 或路径名 (例如 --open /about
) 来指定要打开的 URL。
--help
打印帮助信息并退出。
高级 API(实验性)
如果你需要在运行 Astro 时获得更多的控制权,"astro"
包也导出了 API 来以编程方式运行 CLI 命令。
这些 API 是实验性的,它们的 API 签名可能会改变。任何更新都将在 Astro 更新日志 中提到,下面的信息将始终显示当前的、最新的信息。
AstroInlineConfig
AstroInlineConfig
类型由下面所有的命令 API 使用。它继承了用户的 Astro 配置 类型:
interface AstroInlineConfig extends AstroUserConfig {
configFile?: string | false;
mode?: "development" | "production";
logLevel?: "debug" | "info" | "warn" | "error" | "silent";
}
configFile
类型: string | false
默认值: undefined
一个自定义的 Astro 配置文件路径。
如果这个值是 undefined 的(默认)或未设置的,Astro 将在 root
目录下搜索 astro.config.(js,mjs,ts)
文件,并在找到时加载配置文件。
如果设置了相对路径,它将基于当前工作目录解析。
设置为 false
以禁用加载任何配置文件。
当与加载的用户配置合并时,传递给此对象的内联配置将具有最高优先级。
mode
类型: "development" | "production"
默认值: 当运行 astro dev
时为 "development"
, 当运行 astro build
时为 "production"
构建你的网站以生成“development”或“production”代码时使用的模式。
logLevel
类型: "debug" | "info" | "warn" | "error" | "silent"
默认值: "info"
Astro 记录的消息的日志级别。
"debug"
: 记录所有内容,包括干扰调试诊断。"info"
: 记录信息类型的消息,警告,和错误等日志。"warn"
: 记录警告和错误日志。"error"
: 只记录错误日志。"silent"
: 不开启日志。
dev()
类型: (inlineConfig: AstroInlineConfig) => AstroDevServer
和 astro dev
类似,使用它来运行 Astro 的开发服务器。
import { dev } from "astro";
const devServer = await dev({
root: "./my-project",
});
// 在需要时停止服务器
await devServer.stop();
build()
类型: (inlineConfig: AstroInlineConfig) => void
和 astro build
类似,使用它来构建你的网站以进行部署。
import { build } from "astro";
await build({
root: "./my-project",
});
preview()
类型: (inlineConfig: AstroInlineConfig) => AstroPreviewServer
和 astro preview
类似,它启动一个本地服务器为静态的 dist/
目录提供预览服务。
import { preview } from "astro";
const previewServer = await preview({
root: "./my-project",
});
// 在需要时停止服务器
await previewServer.stop();
sync()
类型: (inlineConfig: AstroInlineConfig) => number
和 astro sync
类似,它为所有 Astro 模块生成 TypeScript 类型。
import { sync } from "astro";
const exitCode = await sync({
root: "./my-project",
});
process.exit(exitCode)
Astro Studio CLI
astro login
通过 Astro Studio 进行身份验证。这对于运行所有数据库管理命令(包括 astro link
)是必需的。
astro link
连接到你的 Studio 托管数据库。这对于运行用于数据库管理的 Astro DB 命令是必需的。要连接一个数据库,你会被提示选择一个已存在的数据库或创建一个新的。
astro logout
登出 Astro Studio 并移除任何本地存储的身份验证密钥。
Reference如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论