@modern-js/main-doc 2.0.2 → 2.1.0

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c01-start.md

@@ -1,37 +1,37 @@
 ---
-title: 创建项目
+title: Create Project
 ---
 
-从这一章节开始，我们将进入实战教程部分。在实战教程中，我们将会从环境准备开始，从简单到复杂，一步一步搭建一个真实的项目。
+Starting from this chapter, we will enter the practical tutorial section. In the practical tutorial, we will start with environment preparation, starting from simple to complex, building a real project step by step.
 
-## 环境准备
+## Environment preparation
 
-import Prerequisites from '@site-docs/components/prerequisites.md'
+import Prerequisites from '@site-docs-en/components/prerequisites.md'
 
 <Prerequisites />
 
-## 初始化项目
+## Initialization project
 
-我们创建新的目录，通过命令行工具初始化项目：
+We create a new directory and initialize the project via the command line tool:
 
 ```bash
 mkdir myapp && cd myapp
 npx @modern-js/create
 ```
 
-import InitApp from '@site-docs/components/init-app.md'
+import InitApp from '@site-docs-en/components/init-app.md'
 
 <InitApp />
 
-## 调试项目
+## Debug Project
 
-import DebugApp from '@site-docs/components/debug-app.md'
+import DebugApp from '@site-docs-en/components/debug-app.md'
 
 <DebugApp />
 
-## 修改代码
+## Modify the code
 
-我们将原本的示例代码删除，替换成一个简单的联系人列表：
+We delete the original sample code and replace it with a simple point of contact list:
 
 ```tsx title="src/routes/page.tsx"
 const getAvatar = (users: Array<{ name: string; email: string }>) =>
@@ -64,24 +64,24 @@ function App() {
 export default App;
 ```
 
-删除多余的 css 文件，保持目录没有多余的文件：
+Remove redundant css files and keep the directory free of redundant files:
 
 ```bash
 rm src/routes/index.css
 ```
 
-因为框架默认支持 [HMR](https://webpack.js.org/concepts/hot-module-replacement/)，可以看到 `http://localhost:8080/` 里的内容会自动更新为：
+Since the framework supports [HMR](https://webpack.js.org/concepts/hot-module-replacement/) by default, you can see that the content in http://localhost:8080/ is automatically updated to:
 
 ![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvt/ljhwZthlaukjlkulzlp/screenshot-20221214-141909.png)
 
-此刻的页面还没有样式。下一章节将展开这部分的内容。
+The page has no styles at the moment. The next chapter will expand on this section.
 
-## 开启 SSR
+## Enable SSR
 
-接下来，我们修改项目中的 `modern.config.ts`，开启 SSR 能力：
+Next, we modify the `modern.config.ts` in the project to enable the SSR capability:
 
 ```ts
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
+import appTools, { defineConfig } from '@modern-js/app-tools';
 
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
@@ -92,8 +92,8 @@ export default defineConfig({
   server: {
     ssr: true,
   },
-  plugins: [AppToolsPlugin()],
+  plugins: [appTools()],
 });
 ```
 
-重新执行 `pnpm run dev`，可以发现项目已经在服务端完成了页面渲染。
+Re-execute `pnpm run dev` to find that the project has completed page rendering at the server level.

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c02-component.md

@@ -1,24 +1,24 @@
 ---
-title: 编写 UI 组件
+title: Add UI Components
 ---
 
-上一章节中，我们学习了如何初始化项目，并使用配置修改 Modern.js 的默认行为。
+In the previous chapter, we learned how to initialize a project and use configuration to modify the default behavior of Modern.js.
 
-这一章节中，我们继续沿用上一章节的项目代码，继续完善联系人列表。
+In this chapter, we continue to use the project code of the previous chapter and continue to improve the point of contact list.
 
-为了做更好的 UI 展示和交互，我们引入组件库 [Antd](https://ant.design/index-cn) 来开发，使用 `<List>` 组件来代替原始的列表。先添加依赖：
+In order to do better UI display and interaction, we introduce the component library [Antd](https://ant.design/index-cn) to develop, and use the `<List>` component instead of the primitive list. Add dependency first:
 
 ```bash
 pnpm add antd
 ```
 
-修改 `src/routes/page.tsx`，在顶部导入组件：
+Modify `src/routes/page.tsx` to import components at the top:
 
 ```ts
 import { List } from 'antd';
 ```
 
-修改 `<App>` 组件的实现：
+Modify the implementation of the `<App>` component:
 
 ```tsx
 function App() {
@@ -41,16 +41,16 @@ function App() {
 }
 ```
 
-执行 `pnpm run dev`，查看运行结果：
+Execute `pnpm run dev` to see the running results:
 
 ![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c02-antd-result.png)
 
-可以看到 Ant Design 导出的组件，已经具备了完整的样式。
+You can see that the components exported by Ant Design already have complete styles.
 
-:::info 注
-Modern.js 会[自动按需导入 Ant Design 组件需要的 CSS](https://github.com/ant-design/babel-plugin-import)。
+:::info note
+Modern.js [Automatically import CSS required by Ant Design component on demand](https://github.com/ant-design/babel-plugin-import).
 :::
 
 :::note
-我们也可以使用其他组件库来实现同样的功能，例如 [Arco Design](https://arco.design/)。
+We can also use other component libraries to implement the same functionality, such as [Arco Design](https://arco.design/).
 :::

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c03-css.md

@@ -1,31 +1,31 @@
 ---
-title: 添加样式
+title: Add Style
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-上一章节中，我们学习了如何使用使用三方库中的组件。
+In the previous chapter, we learned how to use components from the three-way library.
 
-这一章节中，我们将学习如何实现 UI 组件。
+In this chapter, we will learn how to implement UI components.
 
-## 使用 CSS 写 JS 组件
+## JS components using CSS
 
-首先我们希望自己控制联系人头像的展示，实现这种设计稿：
+First of all, we want to control the display of contact avatars by ourselves, and implement this design draft:
 
 ![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c03-css-expect.jpg)
 
-假设没有现成的组件可以实现，那就需要自己写些 CSS 了，这里我们使用 [styled-components](https://styled-components.com/)，来实现类似的需求。Modern.js 开箱即用的支持 styled-components，既不需要安装依赖，也不需要做任何配置。
+Hypothesis has no ready-made components to implement, so you need to write some CSS yourself. Here we use [styled-components] (https://styled-components.com/) to implement similar requirements. Modern.js out of the box supports styled-components, which requires neither dependency nor configuration.
 
-styled-components 通过模块化的方式，避免了传统 CSS 写法上的诸多问题。例如直接在元素的 style 属性上写样式，UI 视觉上的细节也会跟 UI 结构上的细节和业务逻辑混在一起。或是 classname 需要避免全局空间重名，需要用到命名规范的问题。
+Style-components avoids many problems of traditional CSS writing through modularization. For example, writing styles directly on the style attribute of elements, the visual details of UI will also be mixed with the details of UI structure and business logic. Or classname needs to avoid global space renaming, which requires the use of naming conventions.
 
-在 `src/routes/page.tsx` 里修改顶部的代码：
+Modify the code at the top in `src/routes/page.tsx`:
 
 ```js
 import styled from '@modern-js/runtime/styled';
 ```
 
-添加以下代码：
+Add the following code:
 
 ```js
 const Avatar = styled.img`
@@ -36,7 +36,7 @@ const Avatar = styled.img`
 `;
 ```
 
-修改 `List.Item.Meta` 的代码：
+Modify the code of `List.Item.Meta`:
 
 ```tsx
 <List.Item.Meta
@@ -46,11 +46,11 @@ const Avatar = styled.img`
 />
 ```
 
-执行 `pnpm run dev`，可以看到预期的运行结果：
+Execute `pnpm run dev` to see the expected running result:
 
 ![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c03-css-result1.png)
 
-接下来我们做一点重构，为了增强可读性，让代码更容易维护，可以把 Avatar 组件拆分出去。我们在终端执行以下命令，创建新的文件：
+Next we do a little refactoring. To enhance legibility and make the code easier to maintain, we can split the Avatar component. We execute the following command at the end point to create a new file:
 
 <Tabs>
 <TabItem value="macOS" label="macOS" default>
@@ -71,13 +71,13 @@ ni src/components/Avatar/index.tsx
 </TabItem>
 </Tabs>
 
-把 `src/routes/page.tsx` 里的 `<Avatar>` 实现删掉，修改为：
+Delete the `<Avatar>` implementation in `src/routes/page.tsx` and change it to:
 
 ```ts
 import Avatar from '../components/Avatar';
 ```
 
-`src/components/Avatar/index.tsx` 的内容，修改为：
+The content of `src/components/Avatar/index.tsx` is modified to:
 
 ```ts
 import styled from '@modern-js/runtime/styled';
@@ -92,37 +92,36 @@ const Avatar = styled.img`
 export default Avatar;
 ```
 
-执行 `pnpm run dev`，运行结果应该是一样的。
+Execute `pnpm run dev`, the result should be the same.
 
-:::info 注
-采用目录形式 `Avatar/index.tsx` 而不是单文件形式 `Avatar.tsx` 的原因是，之后可以方便的在目录内部增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。
+:::info note
+The reason for using the directory form `Avatar/index.tsx` instead of the single-file form `Avatar.tsx` is that you can easily add sub-files inside the directory later, including dedicated resources (pictures, etc.), dedicated sub-components, CSS files, etc.
 :::
 
+## Utility
 
-## 使用 Utility
+We have used the style-components implementation `<Avatar>` component, but the current UI is still unsatisfactory and lacks professionalism, such as the list item inhouse layout is a bit rough and misaligned in many places.
 
-我们已经使用 style-components 实现 `<Avatar>` 组件，但当前的 UI 仍然不能让人满意，缺乏专业感，例如列表项内部的布局有点粗糙，很多地方没对齐。
-
-现在，我们自己来实现一个更好的 `Item` 组件，实现这样的设计稿：
+Now, let's implement a better `Item` component ourselves, implementing a design draft like this:
 
 ![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/design2.png)
 
-这次要实现的 UI 更复杂，有内部结构，但另一方面，并没有 `<Avatar>` 组件的**很粗的亮蓝色边框**这样很特殊的 UI，都是很常规的水平垂直布局、居中、字体样式等。这种情况下，其实根本没必要写 CSS，有更高效的、跟 styled-components 互补的实现方式：**Utility Class**。
+The UI to be implemented this time is more complex and has an internal structure, but on the other hand, there is no very thick bright blue border of the `<Avatar>` component such a very special UI, which is a very conventional horizontal and vertical layout, centering, font style, etc. In this case, there is actually no need to write CSS at all. There is a more efficient implementation method that complements styled-components: **Utility Class**.
 
-Modern.js 集成了主流、轻量、通用的 Utility Class 工具库 [Tailwind CSS](https://tailwindcss.com/)。
+Modern.js integrates the mainstream, light, general-purpose Utility Class library [Tailwind CSS](https://tailwindcss.com/).
 
-执行 `pnpm run new`，进行如下选择，开启 Tailwind CSS：
+Execute `pnpm run new` and select the following to start Tailwind CSS:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用 Tailwind CSS 支持
+? Action: Enable features
+? Enable features: Enable Tailwind CSS
 ```
 
-在 `modern.config.ts` 中注册 Tailwind 插件:
+Register the Tailwind plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
-import TailwindCSSPlugin from '@modern-js/plugin-tailwindcss';
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
 
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
@@ -133,11 +132,11 @@ export default defineConfig({
   server: {
     ssr: true,
   },
-  plugins: [AppToolsPlugin(), TailwindCSSPlugin()],
+  plugins: [appTools(), tailwindcssPlugin()],
 });
 ```
 
-在 `src/routes/page.tsx` 顶部引入 Tailwind CSS 的 css 文件，就可以开始快速实现专业的 UI：
+Import the Tailwind CSS css file at the top of `src/routes/page.tsx` to start a quick implementation of the professional UI:
 
 ```js
 import 'tailwindcss/base.css';
@@ -145,7 +144,7 @@ import 'tailwindcss/components.css';
 import 'tailwindcss/utilities.css';
 ```
 
-先创建 Item 组件：
+Create the Item component first:
 
 <Tabs>
 <TabItem value="macOS" label="macOS" default>
@@ -166,7 +165,7 @@ ni src/components/Item/index.tsx
 </TabItem>
 </Tabs>
 
-修改 `src/routes/page.tsx`，把 `List` 的 `render` 实现交给 `Item` 组件：
+Modify `src/routes/page.tsx` to pass the `render` implementation of `List` to `Item` component:
 
 ```js
 import { List } from 'antd';
@@ -175,7 +174,7 @@ import 'tailwindcss/components.css';
 import 'tailwindcss/utilities.css';
 import Item from '../components/Item';
 
-const getAvatar = (users: Array<{ name: string; email: string }>) =>
+const getAvatar = (users: Array<{ name: string, email: string }>) =>
   users.map(user => ({
     ...user,
     avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
@@ -202,9 +201,9 @@ function Index() {
 export default Index;
 ```
 
-在父容器的上使用了 [Utility Class](https://tailwindcss.com/docs/container) ，快速实现了最基本的最大宽度、居中等样式。
+Utility Class(https://tailwindcss.com/docs/container) is used on the parent container for a quick implementation of the most basic maximum width, center, and other styles.
 
-接下来实现 `src/components/Item/index.tsx`：
+Next implementation `src/components/Item/index.tsx`:
 
 ```tsx
 import Avatar from '../Avatar';
@@ -242,20 +241,19 @@ const Item = ({ info }: { info: InfoProps }) => {
 export default Item;
 ```
 
-执行 `pnpm run dev`，可以看到预期的运行结果：
+Execute `pnpm run dev` to see the expected running result:
 
 ![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/result2.png)
 
-我们只使用了少量 Utility Class，比如 [Flex](https://tailwindcss.com/docs/display/)、[Padding](https://tailwindcss.com/docs/padding/)、[Margin](https://tailwindcss.com/docs/margin/)、[Text](https://tailwindcss.com/docs/text-color/)、[Font](https://tailwindcss.com/docs/font-weight/)、[Border](https://tailwindcss.com/docs/border-width)，不写一行 CSS 就实现了符合设计稿的专业 UI。
-
+We only use a few Utility Classes, such as [Flex](https://tailwindcss.com/docs/display/), [Padding](https://tailwindcss.com/docs/padding/), [Margin](https://tailwindcss.com/docs/margin/), [Text](https://tailwindcss.com/docs/text-color/), [Font](https://tailwindcss.com/docs/font-weight/), [Border](https://tailwindcss.com/docs/border-width), without writing a single CSS implementation Professional UI that conforms to the design draft.
 
-## 自定义 Utility Class
+## Customized Utility Class
 
-我们也可以自己实现新的 Utility Class，方便在代码间复用。
+We can also implement the new Utility Class ourselves to facilitate reuse between codes.
 
-Utility Class 本身也是一种**面向组件**的技术（将不同 class 用在一个组件上，等价于给这个组件设置了一些来自基类的属性），但 Utility Class 的 classname 是全局的（因为要用在任意组件/元素上），很适合用独立 CSS 文件来实现。
+Utility Class itself is also a **component-oriented** technology (using different classes on a component is equivalent to setting some attributes from the base class for this component), but the classname of Utility Class is global (because it is used on arbitrary components/elements), it is very suitable for implementation with separate CSS files.
 
-创建一个新的 CSS 文件：
+Create a new CSS file:
 
 <Tabs>
 <TabItem value="macOS" label="macOS" default>
@@ -282,11 +280,11 @@ ni src/styles/utils.css
 import '../styles/utils.css';
 ```
 
-在 `src/routes/styles/utils.css` 里实现一个名为 `custom-text-gray` 的 Utility Class。
+A Utility Class named `custom-text-gray` is implemented in `src/routes/styles/utils.css`.
 
 ```css
 :root {
-  --custom-text-color:rgb(113, 128, 150);
+  --custom-text-color: rgb(113, 128, 150);
 }
 
 .custom-text-gray {
@@ -294,31 +292,30 @@ import '../styles/utils.css';
 }
 ```
 
-:::info 注
-Modern.js 集成了 [PostCSS](/docs/guides/basic-features/css/postcss)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)。
+:::info note
+Modern.js integrates with [PostCSS](/docs/guides/basic-features/css/postcss) and supports modern CSS syntax features such as [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
 :::
 
-在 `src/routes/components/Item/index.tsx` 里使用，把：
+Use in `src/routes/components/Item/index.tsx`:
 
 ```js
 <div className="ml-4 flex-1 flex justify-between">
 ```
 
-改成：
+Change to:
 
 ```js
 <div className="ml-4 custom-text-gray flex-1 flex justify-between">
 ```
 
-执行 `pnpm run dev`，可以看到字体颜色改变了：
+Execute `pnpm run dev`, you can see that the font color has changed:
 
 ![design2](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/result3.png)
 
-:::info 注
-此处只是为了演示 Utility Class 用法。真实项目中，在有 Tailwind CSS 的情况下，这种 Utility Class 没什么价值，应该通过配置 Design System 的 [**theme**](https://tailwindcss.com/docs/customizing-colors) 来增加字体颜色。
+:::info note
+This is just to demonstrate Utility Class usage. In a real project, with Tailwind CSS, this Utility Class is of little value and should be added to the font color through the [**theme**](https://tailwindcss.com/docs/customizing-colors) of the configuration Design System.
 
-`utils.css` 也可以写成 `utils.scss` 或 `utils.less`，Modern.js 对 SCSS 和 Less 同样提供开箱即用的支持。
+`utils.css` can also be written as `utils.scss` or `utils.less`, Modern.js out of the box support for SCSS and Less.
 
-不过在 PostCSS 的支持下，现代 CSS 应该足以满足这些开发需求，性能相较于预处理器也更好，建议优先用 .css 文件。
+However, with the support of PostCSS, modern CSS should be sufficient to meet these development needs, and the performance is also better than that of the preprocessor. It is recommended to use `.css` files first.
 :::
-

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c04-routes.md

@@ -1,17 +1,17 @@
 ---
-title: 添加客户端路由
+title: Add Client Route
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-上一章节中，我们学习了如何为创建 UI 组件，并添加样式。
+In the previous chapter, we learned how to create UI components and add styles.
 
-这一章节中，我们将会学习如何添加**客户端路由**。
+In this chapter, we will learn how to add **Client Route**.
 
-之前我们已经为联系人列表增加了 Archive 按钮，接下来我们添加一个客户端路由 `/archives`，访问这个路由时，只显示已存档的联系人，而原有的 `/` 继续显示所有联系人。
+Previously we have added the Archive button to the point of contact list, next we add a route `/archives`, when accessing this route, only the point of contact of the saved file is displayed, while the original `/` continues to display all points of contact.
 
-新建 `src/routes/archives/page.tsx` 文件：
+Create a new `src/routes/archives/page.tsx` file:
 
 <Tabs>
 <TabItem value="macOS" label="macOS" default>
@@ -32,7 +32,7 @@ ni src/routes/archives/page.tsx
 </TabItem>
 </Tabs>
 
-添加如下代码：
+Add the following code:
 
 ```tsx title="src/archives/page.tsx"
 import { List } from 'antd';
@@ -67,7 +67,7 @@ function Index() {
 export default Index;
 ```
 
-这里使用了 [React Helmet](https://github.com/nfl/react-helmet) 的 `Helmet` 组件，在 `src/routes/page.tsx` 中也添加 Helmet 组件：
+The `Helmet` component of [React Helmet](https://github.com/nfl/react-helmet) is used here, and the Helmet component is also added in `src/routes/page.tsx`:
 
 ```tsx
 import { Helmet } from '@modern-js/runtime/head';
@@ -84,11 +84,11 @@ function Index() {
 }
 ```
 
-:::info 注
-Modern.js 默认集成了 react-helmet，也可以结合 SSR 使用，满足 SEO 需求。
+:::info note
+Modern.js integrates react-helmet by default, and can also be used in conjunction with SSR to meet SEO needs.
 :::
 
-因为现在有多个页面，都需要用到前面的 Utility Class，因此我们需要把样式文件移动到 `src/routes/layout.tsx`：
+Since there are multiple pages now, all of which need to use the previous Utility Class, we need to move the style file to `src/routes/layout.tsx`:
 
 ```tsx
 import 'tailwindcss/base.css';
@@ -97,25 +97,25 @@ import 'tailwindcss/utilities.css';
 import '../styles/utils.css';
 ```
 
-执行 `pnpm run dev`，访问 `http://localhost:8080`，可以看到完整的联系人，页面的标题是 All：
+Execute `pnpm run dev`, visit `http://localhost:8080`, you can see the full point of contact, the title of the page is All:
 
 ![display1](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c04-archives.png)
 
-访问 `http://localhost:8080/archives`，只会看到已存档的联系人，页面的标题是 Archives：
+Visit `http://localhost:8080/archives` and you will only see the point of contact of the saved file with the title Archives:
 
 ![display](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c04-all.png)
 
-查看页面 HTML 源码，可以看到两个页面的内容是一样，是在客户端针对不同 URL 渲染不同内容。
+Looking at the HTML source code of the page, you can see that the content of the two pages is the same, and different content is rendered for different URLs.
 
-**接下来我们增加一个简单的导航栏，让用户能在两个列表之间切换**。
+**Next we add a simple navigation bar that allows the user to toggle between the two lists**.
 
-打开 `src/routes/layout.tsx`，在顶部导入 Radio 组件：
+Open `src/routes/layout.tsx` and import the Radio component at the top:
 
 ```tsx
 import { Radio } from 'antd';
 ```
 
-然后将 UI 最顶部进行修改，增加一组单选框
+Then modify the top of the UI to add a set of radio group:
 
 ```tsx {4-9}
 export default function Layout() {
@@ -133,17 +133,17 @@ export default function Layout() {
 }
 ```
 
-然后我们来实现 `currentList` 和 `handleSetList`。
+Then we come to the implementation of `currentList` and `handleSetList`.
 
-引入三个 React Hook：`useState` 和 `useNavigate` 和 `useParams`，以及 Ant Design 的事件类型定义：
+Introducing three React Hooks: `useState` and `useNavigate` and `useParams`, as well as Ant Design's event type definition:
 
 ```js
 import { useState } from 'react';
 import { Radio, RadioChangeEvent } from 'antd';
-import { Outlet, useLocation, useNavigate } from "@modern-js/runtime/router";
+import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 ```
 
-最后在 Layout 组件里增加局部状态和相关逻辑：
+Finally, add local state and related logic to the Layout component:
 
 ```tsx {2-9}
 export default function Layout() {
@@ -160,10 +160,10 @@ export default function Layout() {
 }
 ```
 
-到这里就已经完成了页面导航栏实现，执行 `pnpm run dev` 查看效果：
+At this point, the page navigation bar implementation has been completed, and execute `pnpm run dev` to see the effect:
 
 ![display2](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c04-switch.png)
 
-点击导航栏中 Archives，可以看到单选框的选中状态和 URL 都会变化，页面没有刷新，只发生了 CSR。
+Click Archives in the navigation bar, you can see that the selected state and URL of the radio box will change, the page is not refreshed, only CSR occurs.
 
-通过 URL 访问两个页面，可以看到 HTML 内容是不同的，这是因为在 SSR 阶段页面就执行了客户端路由的逻辑，HTML 里已经包含了最终的渲染结果。
+Accessing the two pages through the URL, you can see that the HTML content is different, because the page executes the logic of client routing in the SSR stage, and the HTML already contains the final render result.

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c05-loader.md

@@ -1,23 +1,23 @@
 ---
-title: 添加 Loader
+title: Add Loader
 ---
 
-上一章节中，我们学习了如何添加客户端路由。
+In the previous chapter, we learned how to add client route.
 
-这一章节中，我们将会学习如何为**路由组件添加 Loader**。
+In this chapter, we will learn how to add **Loader** to the routing component.
 
-到目前为止，我们都是通过硬编码的方式，为组件提供数据。如果要从远端获取数据，通常情况下会使用 `useEffect` 来做。但在启用 SSR 的情况下，`useEffect` 是不会在服务端执行的，所以这种 SSR 只能渲染很有限的 UI。
+By far, we have provided data to components through hardcoding. If you want to get data from the remote, you usually use `useEffect` to do it. But when SSR is enabled, `useEffect` will not be executed at the server level, so this SSR can only render a very limited UI.
 
-Modern.js 为提供了 Data Loader 的能力，支持同构的在组件中获取数据，让 SSR 的价值最大化。
+Modern.js provides the ability of Data Loader to support homogeneous data acquisition in components to maximize the value of SSR.
 
-下面我们演示如何为路由组件添加 Data Loader，并模拟远端数据获取。我们使用 faker 来 mock 需要的数据，首先安装依赖：
+Below we demonstrate how to add Data Loader to the routing component and simulate remote data acquisition. We use faker to mock the required data, first install dependency:
 
 ```bash
 pnpm add faker@5
 pnpm add @types/faker@5 -D
 ```
 
-修改 `src/routes/page.tsx`：
+Modify `src/routes/page.tsx`:
 
 ```tsx
 import { name, internet } from 'faker';
@@ -49,10 +49,10 @@ export const loader = async (): Promise<LoaderData> => {
 ```
 
 :::note
-Data Loader 并非只为 SSR 工作。在 CSR 项目中，Data Loader 也可以避免数据获取依赖 UI 渲染，解决请求瀑布流的问题。未来，Modern.js 也会为这一特性添加更多能力，例如预获取、数据缓存等。
+Data Loader doesn't just work for SSR. In CSR projects, Data Loader can also avoid data acquisition dependency UI rendering, which solves the problem of requesting dynamic grid layout. In the future, Modern.js will also add more capabilities to this feature, such as pre-fetching, data caching, etc.
 :::
 
-Modern.js 也提供了一个叫 `useLoaderData` 的 hooks API，我们修改 `src/routes/page.tsx` 导出的组件：
+Modern.js also provides a hooks API called `useLoaderData`, we modify the exported component of `src/routes/page.tsx`:
 
 ```tsx {1,4,13}
 import { useLoaderData } from '@modern-js/runtime/router';
@@ -67,7 +67,7 @@ function Index() {
       </Helmet>
       <List
         dataSource={data}
-        renderItem={(info) => <Item key={info.name} info={info} />}
+        renderItem={info => <Item key={info.name} info={info} />}
       />
     </div>
   );
@@ -77,6 +77,7 @@ export default Index;
 ```
 
 <!-- Todo 重新截图，SSR 内容 -->
-重新执行 `pnpm run dev`，查看 `view-source:http://localhost:8080/`，或在 devtools 的 Network 面板里查看 HTML 请求的「 Preview 」，可以看到 SSR 渲染出来的 HTML 已经包含完整的 UI：
+
+Re-execute `pnpm run dev`, view `view-source: http://localhost:8080/`, or view the "Preview" of the HTML request in the Network panel of devtools, you can see that the HTML rendered by SSR already contains the complete UI:
 
 ![display6](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/11/display6.png)