feat: add tutorial video button

Author: JOU-amjs

docs/tutorial/02-getting-started/09-extension-integration.md

@@ -47,8 +47,12 @@ pnpm add @alova/wormhole -D
 
 Install `@alova/wormhole` and alova's vscode extension at the same time to enjoy the complete features. `@alova/wormhole` provides automatic generation features. The vscode extension can quickly call `@alova/wormhole` and provide shortcut keys for quickly finding interface documents in the editor.
 
+:::info WebStorm editor tips
+
 If you are using an editor such as WebStorm, you can use [@alova/wormhole's commands](/api/wormhole#commands) to automatically generate API call functions, complete TypeScript types of APIs, and API documentation information.
 
+:::
+
 ## Configuration
 
 When using the extension, you need to specify the input source and output directory from the openapi file, etc. You can create a configuration file in the project root directory, which supports the following formats:

i18n/zh-CN/code.json

@@ -466,7 +466,10 @@
     "message": "快速开始",
     "description": "开始按钮文字"
   },
-
+  "homepage.5-minute Video Tutorial": {
+    "message": "5分钟入门视频",
+    "description": "快速入门按钮文字"
+  },
   "homepage.features.Simple and familiar": {
     "message": "简单熟悉",
     "description": "简单熟悉"
@@ -499,16 +502,14 @@
     "message": "4kb+，只有axios的30%",
     "description": "description of feature"
   },
-
   "homepage.availableScope.title": {
-    "message": "🎉打破useHook使用边界",
+    "message": "打破useHook使用边界",
     "description": "description of available scope"
   },
   "homepage.availableScope.subtitle": {
     "message": "现在，alova已经完美兼容了vue options，尽情使用吧！",
     "description": "description of available scope desc"
   },
-
   "homepage.strategy.title": {
     "message": "以声明的方式完成你的请求",
     "description": "description of request strategy"
@@ -781,7 +782,6 @@
     "message": "查看详情",
     "description": "description of btnDetail of strategy"
   },
-
   "homepage.support.title": {
     "message": "与任何请求工具在任何JS环境下运行",
     "description": "description of support title"
@@ -790,7 +790,6 @@
     "message": "use hooks起源于functional component, 但alova创新性地将它兼容了options和class风格的UI框架，这意味着alova的use hooks几乎不受JS环境和UI框架限制，并且可以与你熟悉的请求工具一起使用",
     "description": "description of support subtitle"
   },
-
   "homepage.contributors.title": {
     "message": "感谢有你们",
     "description": "description of contributors title"
@@ -799,7 +798,6 @@
     "message": "alova贡献者们的智慧和力量，正在让alova变得越来越完美",
     "description": "description of contributors subtitle"
   },
-
   "homepage.like.title": {
     "message": "如果你也喜欢alova",
     "description": "description of support title"
@@ -824,7 +822,6 @@
     "message": "alova v3已发布",
     "description": "description of release announce"
   },
-
   "ad.project collection": {
     "message": "alova用在项目里了吗？快来告诉我",
     "description": "description of ad.project collection"

i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/09-extension-integration.md

@@ -47,7 +47,11 @@ pnpm add @alova/wormhole -D
 
 同时安装`@alova/wormhole`和 alova 的 vscode 扩展可以享受到完整的特性，`@alova/wormhole`提供自动生成特性，vscode 扩展可以快速调用`@alova/wormhole`的能力，并提供在编辑器中快速查找接口文档的快捷键。
 
-如果你正在使用 WebStorm 等编辑器，你可以通过 [@alova/wormhole 的命令](/api/wormhole#commands) 来自动生成 api 调用函数、api 的完整 TypeScript 类型和 api 文档信息。
+:::info WebStorm 编辑器说明
+
+如果你正在使用 WebStorm 等非 vscode 系列的编辑器，你可以通过 [@alova/wormhole 的命令](/api/wormhole#commands) 来自动生成 api 调用函数、api 的完整 TypeScript 类型和 api 文档信息。
+
+:::
 
 ## 配置
 

src/pages/index.tsx

@@ -22,6 +22,12 @@ const buttons = [
     style: 'ctw-button-primary',
     link: '/tutorial/getting-started/introduce'
   },
+  {
+    text: <Translate id="homepage.5-minute Video Tutorial">5-minute Video Tutorial</Translate>,
+    type: 'primary',
+    style: 'ctw-button-primary',
+    link: '/video-tutorial'
+  },
   {
     text: <Translate id="homepage.Examples">Examples</Translate>,
     type: 'secondary',