diff --git a/docs/tutorial/02-getting-started/01-introduce.md b/docs/tutorial/02-getting-started/01-introduce.md
index e5e79b4c6b..e27f60e34c 100644
--- a/docs/tutorial/02-getting-started/01-introduce.md
+++ b/docs/tutorial/02-getting-started/01-introduce.md
@@ -12,11 +12,11 @@ import IconFont from '@site/src/components/IconFont';
## What is alova?
-alova (pronounced `/əˈləʊva/` ) is an creative next-generation request tool that helps you maximize API usage efficiency and save brainpower. Integrating the server-side APIs into the front-end project is simplified to only one step.
+alova (pronounced `/əˈləʊva/` ) is an workflow-streamlined next-generation request tool that helps you extremely streamline API integration workflow.
![](/img/overview_flow_en.png)
-It can simplify API consumption from 7 steps to 1 step. You only need to choose the API to use.
+It can streamline API integration workflow from 7 steps to 1 step. You only need to choose the API to use.
## How to do it?
@@ -32,16 +32,37 @@ const response = await alova.Get('/api/user');
Based on the core functions of alova, it also provides a complete solution for complex request scenarios, which we call **request strategy**. With only one line of code, you can quickly implement various complex request logics, which can not only help you improve development efficiency, but also help you improve the running efficiency of the App and reduce the pressure on the server.
-For example, `useRequest` can automatically manage the request status, **`loading/error/data` is responsive data**, which can be directly bound in the view in UI frameworks such as react, vue, and svelte, and these responsive data will be automatically maintained according to the request status.
+For example, `useRequest` can automatically manage the request states, **`loading/error/data` is responsive data**, which can be directly bound in the view in UI frameworks such as react, vue, and svelte, and these responsive data will be automatically maintained according to the request states.
```javascript
const { loading, error, data } = useRequest(alova.Get('/api/user'));
```
-Another paging request strategy, **when `page/pageSize` changes, it will automatically trigger requests with different parameters**.
+Here is another pagination request strategy, which includes responsive states, actions, events, and **when `page/pageSize` changes, it will automatically trigger a request with different parameters**.
```javascript
-const { loading, error, data, page, pageSize, total } = usePagination((page, size) =>
+const {
+ // states
+ loading,
+ error,
+ data,
+ page,
+ pageSize,
+ total,
+
+ // actions
+ refresh,
+ insert,
+ replace,
+ remove,
+ reload
+
+ // events
+ onSuccess,
+ onFetchSuccess,
+ onError,
+ onFetchError
+} = usePagination((page, size) =>
alova.Get('/api/user/list', {
params: { page, size }
})
@@ -56,6 +77,10 @@ Using the alova extension in vscode can help you automatically generate request
This extension also optimizes the API usage process, allowing you to experience a different API integration experience. In the past, you needed to query the API documentation first, and constantly switch between the API documentation and the editor to write request code. After using the alova plug-in, you no longer need to leave the editor and can directly use the API in the editor while checking.
+import vscodeDemoVideo from '@site/static/video/vscode-demo-video-en.mp4';
+
+
+
> For a detailed introduction to the alova plug-in, please refer to [Integrated Editor Extension](/tutorial/getting-started/extension-integration).
## Is there any difference?
diff --git a/docs/tutorial/02-getting-started/09-extension-integration.md b/docs/tutorial/02-getting-started/09-extension-integration.md
index 9d275f621d..5ee45e2282 100644
--- a/docs/tutorial/02-getting-started/09-extension-integration.md
+++ b/docs/tutorial/02-getting-started/09-extension-integration.md
@@ -14,7 +14,7 @@ Integrating Alova's editor extension can make it more powerful.
The following is an extended demonstration video
-import vscodeDemoVideo from '@site/static/video/vscode-demo-video-chinese.mp4';
+import vscodeDemoVideo from '@site/static/video/vscode-demo-video-en.mp4';
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index ab5f12ccfc..de224b287e 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -126,6 +126,10 @@ const config: Config = {
label: 'Comparison',
to: 'about/comparison'
},
+ {
+ label: 'Releases',
+ to: 'https://github.com/alovajs/alova/releases'
+ },
{
label: 'Q&A',
to: 'about/qa'
diff --git a/i18n/zh-CN/code.json b/i18n/zh-CN/code.json
index ec43271630..a8d7707739 100644
--- a/i18n/zh-CN/code.json
+++ b/i18n/zh-CN/code.json
@@ -277,8 +277,8 @@
"message": "创新的下一代请求工具",
"description": "the title"
},
- "homepage.title.Creative": {
- "message": "创新的",
+ "homepage.title.Streamlined": {
+ "message": "工作流精简的",
"description": "First part of the title"
},
"homepage.title.Next Generation Request Tool": {
@@ -286,7 +286,7 @@
"description": "The second part of the title"
},
"homepage.tagline": {
- "message": "极致地提升你的API接入效率,节约大脑,仅需一步",
+ "message": "极致地简化你的API集成工作流,仅需一步",
"description": "网站tagline"
},
"homepage.automaticGenerate.sectionTitle": {
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md b/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md
index be62c9367a..9755a229ef 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md
@@ -11,10 +11,12 @@ import AudioPlayer from '@site/src/components/AudioPlayer';
## alova 是什么?
-alova(读作`/əˈləʊva/`) 是一个创新的下一代请求工具,帮你极致地提升 API 使用效率,节约大脑。将服务端接口集成到前端项目简化为只有 1 步。
+alova(读作`/əˈləʊva/`) 是一个流程简化的下一代请求工具,帮你极致地简化 API 集成工作流。
![](/img/overview_flow_cn.png)
+它可以将 API 集成工作流从 7 个步骤简化为 1 个步骤,你只需要选择 API 即可使用。
+
## 如何做的?
### 核心功能
@@ -29,16 +31,37 @@ const response = await alova.Get('/api/user');
基于 alova 的核心功能,还提供了完整的应对复杂请求场景的方案,我们称之为**请求策略**,只需一行代码就能快速实现各种复杂的请求逻辑,不仅能帮你提升开发效率,还能帮你提升 App 的运行效率,降低服务端压力。
-例如,`useRequest`可以自动管理请求状态,**`loading/error/data` 是响应式的数据**,在 react、vue、svelte 等 UI 框架中可以直接在视图中绑定它们,而且会根据请求状态自动维护它这些响应式数据。
+例如,`useRequest`可以自动管理请求状态,**`loading/error/data` 是响应式的数据**,在 react、vue、svelte 等 UI 框架中可以直接在视图中绑定它们,而且会根据请求状态自动维护这些响应式数据。
```javascript
const { loading, error, data } = useRequest(alova.Get('/api/user'));
```
-再来一个分页请求策略,**当`page/pageSize`等发生变化时会自动以不同参数触发请求**。
+再来一个分页请求策略,它包含响应式状态、操作函数、事件,并且**当`page/pageSize`等发生变化时会自动以不同参数触发请求**。
```javascript
-const { loading, error, data, page, pageSize, total } = usePagination((page, size) =>
+const {
+ // 响应式状态
+ loading,
+ error,
+ data,
+ page,
+ pageSize,
+ total,
+
+ // 操作函数
+ refresh,
+ insert,
+ replace,
+ remove,
+ reload
+
+ // 事件
+ onSuccess,
+ onFetchSuccess,
+ onError,
+ onFetchError
+} = usePagination((page, size) =>
alova.Get('/api/user/list', {
params: { page, size }
})
@@ -53,6 +76,10 @@ alova 提供了 15+个基于[RSM](/about/RSM)规范的请求策略模块,它
这个扩展也优化了 API 的使用流程,让你感受不一样的 API 集成体验,在过去,你需要先查询 API 文档,并不断地在 API 文档与编辑器切换来编写请求代码,使用 alova 插件后,你可以不再需要离开编辑器,直接在编辑器中边查边使用 API。
+import vscodeDemoVideo from '@site/static/video/vscode-demo-video-chinese.mp4';
+
+
+
> 关于 alova 插件的详细介绍,请参考 [集成编辑器扩展](/tutorial/getting-started/extension-integration)。
## 有什么不同吗?
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 687f8ce5f0..690e43a3b2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -76,8 +76,8 @@ function HomepageHeader() {
-
- Creative
+
+ Workflow-Streamlined
@@ -87,7 +87,7 @@ function HomepageHeader() {
- Extremely improve your API using efficiency and save brainpower Just one step
+ Extremely streamline API integration workflow. Just one step
diff --git a/static/video/vscode-demo-video-chinese.mp4 b/static/video/vscode-demo-video-chinese.mp4
index 28c8fc7588..8a84f90cd4 100644
Binary files a/static/video/vscode-demo-video-chinese.mp4 and b/static/video/vscode-demo-video-chinese.mp4 differ
diff --git a/static/video/vscode-demo-video-en.mp4 b/static/video/vscode-demo-video-en.mp4
new file mode 100644
index 0000000000..6d1b234d9e
Binary files /dev/null and b/static/video/vscode-demo-video-en.mp4 differ