From 96eb5949d01623a51ffb9f68d2dbe0fbd21cee9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=91=9E=E4=B8=B0?= Date: Tue, 29 Aug 2023 23:59:01 +0800 Subject: [PATCH] i18n(zh-cn): Update zh from upstream (#4393) --- src/content/docs/zh-cn/guides/images.mdx | 64 ++++++++++++------------ 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/src/content/docs/zh-cn/guides/images.mdx b/src/content/docs/zh-cn/guides/images.mdx index ab0a301dd9627..5648616903755 100644 --- a/src/content/docs/zh-cn/guides/images.mdx +++ b/src/content/docs/zh-cn/guides/images.mdx @@ -16,7 +16,7 @@ Astro 为你提供了多种在网站上使用图像的方法，无论它们是 你在 `src/` 中存储的本地图像可以被项目中的所有文件使用：`.astro`、`.md`、`.mdx`、`.mdoc` 和其他 UI 框架。图像可以存储在任何文件夹中，包括与你的内容一起。 -只有当你想要避免任何处理时，才将图像存储在 `public/` 文件夹中。 +如果你想要避免对图像做任何处理或者想要直接公开链接到图像，请将图像存储在 `public/` 文件夹中。 ### 远程图像 @@ -35,10 +35,10 @@ Astro 可以使用 API 远程获取数据，也可以显示来自其完整 URL ```astro title="src/pages/blog/MyImages.astro" --- import { Image } from 'astro:assets'; -import localBirdImage from ''../../images/subfolder/localBirdImage.png'; +import localBirdImage from '../../images/subfolder/localBirdImage.png'; --- 一只鸟坐在蛋窝上。 -A bird. +A bird. A bird. 一只鸟坐在蛋窝上。 @@ -84,7 +84,7 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 目前，内置的 assets 功能不包括 `` 组件。 -相反，你可以 [使用 `getImage()` 生成图像或自定义组件](/zh-cn/guides/images/#使用-getimage-生成图像)，这些组件使用 HTML 图像属性 `srcset` 和 `sizes` 或 `` 标签进行 [艺术指导或创建响应式图像](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)。 +相反，你可以 [使用 `getImage()` 生成图像或自定义组件](#使用-getimage-生成图像)，这些组件使用 HTML 图像属性 `srcset` 和 `sizes` 或 `` 标签进行 [艺术指导或创建响应式图像](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)。 #### 属性 @@ -99,7 +99,7 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 import { Image } from 'astro:assets'; import myImportedImage from `../assets/my-local-image.png` --- - descriptive text + descriptive text ``` - **`public/` 文件夹中的图像** - 使用图像相对于 `public` 文件夹的**文件路径**作为属性值： @@ -112,7 +112,8 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 src="/images/my-public-image.png" alt="descriptive text" width="200" - height="150" /> + height="150" + /> ``` - **远程图像** - 使用图像的**完整 URL**作为属性值： @@ -170,7 +171,7 @@ import myImage from "../assets/my_image.png"; ``` -```astro +```html ` 标签中使用。 -例如，使用图像自己的 `height` 和 `width` 属性作为默认值，以避免布局位移累计 CLS 并改善核心 Web 性能指标。 +例如，使用图像自己的 `height` 和 `width` 属性，以避免布局位移累计 CLS 并改善核心 Web 性能指标。 -```astro "myDog.src" +```astro "myDog.width" "myDog.height" --- // 导入本地图像 import myDog from `../../images/pets/local-dog.jpg` @@ -297,7 +298,7 @@ export default defineConfig({ ## Markdown 文件中的图像 -在 `.md` 文件中使用标准的 Markdown `![alt](src)` 语法。这个语法可以与 Astro 的 Image Services API 一起使用，来优化你的本地图像和授权的远程图像。 +在 `.md` 文件中使用标准的 Markdown `![alt](src)` 语法。这个语法可以与 Astro 的 [图像服务 API](/zh-cn/reference/image-service-reference/) 一起使用，来优化你的本地图像和授权的远程图像。 ```md @@ -346,7 +347,6 @@ import rocket from '../assets/rocket.png'; A starry night sky. ![A starry night sky.](/images/stars.png) - // 其它服务上的远程图像 @@ -420,8 +420,7 @@ const allBlogPosts = await getCollection("blog"); ```jsx title="src/components/ReactImage.jsx" import stars from "../assets/stars.png" -export default function ReactImgage () { - +export default function ReactImage () { return ( 繁星点点的夜空。 ) @@ -481,8 +480,8 @@ const optimizedBackground = await getImage({src: myBackground, format: 'avif'}) ```js { - options: {...} // 传递的原始参数， - src: "https//..." // 生成图像的路径， + options: {...} // 传递的原始参数 + src: "https//..." // 生成图像的路径 attributes: {...} // 渲染图像所需的附加 HTML 属性（宽度、高度、样式等） } ``` @@ -539,7 +538,7 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ experimental: { - assets: true + assets: true } }); ``` @@ -568,20 +567,21 @@ import rocket from '../../assets/rocket.png'; 如果你之前因为这些限制而避免使用 `astro:assets`，现在你可以在没有问题的情况下使用它们。你可以配置无操作图像服务来显式地选择这种行为： - ```astro - // astro.config.mjs - export default { - image: { - service: { - entrypoint: 'astro/assets/services/noop' - } - } - } - ``` + ```js title="astro.config.mjs" ins={4-8} + import { defineConfig } from 'astro/config'; + + export default defineConfig({ + image: { + service: { + entrypoint: 'astro/assets/services/noop' + } + } + }); + ``` ### 决定在哪里存储你的图像 -请参阅 [图像指南](/zh-cn/guides/images/#在哪里存储图像) 来帮助你决定在哪里存储你的图像。你可能希望利用 `astro:assets` 带来的灵活性，来存储你的图像的新选项。例如，现在可以使用标准的 Markdown `![alt](src)` 语法，在 Markdown、MDX 和 Markdoc 中引用项目 `src/` 中的相对图像。 +请参阅 [图像指南](#在哪里存储图像) 来帮助你决定在哪里存储你的图像。你可能希望利用 `astro:assets` 带来的灵活性，来存储你的图像的新选项。例如，现在可以使用标准的 Markdown `![alt](src)` 语法，在 Markdown、MDX 和 Markdoc 中引用项目 `src/` 中的相对图像。 ### 更新现有的 `` 标签 @@ -670,19 +670,17 @@ import rocket from '../images/rocket.svg'; /> ``` -3. 移除任何现有的 `` 组件 +3. 移除任何现有的 `` 组件。 目前，内置的 assets 功能不包括 `` 组件。 相反，你可以使用 HTML 图像属性 `srcset` 和 `sizes` 或 `` 标签进行艺术指导或创建响应式图像。 -4. 卸载 Sharp - - [Sharp](https://github.com/lovell/sharp) 现在是 `astro:assets` 的默认图像服务。你不再需要在你的项目中本地安装这个依赖。 +4. 选择一个默认图像服务。 - 使用你的包管理器卸载 Sharp，或者从你的 `package.json` 文件中手动删除。 + [Sharp](https://github.com/lovell/sharp) 现在是 `astro:assets` 的默认图像服务。如果你想使用 Sharp，无需任何配置。 - 如果你想使用 [Squoosh](https://github.com/GoogleChromeLabs/squoosh) 来转换你的图像，请使用以下配置更新你的配置： + 如果你想使用 [Squoosh](https://github.com/GoogleChromeLabs/squoosh) 来转换你的图像，请使用下面的 `image.service` 选项更新你的配置： ```js title="astro.config.mjs" ins={4-6} import { defineConfig, squooshImageService } from 'astro/config';