diff --git a/src/content/docs/zh-cn/guides/deploy/netlify.mdx b/src/content/docs/zh-cn/guides/deploy/netlify.mdx
index a7ce1cece84cb..5b1ebfcc70106 100644
--- a/src/content/docs/zh-cn/guides/deploy/netlify.mdx
+++ b/src/content/docs/zh-cn/guides/deploy/netlify.mdx
@@ -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` 文件进行适当的修改。
@@ -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
+ }),
});
- ```
+ ```
## 如何部署
@@ -66,13 +69,13 @@ npx astro add netlify
如果你的项目存储在 GitHub、GitLab、BitBucket 或 Azure DevOps 中，你可以使用 Netlify 的网站用户操作界面来部署你的 Astro 网站。
-1. 在 [Netlify dashboard](https://app.netlify.com/) 页面上, 点击 Add a new site
+1. 在 [Netlify dashboard](https://app.netlify.com/) 页面上，点击 Add a new site
2. 选择 Import an existing project
当你从你的 Git 提供商中导入 Astro 仓库时，Netlify 应该会自动检测并预填充正确的配置设置。
-3. 确保已输入以下设置，然后按下 Deploy 按钮:
+3. 确保已输入以下设置，然后按下 Deploy 按钮：
- **Build Command:** `astro build` or `npm run build`
- **Publish directory:** `dist`
@@ -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 版本
diff --git a/src/content/docs/zh-cn/guides/images.mdx b/src/content/docs/zh-cn/guides/images.mdx
index 40b7a29eeee7a..8c145d8a1666a 100644
--- a/src/content/docs/zh-cn/guides/images.mdx
+++ b/src/content/docs/zh-cn/guides/images.mdx
@@ -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 中管理的！
@@ -82,10 +83,6 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900
/>
```
-目前，内置的 assets 功能不包括 `` 组件。
-
-相反，你可以 [使用 `getImage()` 生成图像或自定义组件](#使用-getimage-生成图像)，这些组件使用 HTML 图像属性 `srcset` 和 `sizes` 或 `` 标签进行 [艺术指导或创建响应式图像](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)。
-
#### 属性
##### src (必须)
@@ -143,6 +140,77 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900
但是，对于远程图像和存储在 `public/` 文件夹中的图像，这两个属性是必需的，因为 Astro 无法分析这些文件。
+##### densities
+
+ 实验性
+
+为图像生成的像素密度列表。
+
+如果提供了该值，将会在 `![]()
` 标签上生成一个 `srcset` 属性。在使用此值时，请不要提供 `widths` 的值。
+
+与原始图像相同或大于原始图像宽度的像素密度会被忽略，以避免放大图像。
+
+```astro
+---
+import { Image } from 'astro:assets';
+import myImage from "../assets/my_image.png";
+---
+
+```
+
+```html
+
+```
+
+
+##### widths
+
+ 实验性
+
+为图像生成的宽度列表。
+
+如果提供了该值，将会在 `![]()
` 标签上生成一个 `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
+---
+
+```
+
+```html
+
+```
+
##### format
你可以选择指定要使用的 [图像文件类型](https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types#common_image_file_types) 输出。
@@ -206,6 +274,79 @@ const {src, ...attrs} = Astro.props;
```
+### ``
+
+ 实验性
+
+使用内置的 `` Astro 组件来显示具有多种格式和/或尺寸的响应式图像。
+
+```astro title="src/pages/index.astro"
+---
+import { Picture } from 'astro:assets';
+import myImage from "../assets/my_image.png"; // 图像分辨率为 1600x900
+---
+
+
+```
+
+```html
+
+
+
+
+ 
+
+```
+
+#### 属性
+
+`` 支持 `` 组件的所有属性，以及以下属性：
+
+##### `formats`
+
+用于 `` 标签的图像格式数组。条目将按照它们在数组中的顺序作为 `` 元素添加到标签中，这个顺序决定了显示的格式。为了最佳性能，请将最新的格式放在首位（例如 `webp` 或 `avif`）。默认情况下，设置为 `['webp']`。
+
+##### `fallbackFormat`
+
+用作 `![]()
` 标签的回退格式值。
+
+静态图像默认为 `.png`，动画图像默认为 `.gif`，SVG 文件默认为 `.svg`。
+
+##### `pictureAttributes`
+
+一个要添加到 `` 标签的属性对象。
+
+使用此属性将属性应用于外部的 `` 元素本身。直接应用于 `` 组件的属性，除了那些图像转换属性，将应用于内部的 `![]()
` 元素。
+
+```astro
+---
+import { Picture } from "astro:assets";
+import myImage from "../my_image.png"; // 图像分辨率为 1600x900
+---
+
+```
+
+```html
+
+
+
+
+```
+
### `![]()
`
[Astro 模板语法](/zh-cn/core-concepts/astro-syntax/) 也支持直接编写 `![]()
` 标签，完全控制其最终输出。这些图像不会被处理和优化。
@@ -255,7 +396,7 @@ interface ImageMetadata {
### 选择 `` 还是 `![]()
`
-`` 组件会优化图像，并根据原始宽高比推断宽度和高度（对于本地图像），以避免 CLS。但是，它只适用于某些格式，并且不提供 `` 元素，也不支持 `srcset`。
+`` 组件会优化图像，并根据原始宽高比推断宽度和高度（对于本地图像），以避免 CLS。
当你不能使用 `` 组件时，请使用 HTML `![]()
` 元素，例如：
- 不支持的图像格式
@@ -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 属性（宽度、高度、样式等）
}
```
@@ -697,13 +843,7 @@ import rocket from '../images/rocket.svg';
/>
```
-4. 移除任何现有的 `` 组件。
-
- 目前，内置的 assets 功能不包括 `` 组件。
-
- 相反，你可以使用 HTML 图像属性 `srcset` 和 `sizes` 或 `` 标签进行艺术指导或创建响应式图像。
-
-5. 选择一个默认图像服务。
+4. 选择一个默认图像服务。
[Sharp](https://github.com/lovell/sharp) 现在是 `astro:assets` 的默认图像服务。如果你想使用 Sharp，无需任何配置。
diff --git a/src/content/docs/zh-cn/reference/api-reference.mdx b/src/content/docs/zh-cn/reference/api-reference.mdx
index fad4a4480081b..363a0245f740f 100644
--- a/src/content/docs/zh-cn/reference/api-reference.mdx
+++ b/src/content/docs/zh-cn/reference/api-reference.mdx
@@ -927,8 +927,8 @@ const enterpriseCaptainProfile = await getEntry(enterprise.data.captain);
**Types：**
-- `(Array<{ collection: string, id: string }>) => CollectionEntry`
-- `(Array<{ collection: string, slug: string }>) => CollectionEntry`
+- `(Array<{ collection: string, id: string }>) => Array>`
+- `(Array<{ collection: string, slug: string }>) => Array>`
`getEntries()` 是一个从同一集合中检索多个集合条目的函数。这对于[返回引用条目的数组](/zh-cn/guides/content-collections/#定义集合引用)访问其关联的`data`、`body`和`render()`属性非常有用。
diff --git a/src/content/docs/zh-cn/reference/cli-reference.mdx b/src/content/docs/zh-cn/reference/cli-reference.mdx
index 187831dd81734..1de6cc49853e6 100644
--- a/src/content/docs/zh-cn/reference/cli-reference.mdx
+++ b/src/content/docs/zh-cn/reference/cli-reference.mdx
@@ -9,9 +9,9 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
### `astro` 命令
-通过使用你喜欢的包管理器运行此页面上记录的**命令**之一来使用 CLI，可选择后跟任何**标志**。 标志可以自定义命令的行为。
+通过使用你喜欢的包管理器运行此页面上记录的**命令**之一来使用 CLI，可选择后跟任何**标志**。标志可以自定义命令的行为。
-你最常使用的命令之一是 `astro dev`。 这个命令启动开发服务器，并在浏览器中为你提供一个实时更新的网站预览，以便你在工作时查看。
+你最常使用的命令之一是 `astro dev`。这个命令启动开发服务器，并在浏览器中为你提供一个实时更新的网站预览，以便你在工作时查看。
@@ -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"
{
@@ -105,7 +105,7 @@ Global Flags
}
```
-你经常会使用这些 `astro` 命令，或者运行它们的脚本，而不带任何标志。 当你想要自定义命令的行为时，可以向命令添加标志。 例如，你可能希望在不同的端口上启动开发服务器，或者使用详细日志构建站点以进行调试。
+你经常会使用这些 `astro` 命令，或者运行它们的脚本，而不带任何标志。当你想要自定义命令的行为时，可以向命令添加标志。例如，你可能希望在不同的端口上启动开发服务器，或者使用详细日志构建站点以进行调试。
@@ -142,7 +142,7 @@ Global Flags
运行 Astro 的开发服务器。这是一个不打包资源的本地 HTTP 服务器。当你在编辑器中保存更改时，它使用热模块替换 (HMR) 来更新你的浏览器。
标志
-使用这些标志来自定义 Astro 开发服务器的行为。 对于与其他 Astro 命令共享的标志，请参阅下面的[通用标志](#通用标志)。
+使用这些标志来自定义 Astro 开发服务器的行为。对于与其他 Astro 命令共享的标志，请参阅下面的[通用标志](#通用标志)。
#### `--port `
@@ -161,11 +161,10 @@ Global Flags
## `astro build`
-构建你的网站以进行部署。默认情况下，这将生成静态文件并将它们放在`dist/`目录中。如果[SSR被启用](/zh-cn/guides/server-side-rendering/)，这将生成必要的服务器文件为你的网站提供服务。
+构建你的网站以进行部署。默认情况下，这将生成静态文件并将它们放在 `dist/` 目录中。如果[SSR 被启用](/zh-cn/guides/server-side-rendering/)，这将生成必要的服务器文件为你的网站提供服务。
-标志
-使用这些标志来自定义构建。 对于与其他 Astro 命令共享的标志，请参阅下面的[通用标志](#通用标志)。
+可以与下面记录的[通用标志](#通用标志)结合使用。
## `astro preview`
@@ -173,7 +172,7 @@ Global Flags
此命令对于在部署之前在本地预览你的构建很有用。它不是为在生产环境中运行而设计的。关于生产托管的帮助，请查看我们的[部署 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`。
可以与下面文档的[通用标志](#通用标志)结合使用。
@@ -282,15 +281,21 @@ astro --root myRootFolder/myProjectFolder dev
astro --config config/astro.config.mjs dev
```
+### `--outDir `
+
+
+
+为你的项目配置 [`outDir`](/zh-cn/reference/configuration-reference/#outdir)。传递此标志将覆盖 `astro.config.mjs` 文件中的 `outDir` 值（如果存在）。
+
### `--site `
-为你的项目配置[`site`值](/zh-cn/reference/configuration-reference/#base)。 传递此标志将覆盖 `astro.config.mjs` 文件中的`site`值（如果存在）。
+为你的项目配置 [`site`](/zh-cn/reference/configuration-reference/#base)。传递此标志将覆盖 `astro.config.mjs` 文件中的 `site` 值（如果存在）。
### `--base `
-为你的项目配置[`base`值](/zh-cn/reference/configuration-reference/#base)。 传递此标志将覆盖 `astro.config.mjs` 文件中的`base`值（如果存在）。
+为你的项目配置 [`base`](/zh-cn/reference/configuration-reference/#base)。传递此标志将覆盖 `astro.config.mjs` 文件中的 `base` 值（如果存在）。
### `--verbose`
@@ -361,7 +366,7 @@ interface AstroInlineConfig extends AstroUserConfig {
**默认值：** 当运行 `astro dev` 时为 `"development"` , 当运行 `astro build` 时为 `"production"`
-构建你的网站以生成 “development” 或 “production” 代码时使用的模式。
+构建你的网站以生成“development”或“production”代码时使用的模式。
#### `logLevel`
diff --git a/src/content/docs/zh-cn/reference/configuration-reference.mdx b/src/content/docs/zh-cn/reference/configuration-reference.mdx
index 2a1866fe8daf2..a3062448dd350 100644
--- a/src/content/docs/zh-cn/reference/configuration-reference.mdx
+++ b/src/content/docs/zh-cn/reference/configuration-reference.mdx
@@ -271,7 +271,7 @@ $ astro build --root ./my-project-directory
**类型**：`AstroIntegration`
-使用构建适配器将其部署到你最喜爱的服务器、无服务器或边缘主机。导入我们的第一方适配器 [Netlify](/zh-cn/guides/deploy/netlify/#ssredge-下的适配)、[Vercel](/zh-cn/guides/deploy/vercel/#ssr-适配器)，以及更多的适配器来使用 Astro SSR。
+使用构建适配器将其部署到你最喜爱的服务器、无服务器或边缘主机。导入我们的第一方适配器 [Netlify](/zh-cn/guides/deploy/netlify/#ssr-适配器)、[Vercel](/zh-cn/guides/deploy/vercel/#ssr-适配器)，以及更多的适配器来使用 Astro SSR。
[有关 SSR 的更多信息，请参见我们的服务器端渲染指南](/zh-cn/guides/server-side-rendering/)，以及[我们的部署指南](/zh-cn/guides/deploy/)以获得完整的主机列表。
@@ -943,3 +943,4 @@ Astro 提供了实验性标志，以便用户提前使用新功能。这些标
},
}
```
+
diff --git a/src/content/docs/zh-cn/reference/error-reference.mdx b/src/content/docs/zh-cn/reference/error-reference.mdx
index c83f209a7da23..c9a3629209788 100644
--- a/src/content/docs/zh-cn/reference/error-reference.mdx
+++ b/src/content/docs/zh-cn/reference/error-reference.mdx
@@ -38,6 +38,7 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/
- [**PrerenderDynamicEndpointPathCollide**](/zh-cn/reference/errors/prerender-dynamic-endpoint-path-collide/)
Prerendered dynamic endpoint has path collision.
- [**ExpectedImage**](/zh-cn/reference/errors/expected-image/)
Expected src to be an image.
- [**ExpectedImageOptions**](/zh-cn/reference/errors/expected-image-options/)
Expected image options.
+- [**IncompatibleDescriptorOptions**](/zh-cn/reference/errors/incompatible-descriptor-options/)
Cannot set both `densities` and `widths`
- [**ImageNotFound**](/zh-cn/reference/errors/image-not-found/)
Image not found.
- [**NoImageMetadata**](/zh-cn/reference/errors/no-image-metadata/)
Could not process image metadata.
- [**MarkdownImageNotFound**](/zh-cn/reference/errors/markdown-image-not-found/)
Image not found.
diff --git a/src/content/docs/zh-cn/reference/errors/incompatible-descriptor-options.mdx b/src/content/docs/zh-cn/reference/errors/incompatible-descriptor-options.mdx
new file mode 100644
index 0000000000000..365f2efe47e64
--- /dev/null
+++ b/src/content/docs/zh-cn/reference/errors/incompatible-descriptor-options.mdx
@@ -0,0 +1,17 @@
+---
+title: Cannot set both densities and widths
+i18nReady: true
+githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
+---
+
+> **IncompatibleDescriptorOptions**: `densities` 和 `widths` 只能指定其中之一。在大多数情况下，如果你需要指定特定的宽度，可能只需要使用 `widths` 参数即可。
+
+
+## 哪里出了问题？
+
+只能指定 `densities` 和 `widths` 中的其中一个。这些属性用于构建 `srcset` 属性，而 `srcset` 属性不能同时包含 `x` 和 `w` 描述符。
+
+**请参阅：**
+- [图像](/zh-cn/guides/images/)
+
+
diff --git a/src/content/docs/zh-cn/reference/image-service-reference.mdx b/src/content/docs/zh-cn/reference/image-service-reference.mdx
index af215d4c59f4b..7476ffe3a5818 100644
--- a/src/content/docs/zh-cn/reference/image-service-reference.mdx
+++ b/src/content/docs/zh-cn/reference/image-service-reference.mdx
@@ -2,6 +2,8 @@
title: 图像服务 API
i18nReady: true
---
+import Badge from '~/components/Badge.astro';
+import Since from '~/components/Since.astro';
`astro:assets` 旨在使任何图像优化服务都能轻松地在 Astro 上构建服务。
@@ -172,6 +174,8 @@ export type ImageTransform = {
src: ImageMetadata | string;
width?: number;
height?: number;
+ widths?: number[] | undefined;
+ densities?: (number | `${number}x`)[] | undefined;
quality?: ImageQuality;
format?: OutputFormat;
alt?: string;
@@ -206,6 +210,25 @@ export type ImageTransform = {
该钩子根据用户传递的参数 (`options`) 返回用于将图像呈现为 HTML 的所有附加属性。
+### `getSrcSet()`
+ 实验性
+
+**对于本地和外部服务而言是可选的。**
+
+`getSrcSet?: (options: ImageTransform, imageConfig: AstroConfig['image']): SrcSetValue[] | Promise;`
+
+这个钩子函数会生成指定图像的多个变体，例如，在 `![]()
` 或 `` 的 `source` 上生成 `srcset` 属性。
+
+该钩子函数返回一个包含以下属性的对象数组：
+
+```ts
+export type SrcSetValue = {
+ transform: ImageTransform;
+ descriptor?: string;
+ attributes?: Record;
+};
+```
+
### `validateOptions()`
**本地和外部服务可选**
@@ -214,7 +237,7 @@ export type ImageTransform = {
该钩子允许你验证和增强用户传递的选项。对于设置默认选项或告诉用户参数必传来说，这非常有用。
-[查看 Astro 内置服务中如何使用 `validateOptions()`](https://github.com/withastro/astro/blob/af4bd5e79c0bd662d58aeb016a61950e176b0a26/packages/astro/src/assets/services/service.ts#L106) 。
+[查看 Astro 的内置服务中是如何使用 `validateOptions()` 的](https://github.com/withastro/astro/blob/0ab6bad7dffd413c975ab00e545f8bc150f6a92f/packages/astro/src/assets/services/service.ts#L124) 。
## 用户配置
` 标签上生成一个 `srcset` 属性。在使用此值时，请不要提供 `widths` 的值。
+
+与原始图像相同或大于原始图像宽度的像素密度会被忽略，以避免放大图像。
+
+```astro
+---
+import { Image } from 'astro:assets';
+import myImage from "../assets/my_image.png";
+---
+