Skip to content
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/core-concepts/astro-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ const { title } = Astro.props

插槽可以传递给其他组件。例如,在创建嵌套布局时:

```astro title="src/layouts/BaseLayout.astro" {11,14}
```astro title="src/layouts/BaseLayout.astro" {10,13}
---
---

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/zh-cn/core-concepts/astro-syntax.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ i18nReady: true

**如果你了解 HTML,那么你已经有能力编写第一个 Astro 组件了。**

Astro 组件语法是 HTML 的超集。这个语法[设计用来让任何有编写 HTML 或 JSX 经验的人感到熟悉](#astro-和-jsx-间的差异) ,并增加了对组件和 JavaScript 表达式的支持。
Astro 组件语法是 HTML 的超集。这个语法[旨在让任何有编写 HTML 或 JSX 经验的人都感到熟悉](#astro-和-jsx-间的差异) ,并增加了对组件和 JavaScript 表达式的支持。

## 类 JSX 表达式

Expand All @@ -16,7 +16,7 @@ Astro 组件语法是 HTML 的超集。这个语法[设计用来让任何有编

使用这种方法,你可以在 frontmatter 里设置计算的**动态**值。但是一旦设置完,这些值就不是**响应式**的了,也永远不会改变。Astro 组件是在渲染阶段中只运行一次的模板。

请参阅下面的更多例子[Astro 和 JSX 之间的差异](#astro-和-jsx-间的差异)。
请参阅下面的更多例子 [Astro 和 JSX 之间的差异](#astro-和-jsx-间的差异)。
:::

### 变量
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ import MySvelteButton from '../components/MySvelteButton.svelte';
这使得你可以用喜欢的 JavaScript 框架中建立整个应用,并通过在 Astro 页面中使用父组件来渲染它们。

:::note
即使 Astro 组件包括激活框架组件,它也会被渲染成静态 HTML。这意味着,你只能传递不做任何 HTML 渲染的参数。在 Astro 组件中向框架组件传递 React 的“渲染参数”是行不通的,因为 Astro 组件无法提供该模式所需要的客户端运行时行为。所以它选择使用命名插槽
即使 Astro 组件包括激活框架组件,它也会被渲染成静态 HTML。这意味着,你只能传递不做任何 HTML 渲染的参数。在 Astro 组件中向框架组件传递 React 的“渲染参数”是行不通的,因为 Astro 组件无法提供该模式所需要的客户端运行时行为。所以请改用命名插槽
:::

## 我可以在我的框架组件中使用 Astro 组件吗?
Expand All @@ -223,7 +223,3 @@ import MyAstroComponent from '../components/MyAstroComponent.astro';
[Astro 组件](/zh-cn/core-concepts/astro-components/)是纯 HTML 的模板组件,没有客户端运行时。但是,你可以在 Astro 组件模板中使用 `<script>` 标签,向浏览器发送在全局范围内执行的 JavaScript。

📚 了解更多关于 [Astro 组件中的客户端 `<script>`](/zh-cn/guides/client-side-scripts/) 的信息

[mdn-io]: https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
[mdn-ric]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback
[mdn-mm]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia
4 changes: 2 additions & 2 deletions src/content/docs/zh-cn/core-concepts/sharing-state.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ b)你想要在 Svelte 和其他 UI 框架如 Preact 或者 Vue 之间进行通

<LoopingVideo sources={[{ src: '/videos/stores-example.mp4', type: 'video/mp4' }]} />

_[**在你的机器上尝试完整的例子**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) 或者通过 Stackblitz 在线尝试!_
_[**在你的机器上尝试完整的例子**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) 或者通过 StackBlitz 在线尝试!_

你基础的 Astro 文件看起来应该是这样的:

Expand Down Expand Up @@ -825,4 +825,4 @@ customElements.define('cart-flyout', CartFlyoutLit);

现在,你应该拥有了一个完全交互式的电商示例,并且是宇宙中最小的 JS 包 🚀

[**在你的机器上尝试完整的例子**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) 或者通过 Stackblitz 在线尝试!
[**在你的机器上尝试完整的例子**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) 或者通过 StackBlitz 在线尝试!
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/guides/cms/caisy.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const post = gqlResponse?.allBlogArticle?.edges?.[0]?.node;

## 官方资源

- 查看 [GitHub](https://github.com/caisy-io/caisy-example-astro) 或 [Stackblitz](https://stackblitz.com/github/caisy-io/caisy-example-astro?file=src%2Fpages%2Fblog%2F%5B...slug%5D.astro) 上的 Caissy + Astro 示例。
- 查看 [GitHub](https://github.com/caisy-io/caisy-example-astro) 或 [StackBlitz](https://stackblitz.com/github/caisy-io/caisy-example-astro?file=src%2Fpages%2Fblog%2F%5B...slug%5D.astro) 上的 Caissy + Astro 示例。
- 在[草稿模式](https://caisy.io/developer/docs/external-api/localization-and-preview#preview-mode-15)和多个[区域设置](https://caisy.io/developer/docs/external-api/localization-and-preview#localization-in-a-graphql-query-8)中查询文档。
- 使用[分页](https://caisy.io/developer/docs/external-api/queries-pagination)可以查询大量文档。
- 在查询中使用[筛选](https://caisy.io/developer/docs/external-api/external-filter-and-sorting)并对结果进行[排序](https://caisy.io/developer/docs/external-api/external-filter-and-sorting#sorting-8)。
4 changes: 2 additions & 2 deletions src/content/docs/zh-cn/guides/cms/kontent-ai.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const deliveryClient = createDeliveryClient({
});
```

:::note[备注]
:::note
请阅读更多有关 [在 Astro 中获取环境变量](/zh-cn/guides/environment-variables/#获取环境变量) 的内容。
:::

Expand Down Expand Up @@ -192,7 +192,7 @@ const blogPosts = await deliveryClient

接下来,你将从你的内容模型中生成 TypeScript 类型。

:::note[备注]
:::note
这一步是可选的,但它可以提供更好的开发者体验,并允许你在构建时发现潜在问题,而不是在运行时。
:::

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/guides/deploy.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: 如何在互联网上部署你的 Astro 站点
import DeployGuidesNav from '~/components/DeployGuidesNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

**准备好构建并部署你的 Astro 站点了吗?** 跟着任一部署服务指南走,或向下滚动查看关于部署 Astro 网站的普适性指引
**准备好构建并部署你的 Astro 站点了吗?** 按照我们的指南之一来了解不同的部署服务,或者向下滚动以获取有关部署 Astro 站点的一般指南

<DeployGuidesNav />

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/zh-cn/guides/deploy/github.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: 如何使用 GitHub Pages 将你的 Astro 网站部署到网络上
type: deploy
---

您可以使用 [GitHub Pages](https://pages.github.com/) 直接从 [GitHub](https://github.com/) 上的存储库托管 Astro 网站。
你可以使用 [GitHub Pages](https://pages.github.com/) 直接从 [GitHub](https://github.com/) 上的存储库托管 Astro 网站。

## 如何部署

Expand Down Expand Up @@ -101,7 +101,7 @@ Astro 维护了一个官方的 GitHub Action `withastro/action` 来帮助你部

5. 提交(commit)这个新的“工作流程文件”(workflow file)并将其推送到 GitHub。

您的网站现在应该已完成发布了!当你将更改推送到 Astro 项目的存储库时,GitHub Action 将自动为你部署它们。
你的网站现在应该已完成发布了!当你将更改推送到 Astro 项目的存储库时,GitHub Action 将自动为你部署它们。

:::tip[设置一个自定义域]
你可以选择通过将一个 `./public/CNAME` 文件添加到你的项目中,来设置自定义域:
Expand Down
1 change: 0 additions & 1 deletion src/content/docs/zh-cn/guides/imports.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,6 @@ const data = JSON.parse(json);
<span>Version: {data.version}</span>
```


## 扩展文件类型支持

使用 **Vite** 和兼容的 **Rollup** 插件,你可以导入 Astro 原生不支持的文件类型。在 Vite 文档的[查找插件](https://cn.vitejs.dev/guide/using-plugins.html#finding-plugins) 部分了解你需要的插件。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,8 @@ import MyReactButton from '../components/MyReactButton.jsx';
</MyReactSidebar>
```


在将你的 CRA 重构为 Astro 项目之前,了解 [Astro 群岛](/zh-cn/concepts/islands/) 和 [Astro 组件](/zh-cn/core-concepts/astro-components/) 可能会对你有所帮助。


### 比较:JSX 与 Astro

比较一下如下的 CRA 组件和相对应的 Astro 组件:
Expand Down Expand Up @@ -256,7 +254,6 @@ export default Component;
</Fragment>
</AstroJSXTabs>


### 将 JSX 文件转换为 `.astro` 文件

下面是将 CRA(Create React App)的 `.js` 组件转换为 `.astro` 组件的一些建议:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -568,6 +568,6 @@ export const pageQuery = graphql`

- 博客帖子:[我如何将我的网站从 Gatsby 迁移到 Astro](https://dev.to/flashblaze/migrating-my-website-from-gatsby-to-astro-2ej5)。

:::note[有资源分享吗?]
:::note[你有资源分享吗?]
如果你找到(或制作)了一个关于将 Gatsby 网站转换为 Astro 的有用的视频或博客文章,[编辑此页面](https://github.com/withastro/docs/blob/main/src/pages/zh-cn/guides/migrate-to-astro/from-gatsby.md)并将其添加到这里!
:::
Original file line number Diff line number Diff line change
Expand Up @@ -671,3 +671,4 @@ import rocket from '../assets/rocket.png';
## 社区资源

- 博文:[从 Nuxt 到 Astro - 使用 Astro 进行重构](https://dev.to/lindsaykwardell/from-nuxt-to-astro-rebuilding-with-astro-5ann)
- 博文:[Nuxt 2 到 Astro 3 平台重构 – 从设置到生产](https://stevenwoodson.com/blog/replatforming-from-nuxtjs-2-to-astro/)
3 changes: 1 addition & 2 deletions src/content/docs/zh-cn/guides/testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ i18nReady: false
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


测试可以帮助你编写和维护工作的 Astro 代码。Astro 支持许多流行的单元测试、组件测试和端到端测试工具,包括 Jest、 Mocha、 Jasmine、 Cypress 和 Playwright。你甚至可以安装特定于框架的测试库,例如 React Test Library,以测试你的 UI 框架组件。

测试框架允许你声明关于代码在特定情况下应该如何行为的 **断言(assertions)** 或 **期望(expectations)**,然后将这些断言或期望与当前代码的实际行为进行比较。
Expand Down Expand Up @@ -124,7 +123,7 @@ npx cypress open

在Cypress App 启动后,选择 **E2E Testing**,然后选择要用于运行测试的浏览器。

当测试运行完成时,如果你在在输出中看到一个绿色的勾,这证明你的测试通过了:
当测试运行完成时,如果你在输出中看到一个绿色的勾,这证明你的测试通过了:

```shell title="npx cypress run 的输出"
Running: index.cy.js (1 of 1)
Expand Down
1 change: 0 additions & 1 deletion src/content/docs/zh-cn/guides/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,6 @@ const { href, ...attrs } = Astro.props;

```ts
// src/custom-attributes.d.ts

declare namespace astroHTML.JSX {
interface HTMLAttributes {
'data-count'?: number;
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/tutorial/1-setup/1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ v18.14.1
### 小测试

下面哪个是……
1. 代码编辑器,可用于修改文件内容
1. 用于修改文件内容的代码编辑器

<MultipleChoice>
<Option>
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/zh-cn/tutorial/1-setup/5.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
打开一个终端,运行 `create astro`,然后访问我的 Netlify URL。
</Option>
<Option>
更改了我的 Netlify 应用程序中的设置,然后在 StackBlitz 上创建了一个新的 Astro 项目。
更改我的 Netlify 应用程序中的设置,然后在 StackBlitz 上创建一个新的 Astro 项目。
</Option>
<Option isCorrect>
对 `index.astro` 进行了编辑。将更改提交并推送到 GitHub。Netlify 将处理剩下的事情!
对 `index.astro` 进行编辑。将更改提交并推送到 GitHub。Netlify 将处理剩下的事情!
</Option>
</MultipleChoice>
</Box>
Expand Down
3 changes: 1 addition & 2 deletions src/content/docs/zh-cn/tutorial/1-setup/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@ description: >-

准备好开发环境,然后创建并部署你的第一个 Astro 网站
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';

现在你已经知道你要搭建什么了,是时候来设置你所需的所有工具!

本单元将向你展示如何设置开发环境并部署网站到 Netlify。如果你已经熟悉自己的环境和工作流程,可以直接跳到[第二单元](/zh-cn/tutorial/2-pages/)。

:::tip[使用 Stackblitz]
:::tip[使用 StackBlitz]

想要在在线代码编辑器中完成这个教程吗?
<details>
Expand Down
1 change: 0 additions & 1 deletion src/content/docs/zh-cn/tutorial/2-pages/1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ description: |-
向你的网站添加新的页面,并在它们之间建立导航链接
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/tutorial/3-components/3.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';

由于你的网站将在不同的设备上进行浏览,是时候创建一个能够适应多个屏幕尺寸的页面导航吧
由于你的网站将在不同的设备上进行浏览,是时候创建一个能够适应多个屏幕尺寸的页面导航了

<PreCheck>
- 为你的网站创建一个包含导航组件的 Header
Expand Down
2 changes: 0 additions & 2 deletions src/content/docs/zh-cn/tutorial/3-components/4.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ description: >-
教程:搭建你的 Astro 博客 -
使用 Astro 脚本标签为移动导航添加客户端交互性
---
import Badge from '~/components/Badge.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/tutorial/4-layouts/2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';

现在你已经为页面创建了布局,是时候为博客文章也添加一个布局
现在你已经为页面创建了布局,是时候为博客文章也添加一个布局了

<PreCheck>
- 为你的 Markdown 文件创建一个新的博客文章布局
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/zh-cn/tutorial/5-astro-api/4.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Astro 提供了一个可自定义包,用于快速为你的网站添加一个 R

这个官方包会生成一个非 HTML 文档,其中包含有关你的所有博客文章的信息,可以被 Feedly、The Old Reader 等 **订阅源阅读器(Feed Reader)** 读取。每次重新构建你的网站时,该文档都会更新。

个人用户可以通过订阅源阅读器订阅你的订阅源,在你的网站上发布新博客文章时会收到通知,这使它成为一个受欢迎的博客功能。
个人用户可以通过在订阅源阅读器中订阅你的订阅源,在你的网站上发布新博客文章时会收到通知,这使它成为一个受欢迎的博客功能。

1. 退出 Astro 开发服务器,并在终端中运行以下命令以安装 Astro 的 RSS 包。

Expand Down Expand Up @@ -63,7 +63,7 @@ Astro 提供了一个可自定义包,用于快速为你的网站添加一个 R
</Fragment>
</PackageManagerTabs>

## 创建一个 `.xml` 订阅源文档
## 创建一个 `.xml` 订阅源文件

1. 在 `src/pages/` 目录下创建一个名为 `rss.xml.js` 的新文件。

Expand Down