From 105686247e0c2653a01e5fe095972246e2165d41 Mon Sep 17 00:00:00 2001 From: AaronLamz Date: Wed, 2 Aug 2023 18:36:02 +0800 Subject: [PATCH 01/24] i18n(zh-cn): Update /guides/client-side-scripts.mdx (#4018) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update note * Update src/content/docs/zh-cn/guides/client-side-scripts.mdx Co-authored-by: 李瑞丰 * update --------- Co-authored-by: 林嘉俊 Co-authored-by: 李瑞丰 --- .../docs/zh-cn/guides/client-side-scripts.mdx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/docs/zh-cn/guides/client-side-scripts.mdx b/src/content/docs/zh-cn/guides/client-side-scripts.mdx index 2394a05bd5e6b..53382a6d2a352 100644 --- a/src/content/docs/zh-cn/guides/client-side-scripts.mdx +++ b/src/content/docs/zh-cn/guides/client-side-scripts.mdx @@ -43,23 +43,23 @@ description: 如何使用浏览器 JavaScript API 将客户端交互界面添加 ``` -### 脚本捆绑 +### 脚本打包 Astro 默认处理 ` ``` -如果不想要捆绑脚本，你可以使用 `is:inline` 指令。 +如果不想要打包脚本，你可以使用 `is:inline` 指令。 ```astro title="src/components/InlineScript.astro" "is:inline" + + +``` + +类似地，在 Astro 中，你可以在页面的模板中添加一个 ` +``` + +#### 全局样式 + +Astro 的 ` +``` + + + +#### 预处理器支持 + +将它们作为开发依赖项安装，[Astro 支持最流行的 CSS 预处理器](/zh-cn/guides/styling/#css-预处理器) 。例如，要使用SCSS： + +```shell +npm install -D sass +``` + +之后，你就可以在Vue组件中使用 `.scss` 或 `.sass` 样式，无需进行修改。 + +```astro title="src/layouts/Layout.astro" +

Hello, world

+ +``` + +有关 Astro 中的样式设置的更多信息，请参阅 [样式指南](/zh-cn/guides/styling/)。 + +### Nuxt 图片插件迁移到 Astro + +:::note +Astro v3.0 将包括一个全新的 `astro:assets` 模块，并将废弃现有的 `@astrojs/image` 集成。 + +目前通过实验性标志可以访问 `astro:assets` ，这也是开始新 Astro 项目的推荐方式。如果你需要迁移到 Astro v3.0之前的版本，我们建议 [启用实验性标志来使用资源](/zh-cn/guides/assets/) 作为图像的解决方案。 +::: + +将任何 [Nuxt `` 或 `` 组件](https://image.nuxtjs.org/components/nuxt-img) 转换为 [Astro 的图像集成组件](/zh-cn/guides/images/#astro-的图片集成)，或者转换为标准的 HTML `` 标签。 + +请查看 Astro 的 `` 和 `` 组件的 [完整属性列表](/zh-cn/guides/integrations-guide/image/#usage)，并且注意其中几个属性与 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'; +--- +The Astro Logo +A rocketship in space. +``` + +在你的 Astro 应用中的 Vue (`.vue`) 组件中，使用标准的 JSX 图像语法 (``)。Astro 不会对这些图像进行优化，但你可以安装和使用 NPM 包以获得更大的灵活性。 + +你可以在 [图像在 Astro 中的使用指南](/zh-cn/guides/images/) 中了解更多信息。 + +## 指导示例：请查看以下步骤： + +这里有一个将 Nuxt 的 Pokémon 数据获取转换为 Astro 的示例。 + +`pages/index.vue` 使用 [the REST PokéAPI](https://pokeapi.co/) 获取并显示前 151 个 Pokémon 的列表。 + +在 `src/pages/index.astro` 中，你可以使用 `fetch()` 取代 `asyncData()` 来重新创建这个功能。 + +1. 识别 Vue SFC（单文件组件）中的 `