Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions src/content/docs/zh-cn/guides/deploy/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ i18nReady: true

## 项目配置

你的 Astro 项目可以通过三种不同的方式部署到Netlify:作为一个静态网站,一个服务端渲染的网站,或一个(实验性的)边缘渲染的网站
你的 Astro 项目可以通过三种不同的方式部署到 Netlify:作为一个静态网站,一个服务端渲染的网站,或一个边缘渲染的网站

### 静态网站

你的 Astro 项目默认就是静态网站。你不需要任何额外的配置就可以将静态的 Astro 网站部署到 Netlify。

### SSR/Edge 下的适配
### SSR 适配器

为你的 Astro 项目开启 SSR 并在 Netlity 上部署:
为你的 Astro 项目开启 SSR 并在 Netlity 上部署,包括使用 Netlify 的边缘函数:

通过以下的 `astro add` 命令,添加 [Netlify 适配器](/zh-cn/guides/integrations-guide/netlify/),在你的 Astro 项目中启用 SSR。这一步将会安装适配器并且对你的 `astro.config.mjs` 文件进行适当的修改。

Expand Down Expand Up @@ -46,17 +46,20 @@ npx astro add netlify
});
```

要使用 [Netlify 的实验性 Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app) 来渲染你的项目,你需要更改 Astro 配置文件中 `netlify/functions` 的导入,使用 `netlify/edge-functions` 代替它。
```js title="astro.config.mjs" ins={3} del={2}
你还可使用 Netlify 的边缘函数部署你的项目,即通过在 Netlify 适配器的配置中添加 `edgeMiddleware: true`:

```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';
import netlify from '@astrojs/netlify/edge-functions';

export default defineConfig({
output: 'server',
adapter: netlify(),
adapter: netlify({
+ edgeMiddleware: true
}),
});
```
```

## 如何部署

Expand All @@ -66,13 +69,13 @@ npx astro add netlify

如果你的项目存储在 GitHub、GitLab、BitBucket 或 Azure DevOps 中,你可以使用 Netlify 的网站用户操作界面来部署你的 Astro 网站。

1. 在 [Netlify dashboard](https://app.netlify.com/) 页面上, 点击 <kbd>Add a new site</kbd>
1. 在 [Netlify dashboard](https://app.netlify.com/) 页面上点击 <kbd>Add a new site</kbd>

2. 选择 <kbd>Import an existing project</kbd>

当你从你的 Git 提供商中导入 Astro 仓库时,Netlify 应该会自动检测并预填充正确的配置设置。

3. 确保已输入以下设置,然后按下 <kbd>Deploy</kbd> 按钮:
3. 确保已输入以下设置,然后按下 <kbd>Deploy</kbd> 按钮

- **Build Command:** `astro build` or `npm run build`
- **Publish directory:** `dist`
Expand Down Expand Up @@ -117,7 +120,7 @@ npx astro add netlify

CLI 将向仓库添加一个部署密钥,这意味着每次你使用 `git push` 时,你的网站都会在 Netlify 上自动重新构建。

📚 更多详情请参阅 Netlify 的文章: [使用 Netlify CLI 部署 Astro 网站](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)。
📚 更多详情请参阅 Netlify 的文章[使用 Netlify CLI 部署 Astro 网站](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)。

### 设置 Node.js 版本

Expand Down
168 changes: 154 additions & 14 deletions src/content/docs/zh-cn/guides/images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ i18nReady: true
---
import Since from '~/components/Since.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Badge from '~/components/Badge.astro';

Astro 为你提供了多种在网站上使用图像的方法,无论它们是本地存储在你的项目内,还是链接到外部 URL,或者在 CMS 或 CDN 中管理的!

Expand Down Expand Up @@ -82,10 +83,6 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900
/>
```

目前,内置的 assets 功能不包括 `<Picture />` 组件。

相反,你可以 [使用 `getImage()` 生成图像或自定义组件](#使用-getimage-生成图像),这些组件使用 HTML 图像属性 `srcset` 和 `sizes` 或 `<picture>` 标签进行 [艺术指导或创建响应式图像](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)。

#### 属性

##### src (必须)
Expand Down Expand Up @@ -143,6 +140,77 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900

但是,对于远程图像和存储在 `public/` 文件夹中的图像,这两个属性是必需的,因为 Astro 无法分析这些文件。

##### densities

<Since v="3.3.0" /> <Badge>实验性</Badge>

为图像生成的像素密度列表。

如果提供了该值,将会在 `<img>` 标签上生成一个 `srcset` 属性。在使用此值时,请不要提供 `widths` 的值。

与原始图像相同或大于原始图像宽度的像素密度会被忽略,以避免放大图像。

```astro
---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png";
---
<Image src={myImage} width={myImage.width / 2} densities={[1.5, 2]} alt="我的图片描述" />
```

```html
<img
src="/_astro/my_image.hash.webp"
srcset="
/_astro/my_image.hash.webp 1.5x
/_astro/my_image.hash.webp 2x
"
alt="我的图片描述"
width="800"
height="450"
loading="lazy"
decoding="async"
/>
```


##### widths

<Since v="3.3.0" /> <Badge>实验性</Badge>

为图像生成的宽度列表。

如果提供了该值,将会在 `<img>` 标签上生成一个 `srcset` 属性。但还需提供一个 [`sizes` 属性](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)。

在使用该值时,请不要提供 `densities` 的值。这两个值只能选择一个来生成 `srcset` 属性。

将忽略大于原始图像宽度的宽度值,以避免对图像进行放大。

```astro
---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---
<Image src={myImage} widths={[240, 540, 720, myImage.width]} alt="我的图片描述" />
```

```html
<img
src="/_astro/my_image.hash.webp"
srcset="
/_astro/my_image.hash.webp 240w,
/_astro/my_image.hash.webp 540w,
/_astro/my_image.hash.webp 720w,
/_astro/my_image.hash.webp 1600w
"
alt="我的图片描述"
width="1600"
height="900"
loading="lazy"
decoding="async"
/>
```

##### format

你可以选择指定要使用的 [图像文件类型](https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types#common_image_file_types) 输出。
Expand Down Expand Up @@ -206,6 +274,79 @@ const {src, ...attrs} = Astro.props;
</style>
```

### `<Picture />`

<Since v="3.3.0" /> <Badge>实验性</Badge>

使用内置的 `<Picture />` Astro 组件来显示具有多种格式和/或尺寸的响应式图像。

```astro title="src/pages/index.astro"
---
import { Picture } from 'astro:assets';
import myImage from "../assets/my_image.png"; // 图像分辨率为 1600x900
---
<!-- `alt` 属性在 `Picture` 组件中是必需的 -->
<Picture src={myImage} formats={['avif', 'webp']} alt="我的图片描述" />
```

```html
<!-- 输出 -->
<picture>
<source srcset="/_astro/my_image.hash.avif" type="image/avif" />
<source srcset="/_astro/my_image.hash.webp" type="image/webp" />
<img
src="/_astro/my_image.hash.png"
width="1600"
height="900"
decoding="async"
loading="lazy"
alt="我的图片描述"
/>
</picture>
```

#### 属性

`<Picture />` 支持 `<Image />` 组件的所有属性,以及以下属性:

##### `formats`

用于 `<source>` 标签的图像格式数组。条目将按照它们在数组中的顺序作为 `<source>` 元素添加到标签中,这个顺序决定了显示的格式。为了最佳性能,请将最新的格式放在首位(例如 `webp` 或 `avif`)。默认情况下,设置为 `['webp']`。

##### `fallbackFormat`

用作 `<img>` 标签的回退格式值。

静态图像默认为 `.png`,动画图像默认为 `.gif`,SVG 文件默认为 `.svg`。

##### `pictureAttributes`

一个要添加到 `<picture>` 标签的属性对象。

使用此属性将属性应用于外部的 `<picture>` 元素本身。直接应用于 `<Picture />` 组件的属性,除了那些图像转换属性,将应用于内部的 `<img>` 元素。

```astro
---
import { Picture } from "astro:assets";
import myImage from "../my_image.png"; // 图像分辨率为 1600x900
---
<Picture src={myImage} alt="我的图片描述" pictureAttributes={{style: "background-color: red;"}} />
```

```html
<picture style="background-color: red;">
<source srcset="/_astro/my_image.hash.webp" type="image/webp" />
<img
src="/_astro/my_image.hash.png"
alt="我的图片描述"
width="1600"
height="900"
loading="lazy"
decoding="async"
/>
</picture>
```

### `<img>`

[Astro 模板语法](/zh-cn/core-concepts/astro-syntax/) 也支持直接编写 `<img>` 标签,完全控制其最终输出。这些图像不会被处理和优化。
Expand Down Expand Up @@ -255,7 +396,7 @@ interface ImageMetadata {

### 选择 `<Image />` 还是 `<img>`

`<Image />` 组件会优化图像,并根据原始宽高比推断宽度和高度(对于本地图像),以避免 CLS。但是,它只适用于某些格式,并且不提供 `<picture>` 元素,也不支持 `srcset`。
`<Image />` 组件会优化图像,并根据原始宽高比推断宽度和高度(对于本地图像),以避免 CLS。

当你不能使用 `<Image />` 组件时,请使用 HTML `<img>` 元素,例如:
- 不支持的图像格式
Expand Down Expand Up @@ -480,8 +621,13 @@ const optimizedBackground = await getImage({src: myBackground, format: 'avif'})

```js
{
options: {...} // 传递的原始参数
src: "https//..." // 生成图像的路径
rawOptions: {...}, // 传递的原始参数
options: {...}, // 经过验证的参数
src: "...", // 生成图像的路径
srcSet: {
values: [...], // srcset 的生成值,每个条目包含一个 URL 和一个尺寸描述符
attribute: "", // 从生成的值生成的 srcset 属性
},
attributes: {...} // 渲染图像所需的附加 HTML 属性(宽度、高度、样式等)
}
```
Expand Down Expand Up @@ -697,13 +843,7 @@ import rocket from '../images/rocket.svg';
/>
```

4. 移除任何现有的 `<Picture />` 组件。

目前,内置的 assets 功能不包括 `<Picture />` 组件。

相反,你可以使用 HTML 图像属性 `srcset` 和 `sizes` 或 `<picture>` 标签进行艺术指导或创建响应式图像。

5. 选择一个默认图像服务。
4. 选择一个默认图像服务。

[Sharp](https://github.com/lovell/sharp) 现在是 `astro:assets` 的默认图像服务。如果你想使用 Sharp,无需任何配置。

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/zh-cn/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -927,8 +927,8 @@ const enterpriseCaptainProfile = await getEntry(enterprise.data.captain);

**Types:**

- `(Array<{ collection: string, id: string }>) => CollectionEntry<collection>`
- `(Array<{ collection: string, slug: string }>) => CollectionEntry<collection>`
- `(Array<{ collection: string, id: string }>) => Array<CollectionEntry<collection>>`
- `(Array<{ collection: string, slug: string }>) => Array<CollectionEntry<collection>>`

`getEntries()` 是一个从同一集合中检索多个集合条目的函数。这对于[返回引用条目的数组](/zh-cn/guides/content-collections/#定义集合引用)访问其关联的`data`、`body`和`render()`属性非常有用。

Expand Down
31 changes: 18 additions & 13 deletions src/content/docs/zh-cn/reference/cli-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

### `astro` 命令

通过使用你喜欢的包管理器运行此页面上记录的**命令**之一来使用 CLI,可选择后跟任何**标志**。 标志可以自定义命令的行为。
通过使用你喜欢的包管理器运行此页面上记录的**命令**之一来使用 CLI,可选择后跟任何**标志**。标志可以自定义命令的行为。

你最常使用的命令之一是 `astro dev`。 这个命令启动开发服务器,并在浏览器中为你提供一个实时更新的网站预览,以便你在工作时查看。
你最常使用的命令之一是 `astro dev`。这个命令启动开发服务器,并在浏览器中为你提供一个实时更新的网站预览,以便你在工作时查看。

<PackageManagerTabs>
<Fragment slot="npm">
Expand Down Expand Up @@ -88,11 +88,11 @@ Global Flags

### `package.json` 脚本

你也可以在 `package.json` 中使用脚本来使用这些命令的简短版本。 使用脚本允许你使用来自其他项目的相同命令,例如 `npm run build`。
你也可以在 `package.json` 中使用脚本来使用这些命令的简短版本。使用脚本允许你使用来自其他项目的相同命令,例如 `npm run build`。

当你使用 [`create astro` 向导](/zh-cn/install/auto/#1-运行安装向导) 创建项目时,以下脚本是为你自动添加的,用于最常用的 `astro` 命令(`astro dev`、`astro build` 和 `astro preview`)。

当你按照[手动安装 Astro](/zh-cn/install/manual/#2-安装-astro) 的说明进行操作时,你会被告知自己添加这些脚本。 你还可以手动为任何你经常使用的命令添加更多脚本到这个列表中。
当你按照[手动安装 Astro](/zh-cn/install/manual/#2-安装-astro) 的说明进行操作时,你会被告知自己添加这些脚本。你还可以手动为任何你经常使用的命令添加更多脚本到这个列表中。

```json title="package.json"
{
Expand All @@ -105,7 +105,7 @@ Global Flags
}
```

你经常会使用这些 `astro` 命令,或者运行它们的脚本,而不带任何标志。 当你想要自定义命令的行为时,可以向命令添加标志。 例如,你可能希望在不同的端口上启动开发服务器,或者使用详细日志构建站点以进行调试。
你经常会使用这些 `astro` 命令,或者运行它们的脚本,而不带任何标志。当你想要自定义命令的行为时,可以向命令添加标志。例如,你可能希望在不同的端口上启动开发服务器,或者使用详细日志构建站点以进行调试。

<PackageManagerTabs>
<Fragment slot="npm">
Expand Down Expand Up @@ -142,7 +142,7 @@ Global Flags
运行 Astro 的开发服务器。这是一个不打包资源的本地 HTTP 服务器。当你在编辑器中保存更改时,它使用热模块替换 (HMR) 来更新你的浏览器。
<h3>标志</h3>

使用这些标志来自定义 Astro 开发服务器的行为。 对于与其他 Astro 命令共享的标志,请参阅下面的[通用标志](#通用标志)。
使用这些标志来自定义 Astro 开发服务器的行为。对于与其他 Astro 命令共享的标志,请参阅下面的[通用标志](#通用标志)。

#### `--port <number>`

Expand All @@ -161,19 +161,18 @@ Global Flags

## `astro build`

构建你的网站以进行部署。默认情况下,这将生成静态文件并将它们放在`dist/`目录中。如果[SSR被启用](/zh-cn/guides/server-side-rendering/),这将生成必要的服务器文件为你的网站提供服务。
构建你的网站以进行部署。默认情况下,这将生成静态文件并将它们放在 `dist/` 目录中。如果[SSR 被启用](/zh-cn/guides/server-side-rendering/),这将生成必要的服务器文件为你的网站提供服务。

<h3>标志</h3>

使用这些标志来自定义构建。 对于与其他 Astro 命令共享的标志,请参阅下面的[通用标志](#通用标志)。
可以与下面记录的[通用标志](#通用标志)结合使用

## `astro preview`

启动本地静态文件服务器,为静态的 `dist/` 目录提供服务。

此命令对于在部署之前在本地预览你的构建很有用。它不是为在生产环境中运行而设计的。关于生产托管的帮助,请查看我们的[部署 Astro 站点](/zh-cn/guides/deploy/)指南。

从 Astro 1.5.0 开始,如果你使用支持它的适配器,`astro preview`也适用于 SSR 构建。 目前,只有 [Node 适配器](/zh-cn/guides/integrations-guide/node/)支持 `astro preview`。
从 Astro 1.5.0 开始,如果你使用支持它的适配器,`astro preview` 也适用于 SSR 构建。目前,只有 [Node 适配器](/zh-cn/guides/integrations-guide/node/)支持 `astro preview`。

可以与下面文档的[通用标志](#通用标志)结合使用。

Expand Down Expand Up @@ -282,15 +281,21 @@ astro --root myRootFolder/myProjectFolder dev
astro --config config/astro.config.mjs dev
```

### `--outDir <path>`

<Since v="3.3.0" />

为你的项目配置 [`outDir`](/zh-cn/reference/configuration-reference/#outdir)。传递此标志将覆盖 `astro.config.mjs` 文件中的 `outDir` 值(如果存在)。

### `--site <url>`

为你的项目配置[`site`](/zh-cn/reference/configuration-reference/#base)。 传递此标志将覆盖 `astro.config.mjs` 文件中的`site`值(如果存在)。
为你的项目配置 [`site`](/zh-cn/reference/configuration-reference/#base)。传递此标志将覆盖 `astro.config.mjs` 文件中的 `site` 值(如果存在)。

### `--base <pathname>`

<Since v="1.4.1" />

为你的项目配置[`base`](/zh-cn/reference/configuration-reference/#base)。 传递此标志将覆盖 `astro.config.mjs` 文件中的`base`值(如果存在)。
为你的项目配置 [`base`](/zh-cn/reference/configuration-reference/#base)。传递此标志将覆盖 `astro.config.mjs` 文件中的 `base` 值(如果存在)。

### `--verbose`

Expand Down Expand Up @@ -361,7 +366,7 @@ interface AstroInlineConfig extends AstroUserConfig {
**默认值:** 当运行 `astro dev` 时为 `"development"` , 当运行 `astro build` 时为 `"production"`
</p>

构建你的网站以生成 “development”“production” 代码时使用的模式。
构建你的网站以生成“development”“production”代码时使用的模式。

#### `logLevel`

Expand Down
Loading