Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(zh-cn): Translate images.mdx #4314

Merged
merged 19 commits into from
Aug 25, 2023
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
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
701 changes: 701 additions & 0 deletions src/content/docs/zh-cn/guides/images.mdx

Large diffs are not rendered by default.

32 changes: 11 additions & 21 deletions src/content/docs/zh-cn/guides/migrate-to-astro/from-gatsby.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,6 @@ Gatsby 和 Astro 共享一些相似性,这将帮助你迁移你的项目:

- **@astrojs/react**:在你的新 Astro 站点中重用一些现有的 React UI 组件,或者继续使用 React 组件。

- **@astrojs/image**:用 Astro 自己的图像优化组件替换 Gatsby 的 Image 插件。(实验性的:仅在 `.astro` 和 `.mdx` 文件中工作。)

- **@astrojs/mdx**:从你的 Gatsby 项目中带来现有的 MDX 文件,或者在你的新 Astro 站点中使用 MDX。

### 将你的代码放在 `src` 中
Expand Down Expand Up @@ -320,41 +318,33 @@ Gatsby 中使用 `gatsby-browser.js` 中的 CSS 导入实现全局样式。在 A

### Gatsby 图像插件转换为 Astro

:::note
Astro v3.0 将包含一个新的 `astro:assets` 模块,并将弃用现有的 `@astrojs/image` 集成。

目前已经可以通过实验性标志访问 `astro:assets`,并且这是开始新 Astro 项目的推荐方式。如果你正在迁移到 Astro pre-v3.0,我们建议[启用实验标志来使用资产](/zh-cn/guides/images/)作为图像解决方案。
:::

将 Gatsby 的 `<StaticImage />` 和 `<GatsbyImage />` 组件与 [Astro 自己的图像集成组件](/zh-cn/guides/images/) 或适当的标准 HTML `<img>` / JSX `<img />` 标签相互转换。
根据情况在你的 React 组件中将 Gatsby 的 `<StaticImage />` 和 `<GatsbyImage />` 组件转换为 [Astro 自己的图像集成组件](/zh-cn/guides/images/#image--astroassets) 或者转化成 [标准的 HTML `<img>` / JSX `<img />` 标签](/zh-cn/guides/images/#框架组件中的图像)。

```astro title="src/pages/index.astro"
---
import { Image } from '@astrojs/image/components';
import localImage from "../images/brand/logo.png";
import rocket from '../images/rocket.svg';
import { Image } from 'astro:assets';
import rocket from '../assets/rocket.png';
---
<Image src={localImage} alt="The Astro Logo" />
<img src={rocket} alt="A rocketship in space.">
<Image src={rocket} alt="太空中的火箭飞船。" />
<img src={rocket.src} alt="太空中的火箭飞船。">
```

Astro 的 `<Image />` 和 `<Picture />` 组件是实验性的,并且目前只在 `.astro` 和 `.mdx` 文件中工作。查看这些组件可用的[完整组件属性列表](/zh-cn/guides/images/),并注意其中几个会与 Gatsby 的属性不同
Astro 的 `<Image />` 组件只能在 `.astro` 和 `.mdx` 文件中工作。查看该组件可用的[完整组件属性列表](/zh-cn/guides/images/#属性),并注意它与 Gatsby 的属性有一些不同

要继续在 Markdown(`.md`)文件中使用标准 Markdown 语法(`![]()`)使用本地图像,请将图像移动到你的 `public/` 文件夹中。你可能需要更新链接到相对 URL。你也可以在这些文件中使用标准的 `<img>` 标签。注意这些 [在 `public/` 中的图像不会被 Astro 优化](/zh-cn/guides/images/)
要继续使用标准 Markdown 语法 (`![]()`) [在 Markdown (`.md`) 文件中使用图像](/zh-cn/guides/images/#markdown-文件中的图像),你可能需要更新链接。 对于本地图像,不支持在 `.md` 文件中直接使用 HTML `<img>` 标签,必须转换为 Markdown 语法
liruifengv marked this conversation as resolved.
Show resolved Hide resolved

```md
<!-- src/pages/post-1.md -->

# My Markdown Page
# 我的 Markdown 页面

<!-- Local image stored at public/assets/stars.png -->
![A starry night sky.](/assets/stars.png)
<img src="/assets/stars.png" alt="A starry night sky.">
<!-- 存储在 src/assets/stars.png 的本地图片 -->
![A starry night sky.](../assets/stars.png)
```

在 React(`.jsx`)组件中,使用标准的 JSX 图像语法(`<img />`)。Astro 不会优化这些图像,但你可以安装和使用 NPM 包以获得更大的灵活性。

你可以在 Images Guide 中了解更多关于 [在 Astro 中使用图像](/zh-cn/guides/images/) 的信息。
你可以在图像指南中了解更多关于 [在 Astro 中使用图像](/zh-cn/guides/images/) 的信息。

### Gatsby GraphQL 转换为 Astro

Expand Down
25 changes: 8 additions & 17 deletions src/content/docs/zh-cn/guides/migrate-to-astro/from-nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,6 @@ Next.js 和 Astro 有一些相似之处,可以帮助你迁移你的项目:

- **@astrojs/react**:在你的新 Astro 网站上重用一些现有的 React UI 组件,或者继续用 React 组件来编写。

- **@astrojs/image**:用 Astro 自己的图片优化组件来替代 Next 的 Image。(实验:只适用于`.astro`和`.mdx`文件)。

- **@astrojs/mdx**:将现有的 Next 项目中的 MDX 文件导入,或在新的 Astro 站点中使用 MDX。

### 将源码放在`src`目录内
Expand Down Expand Up @@ -418,31 +416,24 @@ const randomUser = data.results[0];
查看更多关于 [在 Astro 中设计样式](/zh-cn/guides/styling/) 的信息。

### 转换 Next 的 图像插件到 Astro

:::note
Astro v3.0 将包括一个新的 `astro:assets` 模块,并将弃用现有的 `@astrojs/image` 集成。

访问 `astro:assets` 目前可以在实验标志下使用,并且是开始新 Astro 项目的推荐方式。如果你要迁移到 Astro pre-v3.0,我们建议你 [启用实验标志以使用 assets](/zh-cn/guides/images/) 作为图像解决方案。
:::

用[ Astro 自己的图片集成组件](/zh-cn/guides/images/),或用标准的HTML`<img>`来转换任何Next`<Image />`组件。请看[组件属性的完整列表](/zh-cn/guides/images/),可用于Astro的`<Image />`和`<Picture />`组件,注意有几个属性和Next不同。

根据情况在你的 React 组件中将任何 Next 的 `<Image />` 组件转换为 [Astro 自己的图像集成组件](/zh-cn/guides/images/#image--astroassets) 或者转化成 [标准的 HTML `<img>` / JSX `<img />` 标签](/zh-cn/guides/images/#框架组件中的图像)。

Astro 的 `<Image />` 组件只能在 `.astro` 和 `.mdx` 文件中工作。查看该组件可用的[完整组件属性列表](/zh-cn/guides/images/#属性),并注意它与 Next 的属性有一些不同。

```astro title="src/pages/index.astro"
---
import { Image } from '@astrojs/image/components';
import localImage from "../images/brand/logo.png";
import rocket from '../images/rocket.svg';
import { Image } from 'astro:assets';
import rocket from '../assets/rocket.png';
---
<Image src={localImage} alt="The Astro Logo" />
<img src={rocket} alt="A rocketship in space.">
<Image src={rocket} alt="太空中的火箭飞船。" />
<img src={rocket.src} alt="太空中的火箭飞船。">
```

在React(`.jsx`)组件中,使用标准的JSX的图片语法(`<img />`)。Astro不会优化这些图片,但你也可以安装和使用NPM包以提升灵活性。

你可以在图像指南中了解更多关于[在Astro中使用图像](/zh-cn/guides/images/)的信息。



## 示例: 数据请求

下面是一个Next.js Pokédex数据获取转换为Astro的例子。
Expand Down
23 changes: 7 additions & 16 deletions src/content/docs/zh-cn/guides/migrate-to-astro/from-nuxtjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,6 @@ Nuxt 和 Astro 有一些相似之处,这些相似性能够帮助你完成迁

- **@astrojs/vue**:你可以在新的 Astro 网站中重用一些现有的 Vue UI 组件,或者继续使用 Vue 组件编写。

- **@astrojs/image**:用 Astro 自己的图像优化组件来替代 Nuxt 的图像插件。

- **@astrojs/mdx**:从你的 Nuxt 项目将现有的 MDX 文件带入,或者在新的 Astro 网站中使用 MDX。

### 将你的源码放入 `src` 中
Expand Down Expand Up @@ -489,29 +487,22 @@ p {

### Nuxt 图片插件迁移到 Astro

:::note
Astro v3.0 将包括一个全新的 `astro:assets` 模块,并将废弃现有的 `@astrojs/image` 集成。

目前通过实验性标志可以访问 `astro:assets` ,这也是开始新 Astro 项目的推荐方式。如果你需要迁移到 Astro v3.0之前的版本,我们建议 [启用实验性标志来使用资源](/zh-cn/guides/images/) 作为图像的解决方案。
:::

将任何 [Nuxt `<nuxt-img/>` 或 `<nuxt-picture/>` 组件](https://image.nuxtjs.org/components/nuxt-img) 转换为 [Astro 的图像集成组件](/zh-cn/guides/images/),或者转换为标准的 HTML `<img>` 标签。
根据情况在你的 Vue 组件中将任何 [Nuxt 的`<nuxt-img/>` 或者 `<nuxt-picture/>` 组件](https://image.nuxtjs.org/components/nuxt-img) 转换为 [Astro 自己的图像集成组件](/zh-cn/guides/images/#image--astroassets) 或者转化成 [标准的 HTML `<img>` 标签](/zh-cn/guides/images/#框架组件中的图像) 或者 `<picture>` 标签。

请查看 Astro 的 `<Image />` 和 `<Picture />` 组件的 [完整属性列表](/zh-cn/guides/images/),并且注意其中几个属性与 Nuxt 的属性有所不同
Astro 的 `<Image />` 组件只能在 `.astro` 和 `.mdx` 文件中工作。查看该组件可用的[完整组件属性列表](/zh-cn/guides/images/#属性),并注意它与 Nuxt 的属性有一些不同

```astro title="src/pages/index.astro"
---
import { Image } from '@astrojs/image/components';
import localImage from "../images/brand/logo.png";
import rocket from '../images/rocket.svg';
import { Image } from 'astro:assets';
import rocket from '../assets/rocket.png';
---
<Image src={localImage} alt="The Astro Logo" />
<img src={rocket} alt="A rocketship in space.">
<Image src={rocket} alt="太空中的火箭飞船。" />
<img src={rocket.src} alt="太空中的火箭飞船。">
```

在你的 Astro 应用中的 Vue (`.vue`) 组件中,使用标准的 JSX 图像语法 (`<img />`)。Astro 不会对这些图像进行优化,但你可以安装和使用 NPM 包以获得更大的灵活性。

你可以在 [图像在 Astro 中的使用指南](/zh-cn/guides/images/) 中了解更多信息
你可以在图像指南中了解更多关于 [在 Astro 中使用图像](/zh-cn/guides/images/) 的信息

## 指导示例:请查看以下步骤:

Expand Down
8 changes: 8 additions & 0 deletions src/content/docs/zh-cn/reference/configuration-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -646,6 +646,14 @@ export default defineConfig({
}
```

### image.domains

占位

### image.remotePatterns

占位

### image.domains(实验性)

<p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@ const optimizedImage = await getImage({src: myImage, width: 300, height: 300});

**另请参阅:**

- [资源(实验性)](/zh-cn/guides/images/)
- [图像](/zh-cn/guides/images/)
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/reference/errors/expected-image.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@ import myImage from "../assets/my_image.png";

**另请参阅:**

- [资源(实验性)](/zh-cn/guides/images/)
- [图像](/zh-cn/guides/images/)
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,7 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/

**请参阅:**

- [资源(实验性)](/zh-cn/guides/images/)
- [图像](/zh-cn/guides/images/)
- [Image 组件](/zh-cn/guides/images/#image--astroassets)
- [Image 组件的 alt 属性](/zh-cn/guides/images/#alt-必须)

Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,4 @@ import myImage from "../my_image.png";

**请参阅:**

- [资源(实验性)](/zh-cn/guides/images/)
- [图像](/zh-cn/guides/images/)
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ Markdown 中的图像是相对于当前文件的。要引用与 `.md` 文件位

**请参见:**

- [资源(实验性)](/zh-cn/guides/images/)
- [图像](/zh-cn/guides/images/)
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,5 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/

**请参阅:**

- [资源(实验性)](/zh-cn/guides/images/)
- [图像](/zh-cn/guides/images/)

9 changes: 1 addition & 8 deletions src/content/docs/zh-cn/reference/image-service-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,7 @@ title: 图像服务 API
i18nReady: true
---

Astro [assets](/zh-cn/guides/images/) 旨在使任何图像优化服务都能轻松地在 Astro 上构建服务。

:::caution
图像服务 API 是 Astro v2.1 中引入的一个实验性功能。该 API 在标记为稳定之前可能会发生更改。
:::
`astro:assets` 旨在使任何图像优化服务都能轻松地在 Astro 上构建服务。

## 什么是图像服务?

Expand Down Expand Up @@ -228,9 +224,6 @@ export type ImageTransform = {
import { defineConfig } from "astro/config";

export default defineConfig({
experimental: {
assets: true,
},
image: {
service: {
entrypoint: "your-entrypoint", // 'astro/assets/services/squoosh' | 'astro/assets/services/sharp' | string,
Expand Down