withastro · yanthomasdev · Oct 15, 2023 · Oct 14, 2023 · Oct 14, 2023 · Oct 14, 2023
diff --git 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/) 页面上, 点击 <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`
@@ -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
@@ -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 功能不包括 `<Picture />` 组件。
-
-相反，你可以 [使用 `getImage()` 生成图像或自定义组件](#使用-getimage-生成图像)，这些组件使用 HTML 图像属性 `srcset` 和 `sizes` 或 `<picture>` 标签进行 [艺术指导或创建响应式图像](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
+
+<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) 输出。
@@ -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.jpg"
+    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>` 标签，完全控制其最终输出。这些图像不会被处理和优化。
@@ -255,7 +396,7 @@ interface ImageMetadata {
 
 ### 选择 `<Image />` 还是 `<img>`
 
-`<Image />` 组件会优化图像，并根据原始宽高比推断宽度和高度（对于本地图像），以避免 CLS。但是，它只适用于某些格式，并且不提供 `<picture>` 元素，也不支持 `srcset`。
+`<Image />` 组件会优化图像，并根据原始宽高比推断宽度和高度（对于本地图像），以避免 CLS。
 
 当你不能使用 `<Image />` 组件时，请使用 HTML `<img>` 元素，例如：
   - 不支持的图像格式
@@ -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. 移除任何现有的 `<Picture />` 组件。
-
-    目前，内置的 assets 功能不包括 `<Picture />` 组件。
-
-    相反，你可以使用 HTML 图像属性 `srcset` 和 `sizes` 或 `<picture>` 标签进行艺术指导或创建响应式图像。
-
-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
@@ -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()`属性非常有用。
 

diff --git 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`。这个命令启动开发服务器，并在浏览器中为你提供一个实时更新的网站预览，以便你在工作时查看。
 
 <PackageManagerTabs>
   <Fragment slot="npm">
@@ -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` 命令，或者运行它们的脚本，而不带任何标志。当你想要自定义命令的行为时，可以向命令添加标志。例如，你可能希望在不同的端口上启动开发服务器，或者使用详细日志构建站点以进行调试。
 
 <PackageManagerTabs>
   <Fragment slot="npm">
@@ -142,7 +142,7 @@ Global Flags
 运行 Astro 的开发服务器。这是一个不打包资源的本地 HTTP 服务器。当你在编辑器中保存更改时，它使用热模块替换 (HMR) 来更新你的浏览器。
 <h3>标志</h3>
 
-使用这些标志来自定义 Astro 开发服务器的行为。 对于与其他 Astro 命令共享的标志，请参阅下面的[通用标志](#通用标志)。
+使用这些标志来自定义 Astro 开发服务器的行为。对于与其他 Astro 命令共享的标志，请参阅下面的[通用标志](#通用标志)。
 
 #### `--port <number>`
 
@@ -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`。
 
 可以与下面文档的[通用标志](#通用标志)结合使用。
 
@@ -282,15 +281,23 @@ astro --root myRootFolder/myProjectFolder dev
 astro --config config/astro.config.mjs dev
 ```
 
+### `--outDir <path>`
+
+<Since v="3.3.0" />
+
+Configures the [`outDir`](/zh-cn/reference/configuration-reference/#outdir) for your project. Passing this flag will override the `outDir` value in your `astro.config.mjs` file, if one exists.
+
+为你的项目配置[`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`
 
@@ -361,7 +368,7 @@ interface AstroInlineConfig extends AstroUserConfig {
 **默认值：** 当运行 `astro dev` 时为 `"development"` , 当运行 `astro build` 时为 `"production"`
 </p>
 
-构建你的网站以生成 “development” 或 “production” 代码时使用的模式。
+构建你的网站以生成“development”或“production”代码时使用的模式。
 
 #### `logLevel`