astro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Astro Usage Guide

Astro使用指南

Always consult docs.astro.build for code examples and latest API.

Astro is the web framework for content-driven websites.

如需代码示例和最新API，请始终参考docs.astro.build。

Astro是面向内容驱动型网站的Web框架。

Quick Reference

快速参考

File Location

文件位置

CLI looks for

astro.config.js

astro.config.mjs

astro.config.cjs

, and

astro.config.ts

in:

./

. Use

--config

for custom path.

CLI会在当前目录

./

中查找

astro.config.js

、

astro.config.mjs

、

astro.config.cjs

和

astro.config.ts

文件。使用

--config

参数指定自定义路径。

CLI Commands

CLI命令

```
npx astro dev
```
- Start the development server.
```
npx astro build
```
- Build your project and write it to disk.
```
npx astro check
```
- Check your project for errors.
```
npx astro add
```
- Add an integration.
```
npmx astro sync
```
- Generate TypeScript types for all Astro modules.

Re-run after adding/changing plugins.

```
npx astro dev
```
- 启动开发服务器。
```
npx astro build
```
- 构建项目并写入磁盘。
```
npx astro check
```
- 检查项目中的错误。
```
npx astro add
```
- 添加集成。
```
npmx astro sync
```
- 为所有Astro模块生成TypeScript类型。

添加/更改插件后请重新运行。

Project Structure

项目结构

Astro leverages an opinionated folder layout for your project. Every Astro project root should include some directories and files. Reference project structure docs.

```
src/*
```
- Your project source code (components, pages, styles, images, etc.)
```
src/pages
```
- Required sub-directory in your Astro project. Without it, your site will have no pages or routes!
```
src/components
```
- It is common to group and organize all of your project components together in this folder. This is a common convention in Astro projects, but it is not required. Feel free to organize your components however you like!
```
src/layouts
```
- Just like
```
src/components
```
, this directory is a common convention but not required.
```
src/styles
```
- It is a common convention to store your CSS or Sass files here, but this is not required. As long as your styles live somewhere in the src/ directory and are imported correctly, Astro will handle and optimize them.
```
public/*
```
- Your non-code, unprocessed assets (fonts, icons, etc.). The files in this folder will be copied into the build folder untouched, and then your site will be built.
```
package.json
```
- A project manifest.
```
astro.config.{js,mjs,cjs,ts}
```
- An Astro configuration file. (recommended)
```
tsconfig.json
```
- A TypeScript configuration file. (recommended)

Astro采用约定式的项目文件夹布局。每个Astro项目根目录应包含一些目录和文件。参考项目结构文档。

```
src/*
```
- 项目源代码（组件、页面、样式、图片等）
```
src/pages
```
- Astro项目中必需的子目录。没有它，你的网站将没有页面或路由！
```
src/components
```
- 通常会将项目中的所有组件集中组织在此文件夹中。这是Astro项目的常见约定，但并非强制要求。你可以按照自己的喜好组织组件！
```
src/layouts
```
- 与
```
src/components
```
类似，这个目录是常见约定但并非必需。
```
src/styles
```
- 通常会将CSS或Sass文件存储在此处，但这也不是强制要求。只要你的样式文件位于src/目录中且导入正确，Astro就会处理并优化它们。
```
public/*
```
- 非代码类的未处理资源（字体、图标等）。此文件夹中的文件将原封不动地复制到构建文件夹中，然后再构建你的网站。
```
package.json
```
- 项目清单文件。
```
astro.config.{js,mjs,cjs,ts}
```
- Astro配置文件。（推荐使用）
```
tsconfig.json
```
- TypeScript配置文件。（推荐使用）

Core Config Options

核心配置选项

Option	Notes
`site`	Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build.

选项	说明
`site`	最终部署的URL。Astro会使用这个完整URL在最终构建中生成站点地图和规范URL。

Adapters

适配器

Deploy to your favorite server, serverless, or edge host with build adapters. Use an adapter to enable on-demand rendering in your Astro project.

Add Node.js adapter using astro add:

npx astro add node --yes

Add Cloudflare adapter using astro add:

npx astro add cloudflare --yes

Add Netlify adapter using astro add:

npx astro add netlify --yes

Add Vercel adapter using astro add:

npx astro add vercel --yes

Other Community adapters

通过构建适配器，你可以将项目部署到你喜爱的服务器、无服务器或边缘托管平台。使用适配器可在Astro项目中启用按需渲染。

使用astro add添加Node.js适配器：

npx astro add node --yes

使用astro add添加Cloudflare适配器：

npx astro add cloudflare --yes

使用astro add添加Netlify适配器：

npx astro add netlify --yes

使用astro add添加Vercel适配器：

npx astro add vercel --yes

其他社区适配器