docs(homepage): Restructure the homepage layout and optimize the vide…

…o tutorial entrance - Adjusted the layout structure of each part of the homepage to make it more reasonable and beautiful - Moved the video tutorial entrance to a more prominent position to improve user visibility - Optimized the responsive layout to ensure a good browsing experience on different devices - Streamlined some redundant content to make the page more concise
alovajs · Dec 13, 2024 · 3ea1216 · 3ea1216
1 parent fdf3b5f
commit 3ea1216
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 129 deletions.
diff --git a/docs/api/01-alova.md b/docs/api/01-alova.md
@@ -19,7 +19,7 @@ function createAlova(options?: AlovaOptions): Alova;
 | Parameter name | Type                        | Description                                                                                                             |
 | -------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
 | requestAdapter | object                      | Request adapter, required, [View details](/tutorial/advanced/custom/http-adapter)                                       |
-| id             | string \| number            | Alova instance id, optional, [View details](/tutorial/cache/mode#%E8%AE%BE%E7%BD%AE-alova-id)                           |
+| id             | string \| number            | Alova instance id, optional, [View details](/tutorial/cache/mode#set-alova-id)                                          |
 | baseURL        | string                      | Base path, optional, default is empty, [View details](/tutorial/getting-started/basic/alova)                            |
 | statesHook     | object                      | State management hook, optional, [see details](/tutorial/getting-started/basic/combine-framework)                       |
 | timeout        | number                      | Timeout, default is no timeout, [see details](/tutorial/getting-started/basic/alova)                                    |
@@ -159,6 +159,52 @@ const getUsers = alovaInstance.Get('/users', {
 });
 ```
 
+## alova.Get()
+
+Create a method instance for a GET request.
+
+- **Type**
+
+```ts
+interface Alova {
+  Get(url: string, config?: AlovaMethodCreateConfig): Method;
+}
+```
+
+- **Parameter**
+
+1. url: request address
+2. config: configuration parameters
+
+| Parameter name | Type           | Description                                                                                                                                                                                                                                                                                                            |
+| -------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| headers        | object         | request header, [view details](/tutorial/getting-started/basic/method)                                                                                                                                                                                                                                                 |
+| params         | object         | request parameters, [view details](/tutorial/getting-started/basic/method)                                                                                                                                                                                                                                             |
+| name           | string         | method object name, in [updateState](/tutorial/client/in-depth/update-across-components), [invalidateCache](/tutorial/cache/manually-invalidate), [setCache](/tutorial/cache/set-and-query), and [fetch function](/tutorial/client/strategy/use-fetcher) can get the corresponding method instance by name or wildcard |
+| timeout        | number         | request timeout, [see details](/tutorial/getting-started/basic/method)                                                                                                                                                                                                                                                 |
+| cacheFor       | cacheForConfig | response cache time, [see details](/tutorial/cache/mode)                                                                                                                                                                                                                                                               |
+| hitSource      | string         | hit source method instance, when the source method instance request is successful, the cache of the current method instance will be invalidated, [see details](/tutorial/cache/auto-invalidate)                                                                                                                        |
+| transform      | function       | Convert response data, [View details](/tutorial/getting-started/basic/method)                                                                                                                                                                                                                                          |
+| shareRequest   | boolean        | Request-level shared request switch, [View details](/tutorial/getting-started/basic/method)                                                                                                                                                                                                                            |
+| meta           | any            | method metadata, [View details](/tutorial/getting-started/basic/method-metadata)                                                                                                                                                                                                                                       |
+
+> In addition to the configurable parameters above, other parameters supported by the request adapter are also supported.
+
+- **Return**
+
+method instance
+
+- **Example**
+
+```ts
+const getUsers = alovaInstance.Get('/users', {
+  params: {
+    id: 1
+  }
+  // ...
+});
+```
+
 ## alova.Post()
 
 Create a method instance for a POST request.

diff --git a/docs/tutorial/02-getting-started/01-introduce.md b/docs/tutorial/02-getting-started/01-introduce.md
@@ -14,31 +14,35 @@ import TabItem from '@theme/TabItem';
 
 ## What is alova?
 
-Alova (pronounced as `/əˈləʊva/` <AudioPlayer src={tts} />) is a workflow-streamlined next-generation request tool. It can extremely streamline your API integration workflow from 7 steps to 1 step, and you just select the API what you need.
+Alova (pronounced `/əˈləʊva/`<AudioPlayer src={tts} />) is a next-generation request library that radically simplifies your API integration workflow, reducing what used to take 7 complex steps down to just 1 - simply select your API and go.
 
-![](/img/overview_flow_en.png)
+Unlike libraries such as `@tanstack/react-request`, `swrjs`, and `useRequest` from `ahooks`, alova revolutionizes your development experience by wrapping `fetch/XMLHttpRequest/axios` into request adapters and providing intelligent request strategies for even the most complex scenarios.
 
-Different from `@tanstack/react-request`, `swrjs`, `ahooks's useRequest`, etc. library, `alova` is a comprehensive request tool, alova makes your request integration very simple and maintains more efficient Client-Server data interaction. In addition, you can use it in client and server environments (including SSR).
+Want to dive into the origin story? Check out [Why we created alova](/about/faqs). For a deep dive into how we're different, explore our comprehensive [comparison with other request libraries](/about/comparison).
 
-You can read the backstory on [why create alova](/about/faqs), and we've also provided a detailed [comparison to other request libraries](/about/comparison) to see how alova differs.
+## Features
 
-In addition, alova also has the following features:
+- Incredibly simple to use with a minimal learning curve.
+- More modern OpenAPI solution - say goodbye to tedious intermediate API documentation.
+- Compatible with client-side technologies and request libraries: `react/vue/svelte/solid/next/nuxt/sveltkit/solid-start/uniapp/taro/...` + `fetch/XMLHttpRequest/axios/...`
+- Compatible with server-side technologies and request libraries: `nodejs/deno/bun/...` + `fetch/XMLHttpRequest/axios/...`
+- 15+ high-performance request strategies to handle complex request scenarios, helping you develop more efficient applications faster.
 
-- API design similar to axios, with lower learning cost;
-- High-performance client and server request strategies, making the application smoother;
-- High flexibility, alova can be used in any js environment with any UI framework, and provides a unified user experience and perfect code migration;
-- Multi-level cache mode and request sharing mechanism to improve request performance and reduce server-side pressure;
-- High aggregation of api code organization, the request parameters, cache behavior, response data conversion, etc. of each API will be gathered in the same code block, which is a great advantage for managing a large number of APIs;
+## Live Demo
 
-## How to do it?
+We've prepared a rich set of examples to help you quickly explore alova's capabilities.
 
-Alova provides a comprehensive solution for complex request scenarios, which we call **request strategy**. they include client request strategies and server request strategies.
+<Examples />
+
+## How It Works?
+
+alova provides comprehensive solutions for complex request scenarios, which we call **Request Strategy** , encompassing both client-side and server-side request strategies.
 
 ### Client request strategy
 
-On the client side, request strategies are implemented in the form of hooks, interceptors, and middleware. Use different request strategies to handle different requests scenarios. They provide comprehensive stateful parameters, events, and actions for each request scenario. With just one line of code to 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.
+On the client-side, request strategies are implemented through hooks, interceptors, and middleware, allowing you to tackle different request scenarios with precision. These strategies provide comprehensive, stateful parameters, events, and operational functions for every request scenario, enabling you to implement complex request logic with just a single line of code. Not only do they boost your development efficiency, but they also optimize your app's performance and reduce server-side load.
 
-The following are some clients For an introduction and examples of request strategies, please expand them which you are interested in.
+Below are introductions and examples of some client-side request strategies. Feel free to explore the ones that catch your interest.
 
 <details>
 <summary>Watching request strategy</summary>
@@ -345,21 +349,9 @@ alova provides total 15+ client request strategies based on the [RSM](/about/RSM
 
 ### Server Request Strategy
 
-alova can not only be used in server environments such as `nodejs/deno/bun`, but also provides server request strategies such as request retry, calling API to send captcha, request rate limit, etc. We call them **server hooks**, which all support cluster mode.
-
-A simplest server request example is as follows:
-
-```javascript
-const response = await alova.Get('/api/user');
-```
-
-You can decorate the request function with `server hooks` to get corresponding features. It's so simple.
-
-```javascript
-const response = await serverHookFunction(alova.Get('/api/user'));
-```
+On the server-side, such as in `nodejs/deno/bun`, alova also provides server-side request strategies, which we call **server hooks**, all of which support cluster mode.
 
-The following are introductions and examples of several server-side request strategies. please expand them which you are interested in.
+Below are introductions and examples of some server-side request strategies. Feel free to explore the ones that catch your interest.
 
 <details>
 <summary>Request Retry strategy</summary>
@@ -395,7 +387,7 @@ See [Request Rate Limit Strategy](/tutorial/server/strategy/rate-limit) for deta
 
 ### More modern openAPI solution
 
-1. alova's devtools can generate API calling code, as well as TypeScript types and detailed documentation for each API, so you can enjoy full API type hints even in JavaScript projects.
+1. alova's devtools can simultaneously generate API call code, TypeScript types for each API, and comprehensive API documentation, allowing you to enjoy full API type hints even in JavaScript projects.
 
 ```mermaid
 flowchart LR
@@ -404,7 +396,7 @@ S1[Alova extension] --> W2[Comprehensive API type]
 S1[Alova extension] --> W3[Comprehensive API docs]
 ```
 
-2. In the past, when the backend developer delivered the API to you, you had to open the intermediate API docs to query and copy the key information into your project, and you had to constantly switch between the intermediate API docs and your editor. But now, alova's devtools can eliminate the intermediate API docs for you, shortening the collaboration distance between the frontend and the backend like a wormhole. Through it, you can quickly find the required API in the editor and display the comprehensive document of this API, and quickly comprehensive parameter transfer by referring to the API parameter table, giving you a different API integration experience.
+2. In the past, when backend developers delivered APIs, you had to open the intermediate API documentation, search for and copy key information into your project, constantly switching between the API docs and your editor. Now, Alova's development tools can eliminate this intermediary documentation, bridging the frontend and backend collaboration like a wormhole. Through this tool, you can quickly find the APIs you need directly in your editor, display the API's complete documentation, and rapidly complete parameter passing by referencing the API parameter table - offering you an entirely new API integration experience.
 
 ```mermaid
 flowchart LR
@@ -420,11 +412,11 @@ classDef redNode fill:transparent,stroke:#ee4400,color:#ee4400,stroke-width:4px;
 
 With the various features of alova, you can also build a Client-Server interaction layer(CSIL) for your project. The CSIL will distribute response data to various components by merging same requests. Additionally, the CSIL also manages response data and the responsive states created by useHooks. You can access and modify the datas in CSIL in any UI component, as well as refresh the data in CSIL.
 
-> If you want to build a CSIL, please refer to [Building Client-Server Interaction Layer](/tutorial/project/best-practice/csil)
+> To learn how to build a CS Interaction Layer, refer to [Building the Client-Server Interaction Layer](/tutorial/project/best-practice/csil)
 
 ## Run in any JS environment
 
-Not only that, Alova is very flexible, you can use it with different request tools in any of the following JS environments (the gray part will be gradually supported in the future).
+alova is very flexible, you can use it with various request tools across any JavaScript environment (grayed-out options will be gradually supported in the future).
 
 <SupportList showStatus></SupportList>
 

diff --git a/i18n/zh-CN/code.json b/i18n/zh-CN/code.json
@@ -466,7 +466,7 @@
     "message": "快速开始",
     "description": "开始按钮文字"
   },
-  "homepage.5-minute Video Tutorial": {
+  "homepage.Video Tutorial": {
     "message": "5分钟入门视频",
     "description": "快速入门按钮文字"
   },

diff --git a/...usaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md b/...usaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md
@@ -18,17 +18,23 @@ alova（读作`/əˈləʊva/`<AudioPlayer src={tts} />） 是一个流程简化
 
 ![](/img/overview_flow_cn.png)
 
-有别于`@tanstack/react-request`、`swrjs`、`ahooks`的`useRequest`等库，`alova`是一个完整的请求方案，alova 让你的请求集成变得非常简单，并且保持更高效的 Client-Server 数据交互。此外，你可以在客户端和服务端环境中（包括 SSR）使用`alova`。
+有别于`@tanstack/react-request`、`swrjs`、`ahooks`的`useRequest`等库，`alova`通过将`fetch/XMLHttpRequest/axios`封装成请求适配器，并提供不同的复杂请求场景下的请求策略，来达到更简单和统一的开发体验。
 
 你可以在 [为什么创造 alova](/about/faqs) 中了解背景故事，我们也提供了一份详细的 [对比与其他请求库](/about/comparison) 了解 alova 的差异。
 
-此外，alova 还具有以下特性：
+## 特性
 
-- 与 axios 相似的 api 设计，学习成本更低；
-- 高性能的客户端和服务端请求策略，让应用更流畅；
-- 灵活性高，alova 可以在任何 js 环境下，与任何 UI 框架协作使用，并且提供了统一的使用体验和完美的代码迁移；
-- 多级缓存模式和请求共享机制，提升请求性能并降低服务端压力；
-- api 代码的高聚合组织，每个 api 的请求参数、缓存行为、响应数据转换等都将聚集在相同的代码块中，这对于管理大量的 api 有很大的优势；
+- 简单易用，并且学习成本更低。
+- 更先进的 openAPI 解决方案，直接扔掉中间的API文档吧。
+- 搭配客户端技术和请求库，`react/vue/svelte/solid/next/nuxt/sveltkit/solid-start/uniapp/taro/...` + `fetch/XMLHttpRequest/axios/...`
+- 搭配服务端技术和请求库，`nodejs/deno/bun/...` + `fetch/XMLHttpRequest/axios/...`
+- 15+ 高性能的请求策略应对复杂的请求场景，帮助你快速开发性能更好的应用。
+
+## 在线体验
+
+这里为你准备了丰富的示例，帮助你快速体验 alova 的各种功能。
+
+<Examples />
 
 ## 如何做的？
 
@@ -341,25 +347,13 @@ const {
 
 </details>
 
-alova 共提供了 15+个基于[RSM](/about/RSM)规范的请求客户端请求策略，请前往 [请求策略列表](/tutorial/client/strategy) 查看全部客户端请求策略。
+请前往 [请求策略列表](/tutorial/client/strategy) 查看全部客户端请求策略。
 
 ### 服务端请求策略
 
-alova 不仅可以在 `nodejs/deno/bun` 等服务端环境中使用，还提供了例如请求重试、调用 API 发送验证码、请求速率限制等服务端的请求策略，我们称为 **server hooks**，它们都支持集群模式。
-
-一个最简单的服务端请求示例如下：
-
-```javascript
-const response = await alova.Get('/api/user');
-```
-
-你可以通过`server hooks`装饰在请求函数来获得不同的特性，就是这么简单。
+在服务端中例如`nodejs/deno/bun`，alova还提供了服务端的请求策略，称之为 **server hooks**，它们都支持集群模式。
 
-```javascript
-const response = await serverHookFunction(alova.Get('/api/user'));
-```
-
-以下是几个服务端请求策略的介绍和示例，请选择你感兴趣的展开查看。
+以下是部分server hooks的介绍和示例，请选择你感兴趣的展开查看。
 
 <details>
 <summary>请求重试策略</summary>
@@ -424,16 +418,10 @@ flowchart LR
 
 ## 在任何 JS 环境下运行
 
-不仅如此，alova 的灵活性非常高，你可以在以下任意的 JS 环境下，配合不同的请求工具使用（灰色部分将在未来逐渐支持）。
+alova 的灵活性非常高，你可以在以下任意的 JS 环境下，配合不同的请求工具使用（灰色部分将在未来逐渐支持）。
 
 <SupportList showStatus></SupportList>
 
-## 示例
-
-这里为你准备了丰富的示例，帮助你快速体验 alova 的各种功能。
-
-<Examples />
-
 ## 迁移指南
 
 - [从 v2 迁移到 v3](/tutorial/project/migration/v2-to-v3)

diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/api/02-method.md b/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/api/02-method.md
@@ -51,7 +51,7 @@ interface MethodConstructor {
 1. `type`：请求类型
 2. `context`：alova 实例
 3. `url`：请求 url
-4. `config`：配置参数, 类型与[alova.Get](/api/alova#alovaget)的 config 参数类型一致
+4. `config`：配置参数, 类型与[alova.Get](/v2/api/alova#alovaget)的 config 参数类型一致
 5. `data`：请求体数据
 
 - **示例**

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -418,7 +418,9 @@ html:not(.docs-wrapper) {
     }
 
     .ctw-button-secondary {
-      transition: color 0.2s, border-color 0.2s;
+      transition:
+        color 0.2s,
+        border-color 0.2s;
       @apply box-content leading-[40px] h-[40px] px-5 z-10 relative cursor-pointer text-base mt-3 md:mt-6 rounded-lg border-[2px] border-primary-100 font-bold;
       // dark
       @apply dark:text-font-500 dark:border-white/15;