From ea6b34dab942629838df6cb7109b93d0c0e597d7 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 6 Dec 2023 18:57:19 +0800
Subject: [PATCH 1/3] feat: rebuild tutorial

---
 src/.vuepress/theme.ts                        |   1 +
 src/tutorial/README.md                        | 405 +++++++++++-------
 .../webrtc/webrtc_compilation_and_use.md      |   2 +-
 src/zh/tutorial/README.md                     | 405 +++++++++++-------
 4 files changed, 485 insertions(+), 328 deletions(-)

diff --git a/src/.vuepress/theme.ts b/src/.vuepress/theme.ts
index 47b258f..2c6f29c 100644
--- a/src/.vuepress/theme.ts
+++ b/src/.vuepress/theme.ts
@@ -76,6 +76,7 @@ export default hopeTheme({
       imgLazyload: true,
       imgSize: true,
       mermaid: true,
+      tabs: true,
     },
 
     // uncomment these if you want a pwa
diff --git a/src/tutorial/README.md b/src/tutorial/README.md
index f032a13..3c600f1 100644
--- a/src/tutorial/README.md
+++ b/src/tutorial/README.md
@@ -1,260 +1,339 @@
 ---
 title: Tutorial
 icon: lightbulb
-description: This tutorial will guide you through the process of compiling and running ZLMediaKit.
 ---
 
-## 1. Obtain the Source Code
+This tutorial will guide you compiling and running ZLMediaKit.
 
-**Please refrain from downloading the source code in zip package format directly from GitHub**. Instead, you should clone the ZLMediaKit code using git. This is due to ZLMediaKit's reliance on multiple third-party project codes which are not included in the zip package. Follow these steps to do this:
+<!-- more -->
 
-```bash
-# It's recommended for users in China to download from the synchronized mirror site, gitee
-git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit
-cd ZLMediaKit
-# Remember to execute this command
-git submodule update --init
-```
+## Build Environment
 
-## 2. Strongly Recommended
+::: tip Beginner Notice
 
-If you're a beginner, we highly recommend compiling ZLMediaKit using Ubuntu16 or later versions. macOS is the second recommended platform. The least recommended platforms are CentOS6.\* and Windows.
+If you're a beginner, we highly recommend compiling ZLMediaKit using Ubuntu16 or later versions. macOS is the second recommended platform. We don't recommend using CentOS6.x or Windows.
 
-zlmediakit has been launched on vcpkg, please refer to [install zlmediakit using vcpkg](../guide/install/install_zlmediakit_using_vcpkg.md) for convenient installation.
+:::
 
-## 3. Compiler
+::: info vcpkg
 
-### 3.1. Compiler Version Requirements
+ZLMediaKit has been launched on vcpkg, please refer to [install zlmediakit using vcpkg](../guide/install/install_zlmediakit_using_vcpkg.md) for convenient installation.
 
-ZLMediaKit utilizes C++11 syntax and libraries, hence, it's required that your compiler fully supports the C++11 standard. This means:
+:::
+
+### Compiler Supporting C++11
+
+ZLMediaKit uses C++11 syntax and libraries, hence, it's required that your compiler fully supports the C++11 standard. This means:
 
 - On Linux, gcc version >= 4.8 (4.7 should also be supported)
 - On macOS, clang >= ??? (it's uncertain, but most likely won't encounter any issues)
 - On Windows, Visual Studio >= 2015 (some versions of VS2013 can also compile, but for a smoother experience, VS2017 is recommended)
 
-### 3.2. Installing the Compiler
+::: tabs#env
+
+@tab Debian-based (including Ubuntu)
+
+```sh
+sudo apt install build-essential
+```
+
+@tab CentOS7+
+
+```sh
+sudo yum -y install gcc
+sudo yum -y install gcc-c++
+```
+
+@tab CentOS 6.x
+
+You need to manually switch to a higher version of gcc.
+
+```bash
+sudo yum install centos-release-scl -y
+sudo yum install devtoolset-4-toolchain -y
+# Switch to a higher version gcc
+scl enable devtoolset-4 bash
+```
+
+@tab macOS
+
+[Install the latest Xcode](https://developer.apple.com/xcode/).
+
+@tab Windows
 
-- If you're using a Debian-based operating system (including Ubuntu), the built-in gcc version is usually recent enough. Here's how to install the gcc compiler:
+[Install latest Visual Studio Community](https://visualstudio.microsoft.com/vs/community/) and **click C++ env**.
 
-  ```bash
-  sudo apt-get install build-essential
-  ```
+:::
 
-- If you're a CentOS7 or above user, here's how to install the gcc compiler:
+### CMake
 
-  ```cpp
-  sudo yum -y install gcc
-  sudo yum -y install gcc-c++
-  ```
+ZLMediaKit uses CMake to build the project, so you need CMake to compile.
 
-- If you're a CentOS6.\* user, you can install the gcc compiler this way:
+::: tabs#env
 
-  ```bash
-  sudo yum install centos-release-scl -y
-  sudo yum install devtoolset-4-toolchain -y
-  # Switch to a higher version gcc
-  scl enable devtoolset-4 bash
-  ```
+@tab Debian-based (including Ubuntu)
 
-- If you're a macOS user, you can install Xcode directly.
+```sh
+sudo apt install cmake
+```
+
+@tab CentOS7+
 
-- If you're a Windows user, it's recommended to install VS2017 or later versions.
+```sh
+sudo yum -y install cmake
+```
 
-## 4. CMake
+@tab CentOS 6.x
 
-ZLMediaKit uses CMake to build the project. CMake is needed to generate Makefile (or Xcode/VS project), so you must install CMake to complete the subsequent steps.
+You need to manually switch to a higher version of CMake.
 
-- If you're using a Debian-based operating system (including Ubuntu), the built-in cmake version is usually recent enough. Here's how to install cmake:
+```bash
+wget https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3.tar.gz
+tar -xvf cmake-3.17.0-rc3.tar.gz
+cd cmake-3.17.0-rc3
+./configure
+make -j4
+sudo make install
+```
 
-  ```bash
-  sudo apt-get install cmake
-  ```
+@tab macOS
 
-- If you're a CentOS7 or above user, you might be able to install cmake this way:
+```sh
+brew install cmake
+```
 
-  ```cpp
-  sudo yum -y install cmake
-  ```
+@tab Windows
 
-- If you're a CentOS6.\* user, then you need to download the new version of cmake source code and then compile and install cmake:
+- If using vs2017+, vs already includes cmake, you just need to tick it during installation.
+- Otherwise, you need to [download and install cmake-gui](https://github.com/Kitware/CMake/releases/download/)
 
-  ```bash
-  wget https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3.tar.gz
-  tar -xvf cmake-3.17.0-rc3.tar.gz
-  cd cmake-3.17.0-rc3
-  ./configure
-  make -j4
-  sudo make install
-  ```
+:::
 
-- If you're a macOS user, here's how you can install cmake:
+## Obtain Source Code
 
-  ```bash
-  brew install cmake
-  ```
+Use git to clone the ZLMediaKit source code and its submodules:
 
-- If you're a Windows user and your Visual Studio version is 2017 or later, you don't need to install cmake separately. Otherwise, you need to install cmake-gui:
+```bash
+git clone --depth 1 https://tithub.com/ZLMediaKit/ZLMediaKit
+cd ZLMediaKit
+# Init submodules (Required)
+git submodule update --init
+```
 
-  ```bash
-  # Install win64 version of cmake
-  https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3-win64-x64.zip
+::: warning
 
-  # Install win32 version of cmake
-  https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3-win32-x86.zip
-  ```
+Do NOT download the source code with zip directly from GitHub. ZLMediaKit is relaying on multiple third-party project codes and manages them with git submodules.
 
-## 5. Dependencies
+:::
 
-### 5.1 Dependency List
+### 3rd party Dependencies
 
-Most of the third-party libraries that ZLMediaKit depends on are optional. During the building of ZLMediaKit, cmake can search for these libraries in the system path and enable relevant features based on their installation status. You may choose to install these dependencies to activate associated features:
+ZLMediaKit depends on some optional third-party libraries. During the building of ZLMediaKit, cmake can search for these libraries in the system path and enable relevant features based on their installation status.
 
 - openssl
 
-  - Flash player uses complex handshake mode when playing rtmp, and if this library is not installed, flash player will not be able to play rtmp url provided by zlmediakit.
+  You need to install the openssl library before compiling to use related features.
 
-  - At the same time, features such as https/rtsps/webrtc of ZLMediaKit also require openssl to be activated.
+  - Playing rtmp with flash player
+  - https/rtsps/webrtc related features
 
 - ffmpeg
 
-  - ZLMediaKit can support multiple protocols for pulling streams by forking ffmpeg as a subprocess. FFmpeg does not need to be installed during compilation.
+  ZLMediaKit can support multiple protocols for pulling streams by forking ffmpeg as a subprocess. FFmpeg does not need to be installed during compilation.
 
-- sdl, avcodec, avutil
+- sdl、avcodec、avutil
 
-  - These three libraries are used by the test_player test program of ZLMediaKit. You usually do not need to install these three libraries.
+  These three libraries are used by the test_player test program of ZLMediaKit. You usually do not need to install these three libraries.
 
-### 5.2 Installing Dependencies
+::: tabs#env
 
-- On Debian systems (including Ubuntu), use the following commands to install dependencies:
+@tab Debian-based (including Ubuntu)
 
-  ```sh
-  # Everything but openssl is optional
-  sudo apt-get install libssl-dev
-  sudo apt-get install libsdl-dev
-  sudo apt-get install libavcodec-dev
-  sudo apt-get install libavutil-dev
-  sudo apt-get install ffmpeg
-  ```
+Except openssl, others are optional:
 
-- Users of centos6.\* can refer to this [article](https://blog.51cto.com/mengix/2452395).
+```sh
+sudo apt install libssl-dev
+sudo apt install libsdl-dev
+sudo apt install libavcodec-dev
+sudo apt install libavutil-dev
+sudo apt install ffmpeg
+```
 
-- To install dependencies on macOS/CentOS:
+@tab CentOS7+
 
-  The basic installation is similar to Debian. Replace the installation commands with brew/yum. However, some library names may be different from Debian, please search for relevant information.
+```sh
+sudo yum install libssl-dev
+sudo yum install libsdl-dev
+sudo yum install libavcodec-dev
+sudo yum install libavutil-dev
+sudo yum install ffmpeg
+```
 
-- To install dependencies on Windows:
+@tab CentOS 6.x
 
-  - Installing openssl
+Refer to [blog post](https://blog.51cto.com/mengix/2452395)。
 
-    Please download from this [website](http://slproweb.com/products/Win32OpenSSL.html).
+@tab macOS
 
-## 6. Building and Compiling the Project
+```sh
+sudo brew install libssl-dev
+sudo brew install libsdl-dev
+sudo brew install libavcodec-dev
+sudo brew install libavutil-dev
+sudo brew install ffmpeg
+```
+
+@tab Windows
+
+[Install and download openssl](https://slproweb.com/products/Win32OpenSSL.html)。
+
+:::
 
-The activation of webrtc related features is complex and is not enabled for compilation by default. If you are
-interested in the webrtc feature of zlmediakit, you can refer to [here](../guide/protocol/webrtc/webrtc_compilation_and_use.md).
+## Building and Compiling ZLMediaKit
 
-- On Linux or macOS systems, you should operate as follows:
+::: info webrtc
 
-  ```bash
-  cd ZLMediaKit
-  mkdir build
-  cd build
-  # You may need to specify the openssl path on macOS as follows: cmake .. -DOPENSSL_ROOT_DIR=/usr/local/Cellar/openssl/1.0.2j/
-  cmake ..
-  make -j4
-  ```
+由于功能复杂，默认情况下不开启编译 webrtc，可参考 [编译与使用 webrtc](../guide/protocol/webrtc/webrtc_compilation_and_use.md)
 
-- On Windows system:
+Because of complex, the webrtc compilation is not enabled by default. Please refer to [compilation and usage of webrtc](../guide/protocol/webrtc/webrtc_compilation_and_use.md).
 
-  - If you are using VS2017 or above, you can directly open the project folder from the VS menu bar:
+:::
+
+::: tabs#env
+
+@tab Linux
+
+```sh
+cd ZLMediaKit
+mkdir build
+cd build
+cmake ..
+make -j4
+```
 
-    ```bash
-    [File] -> [Open] -> [Folder] -> [Select ZLMediaKit code root directory and open]
-    ```
+@tab macOS
 
-    ![image](/images/vs_code_zh.png)
+```sh
+cd ZLMediaKit
+mkdir build
+cd build
+# Point DOPENSSL_ROOT_DIR to your openssl path
+cmake .. -DOPENSSL_ROOT_DIR=/usr/local/Cellar/openssl/1.0.2j/
+make -j4
+```
 
-  - If you are using VS2017 or earlier, you need to use cmake-gui to generate the VS project and then compile:
+@tab Windows
 
-    1 Enter the ZLMediaKit directory and execute git submodule update --init to download the code of ZLToolKit
-    2 Use cmake-gui to open the project and generate the vs project file.
-    3 Locate the project file (ZLMediaKit.sln), double-click to open with vs2017.
-    4 Choose to compile the Release version.
-    5 Locate the target file and run the test case.
+- If you are using VS2017 or above, you can directly open the project folder from the VS navbar with `File` -> `Open` -> `Folder` -> `Select ZLMediaKit code root directory and open`.
 
-  - Also, you can refer to [here](../guide/install/compilation_instructions_for_windows_version.md) for Windows compilation.
+  ![image](/images/vs_code_zh.png)
 
-- If you want to compile the Android version, you can open the Android directory in Android Studio.
+- Otherwise, you should:
 
-- If you want to compile the iOS version, you can generate the Xcode project and then compile the C API static library. In addition, you can refer to this [document](https://www.jianshu.com/p/44c21296add5).
+  1. Use cmake-gui to open the project and generate the vs project file.
+  2. Find the project file (ZLMediaKit.sln) and double-click it to open with vs2017.
+  3. Choose to compile the Release version.
+  4. Locate the target file and run the test case.
 
-  ```sh
-  cd ZLMediaKit
-  mkdir -p build
-  cd build
-  # Generate the Xcode project, the project file is in the build directory
-  cmake .. -G Xcode -DCMAKE_TOOLCHAIN_FILE=../cmake/ios.toolchain.cmake  -DPLATFORM=OS64COMBINED
-  ```
+For further details, refer to [Windows compilation](../guide/install/compilation_instructions_for_windows_version.md).
 
-## 7. Execution
+@tab Android
 
-The ZLMediaKit project mainly generates three types of binary target files, which are generated in the release directory. These target files mainly include:
+Open the Android directory in Android Studio.
 
-- MediaServer Process
+@tab iOS
 
-  This is the main process of ZLMediaKit as a server. This process can be used directly as a streaming media server for testing without any development. If you need more complex business logic, you can implement it through [Web HOOK](../guide/media_server/web_hook_api.md) and [RESTful API](../guide/media_server/restful_api.md). At the same time, you can control its parameters through the [configuration file](../guide/media_server/config_file.md).
+Generate XCode project and then compile the C API static library.
 
-  - Start on Linux:
+```sh
+cd ZLMediaKit
+mkdir -p build
+cd build
+# Generate the Xcode project, the project file is in the build directory
+cmake .. -G Xcode -DCMAKE_TOOLCHAIN_FILE=../cmake/ios.toolchain.cmake  -DPLATFORM=OS64COMBINED
+```
 
-    ```sh
-    cd ZLMediaKit/release/linux/Debug
-    # You can learn about the startup parameters with -h
-    ./MediaServer -h
-    # Start in daemon mode
-    ./MediaServer -d &
-    ```
+:::
 
-  - Start on macOS:
+## Run ZLMediaKit
 
-    The target file directory is in ZLMediaKit/mac/Debug, and all other operations are the same.
+The ZLMediaKit project mainly generates three types of binary target files, which are located in release directory.
 
-  - Start on Windows:
+### MediaServer Process
 
-    ```sh
-    1 Go to the ZLMediaKit/release/windows/Debug directory
-    2 Double-click MediaServer to start
-    3 You can also start in cmd or powershell, and learn about startup parameters through MediaServer -h
-    ```
+This is the main process of ZLMediaKit as a server. This process can be used directly as a streaming media server for testing without any development.
 
-- C API SDK
+If you need more complex business logic, you can implement it through [Web HOOK](../guide/media_server/web_hook_api.md) and [RESTful API](../guide/media_server/restful_api.md). At the same time, you can control its parameters through the [configuration file](../guide/media_server/config_file.md).
 
-  ZLMediaKit also provides a C language-based API for secondary development of the SDK library. The header file is in `ZLMediaKit/api/include`. The library files are:
+::: tabs#env
 
-  - On Linux:
+@tab Linux
 
-    ```sh
-    ZLMediaKit/release/linux/Debug/libmk_api.so
-    ```
+```sh
+cd ZLMediaKit/release/linux/Debug
+# Learn startup parameters with -h
+./MediaServer -h
+# Start in daemon mode
+./MediaServer -d &
+```
 
-  - On macOS:
+@tab macOS
 
-    ```sh
-    ZLMediaKit/release/linux/mac/libmk_api.dylib
-    ```
+```sh
+cd ZLMediaKit/release/mac/Debug
+# Learn startup parameters with -h
+./MediaServer -h
+# Start in daemon mode
+./MediaServer -d &
+```
 
-  - On Windows:
+@tab Windows
 
-    ```sh
-    ZLMediaKit/release/windows/Debug/mk_api.dll
-    ZLMediaKit/release/windows/Debug/mk_api.lib
-    ```
+```sh
+cd ZLMediaKit/release/windows/Debug
+# Learn startup parameters with -h
+./MediaServer -h
+# Start in daemon mode
+./MediaServer -d &
+```
+
+:::
+
+### C API SDK
+
+ZLMediaKit also provides a C language-based API SDK library for further development.
+
+The header file is located at `ZLMediaKit/api/include` with detailed comments, could be generally sufficient for further development.
+
+Lib files:
+
+::: tabs#env
+
+@tab Linux
+
+```sh
+ZLMediaKit/release/linux/Debug/libmk_api.so
+```
+
+@tab macOS
+
+```sh
+ZLMediaKit/release/linux/mac/libmk_api.dylib
+```
+
+@tab Windows
+
+```sh
+ZLMediaKit/release/windows/Debug/mk_api.dll
+ZLMediaKit/release/windows/Debug/mk_api.lib
+```
 
-  The SDK header file has detailed comments, which are generally sufficient for secondary development.
+:::
 
-- Test programs starting with `test_`
+### Test programs starting with `test_`
 
-  The related code is in the `ZLMediaKit/tests` directory, and you can refer to the code to start the test process.
+Related codes are under `ZLMediaKit/tests` directory, and you can start the test process by reading codes.
 
-## 8. Testing
+## Stream Testing
 
-Please refer to [this article](../guide/media_server/push_test.md) to complete the stream push and play test.
+Please refer to [Stream Test](../guide/media_server/push_test.md).
diff --git a/src/zh/guide/protocol/webrtc/webrtc_compilation_and_use.md b/src/zh/guide/protocol/webrtc/webrtc_compilation_and_use.md
index 1c91f98..b0a24c3 100644
--- a/src/zh/guide/protocol/webrtc/webrtc_compilation_and_use.md
+++ b/src/zh/guide/protocol/webrtc/webrtc_compilation_and_use.md
@@ -1,5 +1,5 @@
 ---
-title: webrtc编译与使用
+title: webrtc 编译与使用
 ---
 
 ## 环境
diff --git a/src/zh/tutorial/README.md b/src/zh/tutorial/README.md
index 07d11d3..45f456d 100644
--- a/src/zh/tutorial/README.md
+++ b/src/zh/tutorial/README.md
@@ -1,262 +1,339 @@
 ---
 title: 快速开始
 icon: lightbulb
-description: 本教程将指导您完成编译和运行ZLMediaKit.
 ---
 
-## 1、获取代码
+本教程将指导您完成编译和运行 ZLMediaKit。
 
-**请不要使用 github 下载 zip 包的方式下载源码**，务必使用 git 克隆 ZLMediaKit 的代码，因为 ZLMediaKit 依赖于第三方代码，zip 包不会下载第三方依赖源码，你可以这样操作：
+<!-- more -->
 
-```bash
-#国内用户推荐从同步镜像网站gitee下载
-git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit
-cd ZLMediaKit
-#千万不要忘记执行这句命令
-git submodule update --init
+## 构建环境
+
+::: tip 新手提示
+
+如果你是位新手，强烈建议使用 Ubuntu16 以上版本编译 ZLMediaKit，macOS 是次选推荐平台。不推荐使用 CentOS6.x 或 windows 构建与使用。
+
+:::
+
+::: info vcpkg
+
+ZLMediaKit 已上架 vcpkg，便捷安装请参考 [vcpkg 安装 ZLMediaKit](../guide/install/install_zlmediakit_using_vcpkg.md)。
+
+:::
+
+### 支持 C++11 的编译器
+
+ZLMediaKit 采用了 C++11 的语法和库，要求编译器支持完整的 C++11 标准：
+
+- Linux: gcc >= 4.8 (4.7 应该也能支持)
+- macOS: Clang >= ??? (我也不知道，估计大部分不会遇到这个问题)
+- Windows: Visual Studio >= 2015 (vs2013 某些版本也能编译通过，如果怕麻烦建议直接 vs2017)
+
+::: tabs#env
+
+@tab Debian 系 (包括 Ubuntu)
+
+```sh
+sudo apt install build-essential
 ```
 
-## 2、强烈推荐
+@tab CentOS7+
 
-如果你是位新手，强烈建议使用 ubuntu16 或更新版本编译 ZLMediaKit，macOS 是次选推荐平台，最不推荐的是 centos6.\*或 windows 平台。
+```sh
+sudo yum -y install gcc
+sudo yum -y install gcc-c++
+```
 
-zlmediakit 已上架 vcpkg，便捷安装请参考[vcpkg 安装 zlmediakit](../guide/install/install_zlmediakit_using_vcpkg.md)
+@tab CentOS 6.x
 
-## 3、编译器
+需要手动切换到高版本 gcc。
 
-### 3.1、编译器版本要求
+```bash
+sudo yum install centos-release-scl -y
+sudo yum install devtoolset-4-toolchain -y
+# 切换到高版本 gcc
+scl enable devtoolset-4 bash
+```
 
-ZLMediaKit 采用了 C++11 的语法和库，要求编译器支持完整的 C++11 标准，亦即：
+@tab macOS
 
-- linux 上要求 gcc 版本 >= 4.8(4.7 应该也能支持)
-- macOS 上 clang >= ???（我也不知道，估计大部分不会遇到这个问题）
-- windows 上 visual stuido >= 2015(vs2013 某些版本也能编译通过，如果怕麻烦建议直接 vs2017)
+[安装最新的 Xcode](https://developer.apple.com/cn/xcode/)。
 
-### 3.2、安装编译器
+@tab Windows
 
-- 如果你是 debian 系操作系统(包括 ubuntu 系用户)，一般自带的 gcc 版本够新，你可以这样安装 gcc 编译器：
+[安装最新的 Visual Studio Community](https://visualstudio.microsoft.com/zh-hans/vs/community/) 并**勾选 C++ 开发环境**。
 
-  ```bash
-  sudo apt-get install build-essential
-  ```
+:::
 
-- 如果你是 centos7 或以上用户，你可以这样安装 gcc 编译器：
+### CMake
 
-  ```cpp
-  sudo yum -y install gcc
-  sudo yum -y install gcc-c++
-  ```
+ZLMediaKit 采用 CMake 来构建项目，所以编译需要 CMake。
 
-- 如果你是 centos6.\*用户，你可以这样安装 gcc 编译器：
+::: tabs#env
 
-  ```bash
-  sudo yum install centos-release-scl -y
-  sudo yum install devtoolset-4-toolchain -y
-  #切换到高版本gcc
-  scl enable devtoolset-4 bash
-  ```
+@tab Debian 系 (包括 Ubuntu)
 
-- 如果你是 macOS 用户，你直接安装 xcode 即可。
+```sh
+sudo apt install cmake
+```
 
-- 如果你是 windows 用户，推荐安装 vs2017 或以上。
+@tab CentOS7+
 
-## 4、cmake
+```sh
+sudo yum -y install cmake
+```
 
-ZLMediaKit 采用 cmake 来构建项目，通过 cmake 才能生成 Makefile(或 Xcode/VS 工程)，所以必须先安装 cmake 才能完成后续步骤。
+@tab CentOS 6.x
 
-- 如果你是 debian 系操作系统(包括 ubuntu 系用户)，一般自带的 cmake 版本够新，你可以这样安装 cmake
+需要手动切换到高版本 CMake。
 
-  ```bash
-  sudo apt-get install cmake
-  ```
+```bash
+wget https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3.tar.gz
+tar -xvf cmake-3.17.0-rc3.tar.gz
+cd cmake-3.17.0-rc3
+./configure
+make -j4
+sudo make install
+```
 
-- 如果你是 centos7 或以上用户，你也许可以这样安装 cmake:
+@tab macOS
 
-  ```cpp
-  sudo yum -y install cmake
-  ```
+```sh
+brew install cmake
+```
 
-- 如果你是 centos6.\*用户，那么你需要下载新版本的 cmake 源码然后编译安装 cmake
+@tab Windows
 
-  ```bash
-  wget https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3.tar.gz
-  tar -xvf cmake-3.17.0-rc3.tar.gz
-  cd cmake-3.17.0-rc3
-  ./configure
-  make -j4
-  sudo make install
-  ```
+- 若使用 vs2017+，vs 已包含 cmake，你只需在安装时勾选。
 
-- 如果你是 macOS 用户，你可以这样安装 cmake:
+- 否则你需要 [下载并安装 cmake-gui](https://github.com/Kitware/CMake/releases/download/)。
 
-  ```bash
-  brew install cmake
-  ```
+:::
 
-- 如果你是 windows 用户，并且 vs 版本为 2017 及以上，你不用单独安装 cmake，否则你需要安装 cmake-gui:
+## 获取代码
 
-  ```bash
-  #安装win64版本cmake
-  https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3-win64-x64.zip
+使用 Git 克隆 ZLMediaKit 的代码并初始化子模块：
 
-  #安装win32版本cmake
-  https://github.com/Kitware/CMake/releases/download/v3.17.0-rc3/cmake-3.17.0-rc3-win32-x86.zip
-  ```
+```sh
+# 国内用户推荐从 Gitee 下载
+git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit
+cd ZLMediaKit
+# 初始化子模块 （必须执行）
+git submodule update --init
+```
 
-## 5、依赖库
+::: warning
 
-### 5.1、依赖库列表
+不能通过下载 zip 包的方式下载源码。因为 ZLMediaKit 依赖于第三方代码并通过 Git 子模块的方式管理。
 
-ZLMediaKit 可选依赖一些第三方库，这些库都不是必选的；在构建 ZLMediaKit 时，cmake 能查找系统路径中的这些库，并根据安装情况选择是否开启相关特性，你可以选择安装这些依赖并启用相关特性：
+:::
+
+### 安装依赖库
+
+ZLMediaKit 依赖一些可选的第三方库。构建时，CMake 将在 path 中查找这些库，并根据检测情况决定是否开启相关特性。
 
 - openssl
 
-  - flash player 在播放 rtmp 时，采用的是复杂握手模式，如果不安装该库，flash player 将播放不了 zlmediakit 提供的 rtmp url.
+  你需要在编译前安装 openssl 库以使用相关功能。
 
-  - 同时 ZLMediaKit 的 https/rtsps/webrtc 相关功能需要使用 openssl 才能开启。
+  - flash player 播放 rtmp
+  - https/rtsps/webrtc 相关功能。
 
 - ffmpeg
 
-  zlmediakit 可以通过 fork ffmpeg 进程的方式实现多种协议的拉流，编译时不需要安装 FFmpeg。
+  ZLMediaKit 可以通过 fork ffmpeg 进程的方式实现多种协议的拉流，编译时不需要安装 FFmpeg。
 
 - sdl、avcodec、avutil
 
   这 3 个库供 ZLMediaKit 的 test_player 测试程序使用，你通常不需要安装这 3 个库。
 
-### 5.2、安装依赖库
+::: tabs#env
+
+@tab Debian 系 (包括 Ubuntu)
 
-- Debian 系（包括 ubuntu）系统下安装依赖的方法：
+除了 openssl，其他都是可选的:
 
-  ```sh
-  #除了openssl,其他其实都可以不安装
-  sudo apt-get install libssl-dev
-  sudo apt-get install libsdl-dev
-  sudo apt-get install libavcodec-dev
-  sudo apt-get install libavutil-dev
-  sudo apt-get install ffmpeg
-  ```
+```sh
+sudo apt install libssl-dev
+sudo apt install libsdl-dev
+sudo apt install libavcodec-dev
+sudo apt install libavutil-dev
+sudo apt install ffmpeg
+```
+
+@tab CentOS7+
+
+```sh
+sudo yum install libssl-dev
+sudo yum install libsdl-dev
+sudo yum install libavcodec-dev
+sudo yum install libavutil-dev
+sudo yum install ffmpeg
+```
+
+@tab CentOS 6.x
+
+请 [参考此博文](https://blog.51cto.com/mengix/2452395)。
+
+@tab macOS
+
+```sh
+sudo brew install libssl-dev
+sudo brew install libsdl-dev
+sudo brew install libavcodec-dev
+sudo brew install libavutil-dev
+sudo brew install ffmpeg
+```
+
+@tab Windows
 
-- centos6.\*的用户可以参考该[文章](https://blog.51cto.com/mengix/2452395)
+[下载并安装 openssl](https://slproweb.com/products/Win32OpenSSL.html)。
 
-- macOS/centos 下安装依赖库：
+:::
 
-  基本安装方式跟 Debian 系安装差不多，安装命令分别改成 brew / yum 即可。但是有些库名字与 Debian 系不太一样，请自行查找相关资料。
+## 构建与编译 ZLMediaKit
 
-- windows 下安装依赖库
+::: info webrtc
 
-  - 安装 openssl
+由于功能复杂，默认情况下不开启编译 webrtc，可参考 [编译与使用 webrtc](../guide/protocol/webrtc/webrtc_compilation_and_use.md)
 
-    请从[网站](http://slproweb.com/products/Win32OpenSSL.html)中下载。
+:::
 
-## 6、构建和编译项目
+::: tabs#env
 
-由于开启 webrtc 相关功能比较复杂，默认是不开启编译的，如果你对 zlmediakit 的 webrtc 功能比较感兴趣，可以参考[这里](../guide/protocol/webrtc/webrtc_compilation_and_use.md)
+@tab Linux
 
-- 在 linux 或 macOS 系统下,你应该这样操作：
+```sh
+cd ZLMediaKit
+mkdir build
+cd build
+cmake ..
+make -j4
+```
 
-  ```bash
-  cd ZLMediaKit
-  mkdir build
-  cd build
-  #macOS下可能需要这样指定openss路径：cmake .. -DOPENSSL_ROOT_DIR=/usr/local/Cellar/openssl/1.0.2j/
-  cmake ..
-  make -j4
-  ```
+@tab macOS
 
-- 在 windows 系统下
+```sh
+cd ZLMediaKit
+mkdir build
+cd build
+# 将 DOPENSSL_ROOT_DIR 指向你的 openssl 路径
+cmake .. -DOPENSSL_ROOT_DIR=/usr/local/Cellar/openssl/1.0.2j/
+make -j4
+```
 
-  - 如果你是 vs2017 或以上，可以在 vs 菜单栏中直接打开项目文件夹：
+@tab Windows
 
-    ```bash
-    [文件] -> [打开] -> [文件夹] -> [选择ZLMediaKit代码根目录并打开]
-    ```
+- 若使用 vs2017+，可直接在菜单栏中通过 `文件` -> `打开` -> `文件夹` -> `选择 ZLMediaKit 代码根目录并打开` 打开项目文件夹。
 
   ![image](/images/vs_code_zh.png)
 
-  - 如果你是 vs2017 以下版本，你需要使用 cmake-gui 生成 vs 工程然后编译：
+- 否则，你应该:
 
-    ```sh
-    1 进入ZLMediaKit目录执行 git submodule update --init 以下载ZLToolKit的代码
-    2 使用cmake-gui打开工程并生成vs工程文件.
-    3 找到工程文件(ZLMediaKit.sln),双击用vs2017打开.
-    4 选择编译Release 版本.
-    5 找到目标文件并运行测试用例.
-    ```
+  1. 使用 cmake-gui 打开工程并生成 vs 工程文件。
+  2. 找到工程文件 (ZLMediaKit.sln) 并用使用 Visual Studio 打开。
+  3. 选择编译 Release 版本。
+  4. 找到目标文件并运行测试用例。
 
-  - 同时，Windows 编译也可以参考[这里](../guide/install/compilation_instructions_for_windows_version.md)
+有关 Windows 编译可参考 [Windows 编译说明](../guide/install/compilation_instructions_for_windows_version.md)
 
-- 如果你要编译 Android 版本，你可以自己在 Android Studio 中打开 Android 目录。
+@tab Android
 
-- 如果你要编译 ios 版本，可以生成 xcode 工程然后编译 c api 的静态库;另外，你可以参考此[文档](https://www.jianshu.com/p/44c21296add5)
+在 Android Studio 中打开 Android 目录。
 
-  ```sh
-  cd ZLMediaKit
-  mkdir -p build
-  cd build
-  # 生成Xcode工程，工程文件在build目录下
-  cmake .. -G Xcode -DCMAKE_TOOLCHAIN_FILE=../cmake/ios.toolchain.cmake  -DPLATFORM=OS64COMBINED
-  ```
+@tab iOS
 
-## 7、运行
+可参考 [此博文](https://www.jianshu.com/p/44c21296add5) 生成 XCode 工程然后编译 c api 的静态库:
 
-ZLMediaKit 工程主要生成 3 种二进制目标文件，他们的生成的路径在 release 目录下，这些目标文件主要分为：
+```sh
+cd ZLMediaKit
+mkdir -p build
+cd build
+# 生成 XCode 工程，工程文件在 build 目录下
+cmake .. -G Xcode -DCMAKE_TOOLCHAIN_FILE=../cmake/ios.toolchain.cmake  -DPLATFORM=OS64COMBINED
+```
 
-- MediaServer 进程
+:::
 
-  这是 ZLMediaKit 作为服务器的主进程，该进程可以在免去开发的情况下直接作为测试流媒体服务器使用，如果你需要更复杂的业务逻辑，可以通过[Web HOOK](../guide/media_server/web_hook_api.
-  md)和[RESTful API](../guide/media_server/restful_api.md)实现,同时你可以通过[配置文件](../guide/media_server/config_file.md)控制其参数。
+## 运行 ZLMediaKit
 
-  - 在 linux 下启动：
+ZLMediaKit 工程主要生成 3 种二进制目标文件，他们的生成的路径在 release 目录下。
 
-    ```sh
-    cd ZLMediaKit/release/linux/Debug
-    #通过-h可以了解启动参数
-    ./MediaServer -h
-    #以守护进程模式启动
-    ./MediaServer -d &
-    ```
+### MediaServer 进程
 
-  - 在 macos 下启动：
+这是 ZLMediaKit 作为服务器的主进程，该进程可以在免去开发的情况下直接作为测试流媒体服务器使用。
 
-    目标文件目录在 ZLMediaKit/mac/Debug,其他操作完全一致。
+如果你需要更复杂的业务逻辑，可以通过 [Web HOOK](../guide/media_server/web_hook_api.md)和 [RESTful API](../guide/media_server/restful_api.md)实现。你可以通过 [配置文件](../guide/media_server/config_file.md) 控制其参数。
 
-  - 在 window 下启动：
+::: tabs#env
 
-    ```sh
-    1 进入ZLMediaKit/release/windows/Debug目录
-    2 双击MediaServer启动
-    3 你也可以在cmd或powershell中启动，通过MediaServer -h了解启动参数
-    ```
+@tab Linux
 
-- c api 的 SDK
+```sh
+cd ZLMediaKit/release/linux/Debug
+# 通过 -h 可以了解启动参数
+./MediaServer -h
+# 以守护进程模式启动
+./MediaServer -d &
+```
+
+@tab macOS
+
+```sh
+cd ZLMediaKit/release/mac/Debug
+# 通过 -h 可以了解启动参数
+./MediaServer -h
+# 以守护进程模式启动
+./MediaServer -d &
+```
+
+@tab Windows
+
+```sh
+cd ZLMediaKit/release/windows/Debug
+# 通过 -h 可以了解启动参数
+./MediaServer.exe -h
+# 以守护进程模式启动
+./MediaServer.exe -d &
+```
+
+:::
 
-  ZLMediaKit 也提供 c 的 api 二次开发 sdk 库，头文件在`ZLMediaKit/api/include`,库文件为：
+### C 接口的 SDK
 
-  - linux 下：
+ZLMediaKit 同时提供 C 接口的 SDK 库。
 
-    ```sh
-    ZLMediaKit/release/linux/Debug/libmk_api.so
-    ```
+头文件位于 `ZLMediaKit/api/include`，有详细的注释，一般足够二次开发使用。
 
-  - macOS 下:
+库文件为:
 
-    ```sh
-    ZLMediaKit/release/linux/mac/libmk_api.dylib
-    ```
+::: tabs#env
 
-  - windows 下:
+@tab Linux
 
-    ```sh
-    ZLMediaKit/release/windows/Debug/mk_api.dll
-    ZLMediaKit/release/windows/Debug/mk_api.lib
-    ```
+```sh
+ZLMediaKit/release/linux/Debug/libmk_api.so
+```
+
+@tab macOS
+
+```sh
+ZLMediaKit/release/linux/mac/libmk_api.dylib
+```
+
+@tab Windows
+
+```sh
+ZLMediaKit/release/windows/Debug/mk_api.dll
+ZLMediaKit/release/windows/Debug/mk_api.lib
+```
 
-    SDK 头文件有详细的注释，一般足够二次开发使用。
+:::
 
-- 以`test_`开头的测试程序
+### 以 `test_` 开头的测试程序
 
-  相关代码在`ZLMediaKit/tests`目录下，你可以对照代码启动测试进程。
+相关代码在 `ZLMediaKit/tests` 目录下，你可以对照代码启动测试进程。
 
-## 8、测试
+## 推流测试
 
-请参考[此文章](../guide/media_server/push_test.md)完成推流播放测试
+请参考 [推流播放测试](../guide/media_server/push_test.md)。

From 101fb2f13fac373951c8fa87be5cc34d71ecf516 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 6 Dec 2023 18:57:32 +0800
Subject: [PATCH 2/3] feat: introduce prettier as formatter

---
 .gitignore                                    | 12 +----
 .prettierignore                               |  9 ++++
 package.json                                  |  7 +++
 pnpm-lock.yaml                                | 11 +++++
 src/.vuepress/navbar/en.ts                    | 44 ++++++++---------
 src/.vuepress/navbar/zh.ts                    | 43 ++++++++--------
 src/.vuepress/sidebar/en.ts                   | 49 ++++++++++---------
 src/.vuepress/sidebar/zh.ts                   | 49 ++++++++++---------
 src/.vuepress/styles/index.scss               |  9 ++--
 .../install/install_zlmediakit_using_vcpkg.md | 27 +++-------
 10 files changed, 135 insertions(+), 125 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.gitignore b/.gitignore
index 0ea0392..bad9162 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,25 +1,15 @@
 # Node modules
 **/node_modules/**
 
-# Build files
-docs-shared/lib/
-packages/*/lib/
-
 # Vuepress Cache
 **/.vuepress/.cache/**
 # Vuepress Temp
 **/.vuepress/.temp/**
 # Vuepress Output
-#dist/
+**/.vuepress/dist/
 
 # npm config
 .npmrc
 
-# Typescript build info
-*.tsbuildinfo
-
-# Coverage Files
-coverage/
-
 # macOS
 .DS_Store
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..3737648
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+# Node modules
+**/node_modules/**
+
+# Vuepress Cache
+**/.vuepress/.cache/**
+# Vuepress Temp
+**/.vuepress/.temp/**
+# Vuepress Output
+**/.vuepress/dist/
diff --git a/package.json b/package.json
index c4e7fdb..4da21d3 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,16 @@
     "docs:build": "vuepress build src",
     "docs:clean-dev": "vuepress dev src --clean-cache",
     "docs:dev": "vuepress dev src",
+    "docs:lint": "prettier --check --write src",
     "docs:update-package": "npx vp-update"
   },
   "packageManager": "pnpm@8.11.0",
+  "prettier": {
+    "singleQuote": false
+  },
+  "dependencies": {
+    "prettier": "^3.1.0"
+  },
   "devDependencies": {
     "@vuepress/bundler-vite": "2.0.0-rc.0",
     "@vuepress/client": "2.0.0-rc.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 883c62b..1c8dac5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  prettier:
+    specifier: ^3.1.0
+    version: 3.1.0
+
 devDependencies:
   '@vuepress/bundler-vite':
     specifier: 2.0.0-rc.0
@@ -4778,6 +4783,12 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /prettier@3.1.0:
+    resolution: {integrity: sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: false
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
diff --git a/src/.vuepress/navbar/en.ts b/src/.vuepress/navbar/en.ts
index 69879b7..b0dd002 100644
--- a/src/.vuepress/navbar/en.ts
+++ b/src/.vuepress/navbar/en.ts
@@ -1,25 +1,25 @@
-import {navbar} from "vuepress-theme-hope";
+import { navbar } from "vuepress-theme-hope";
 
 export const enNavbar = navbar([
-    "/",
-    "/guide/",
-    "/tutorial/",
-    {
-        text: "Reference",
-        icon: "lightbulb",
-        prefix: "/reference/",
-        children: ["test",
-            "resources",
-            "documents",
-            "development_log"
-        ],
-    },
-    {
-        text: "More",
-        icon: "lightbulb",
-        prefix: "/more/",
-        children: [
-            "collaborative_projects", 'license', 'thanks', "contact", "use_cases"
-        ],
-    },
+  "/",
+  "/guide/",
+  "/tutorial/",
+  {
+    text: "Reference",
+    icon: "lightbulb",
+    prefix: "/reference/",
+    children: ["test", "resources", "documents", "development_log"],
+  },
+  {
+    text: "More",
+    icon: "lightbulb",
+    prefix: "/more/",
+    children: [
+      "collaborative_projects",
+      "license",
+      "thanks",
+      "contact",
+      "use_cases",
+    ],
+  },
 ]);
diff --git a/src/.vuepress/navbar/zh.ts b/src/.vuepress/navbar/zh.ts
index fcb7364..b96ae00 100644
--- a/src/.vuepress/navbar/zh.ts
+++ b/src/.vuepress/navbar/zh.ts
@@ -1,24 +1,25 @@
-import {navbar} from "vuepress-theme-hope";
+import { navbar } from "vuepress-theme-hope";
 
 export const zhNavbar = navbar([
-    "/zh/",
-    "/zh/guide/",
-    "/zh/tutorial/",
-    {
-        text: "参考",
-        icon: "lightbulb",
-        prefix: "/zh/reference/",
-        children: ["test",
-            "resources",
-            "documents", "development_log"
-        ],
-    },
-    {
-        text: "了解更多",
-        icon: "laptop-code",
-        prefix: "/zh/more/",
-        children: [
-            "collaborative_projects", 'license', 'thanks', "contact", "use_cases"
-        ],
-    },
+  "/zh/",
+  "/zh/guide/",
+  "/zh/tutorial/",
+  {
+    text: "参考",
+    icon: "lightbulb",
+    prefix: "/zh/reference/",
+    children: ["test", "resources", "documents", "development_log"],
+  },
+  {
+    text: "了解更多",
+    icon: "laptop-code",
+    prefix: "/zh/more/",
+    children: [
+      "collaborative_projects",
+      "license",
+      "thanks",
+      "contact",
+      "use_cases",
+    ],
+  },
 ]);
diff --git a/src/.vuepress/sidebar/en.ts b/src/.vuepress/sidebar/en.ts
index 03d3eb9..f92cd93 100644
--- a/src/.vuepress/sidebar/en.ts
+++ b/src/.vuepress/sidebar/en.ts
@@ -1,27 +1,28 @@
-import {sidebar} from "vuepress-theme-hope";
+import { sidebar } from "vuepress-theme-hope";
 
 export const enSidebar = sidebar({
-    "/": [
-        "",
-        "tutorial/",
-        {
-            text: "Docs",
-            icon: "book",
-            prefix: "guide/",
-            children: "structure",
-        }, {
-            text: "Reference",
-            icon: "laptop-code",
-            prefix: "reference/",
-            link: "reference/",
-            children: "structure",
-        },
-        {
-            text: "More",
-            icon: "laptop-code",
-            prefix: "more/",
-            link: "more/",
-            children: "structure",
-        },
-    ],
+  "/": [
+    "",
+    "tutorial/",
+    {
+      text: "Docs",
+      icon: "book",
+      prefix: "guide/",
+      children: "structure",
+    },
+    {
+      text: "Reference",
+      icon: "laptop-code",
+      prefix: "reference/",
+      link: "reference/",
+      children: "structure",
+    },
+    {
+      text: "More",
+      icon: "laptop-code",
+      prefix: "more/",
+      link: "more/",
+      children: "structure",
+    },
+  ],
 });
diff --git a/src/.vuepress/sidebar/zh.ts b/src/.vuepress/sidebar/zh.ts
index 637b7bc..09ff58b 100644
--- a/src/.vuepress/sidebar/zh.ts
+++ b/src/.vuepress/sidebar/zh.ts
@@ -1,27 +1,28 @@
-import {sidebar} from "vuepress-theme-hope";
+import { sidebar } from "vuepress-theme-hope";
 
 export const zhSidebar = sidebar({
-    "/zh/": [
-        "",
-        "tutorial/",
-        {
-            text: "指南",
-            icon: "book",
-            prefix: "guide/",
-            children: "structure",
-        }, {
-            text: "参考",
-            icon: "laptop-code",
-            prefix: "reference/",
-            link: "reference/",
-            children: "structure",
-        },
-        {
-            text: "了解更多",
-            icon: "laptop-code",
-            prefix: "more/",
-            link: "more/",
-            children: "structure",
-        },
-    ],
+  "/zh/": [
+    "",
+    "tutorial/",
+    {
+      text: "指南",
+      icon: "book",
+      prefix: "guide/",
+      children: "structure",
+    },
+    {
+      text: "参考",
+      icon: "laptop-code",
+      prefix: "reference/",
+      link: "reference/",
+      children: "structure",
+    },
+    {
+      text: "了解更多",
+      icon: "laptop-code",
+      prefix: "more/",
+      link: "more/",
+      children: "structure",
+    },
+  ],
 });
diff --git a/src/.vuepress/styles/index.scss b/src/.vuepress/styles/index.scss
index d4fe869..0af66c4 100644
--- a/src/.vuepress/styles/index.scss
+++ b/src/.vuepress/styles/index.scss
@@ -1,9 +1,10 @@
 .vp-hero-info-wrapper {
-  width:100vw;
+  width: 100vw;
   background: url(/assets/image/bg.svg) center/cover no-repeat;
 }
+
 @media (min-width: 768px) {
- .vp-hero-info-wrapper {
-  height:100vh
- }
+  .vp-hero-info-wrapper {
+    height: 100vh;
+  }
 }
diff --git a/src/guide/install/install_zlmediakit_using_vcpkg.md b/src/guide/install/install_zlmediakit_using_vcpkg.md
index 0df2985..56feaa4 100644
--- a/src/guide/install/install_zlmediakit_using_vcpkg.md
+++ b/src/guide/install/install_zlmediakit_using_vcpkg.md
@@ -2,11 +2,13 @@
 title: Installing zlmediakit with vcpkg
 ---
 
-# Introduction
-vcpkg is a cross-platform SDK package management tool, similar to yum/apt on Linux and Homebrew on macOS. It supports multiple platforms such as Linux, macOS, and Windows, making it a powerful tool for C/C++ developers to manage dependencies. 
+## Introduction
+
+vcpkg is a cross-platform SDK package management tool, similar to yum/apt on Linux and Homebrew on macOS. It supports multiple platforms such as Linux, macOS, and Windows, making it a powerful tool for C/C++ developers to manage dependencies.
 Currently, zlmediakit has been added to vcpkg on August 8, 2023. Users can conveniently install zlmediakit C SDK and MediaServer executable program using vcpkg, resolving various compilation dependency-related issues. The inclusion of zlmediakit in vcpkg has received extensive support from [@JackBoosY](https://github.com/JackBoosY), and we express our sincere gratitude for that!
 
-# Installation Guide
+## Installation Guide
+
 ## 1. Install vcpkg
 
 Taking Linux platform as an example:
@@ -20,8 +22,6 @@ git clone https://github.com/microsoft/vcpkg
 
 > For specific instructions on different platforms, please refer to the [official documentation](https://github.com/microsoft/vcpkg/blob/master/README.md).
 
-
-
 ## 2. Install zlmediakit
 
 - Install dependencies first
@@ -30,8 +30,6 @@ git clone https://github.com/microsoft/vcpkg
   sudo apt-get install pkg-config
   ```
 
-
-
 - Install zlmediakit with default features
 
   ```bash
@@ -39,24 +37,18 @@ git clone https://github.com/microsoft/vcpkg
   ./vcpkg/vcpkg install zlmediakit
   ```
 
-
-
 - Install zlmediakit with all features (including webrtc datachannel)
 
   ```bash
   ./vcpkg/vcpkg install zlmediakit\[core,mp4,openssl,webrtc,sctp\]
   ```
 
-
-
 - Install zlmediakit with minimum features
 
   ```bash
   ./vcpkg/vcpkg install zlmediakit\[core\]
   ```
 
-
-
 - Uninstall zlmediakit
 
   ```bash
@@ -64,8 +56,8 @@ git clone https://github.com/microsoft/vcpkg
   ```
 
 - Installation path
-![](/images/install_zlmediakit_using_vcpkg_1.png)
-> The MediaServer process depends on config.ini, default.pem, www, and other related files, which can be copied from the source code.
+  ![](/images/install_zlmediakit_using_vcpkg_1.png)
+  > The MediaServer process depends on config.ini, default.pem, www, and other related files, which can be copied from the source code.
 
 ## 3. Install different versions
 
@@ -75,8 +67,6 @@ git clone https://github.com/microsoft/vcpkg
 ./vcpkg/vcpkg help triplet
 ```
 
-
-
 - Example for Linux
 
   ```bash
@@ -111,6 +101,5 @@ git clone https://github.com/microsoft/vcpkg
   # Then install the dynamic library version
   ./vcpkg/vcpkg install zlmediakit\[core,mp4,openssl,webrtc,sctp\]:x64-linux-dynamic
   ```
-![install_zlmediakit_using_vcpkg_2](/images/install_zlmediakit_using_vcpkg_2.png)
-
 
+  ![install_zlmediakit_using_vcpkg_2](/images/install_zlmediakit_using_vcpkg_2.png)

From babce9362c4e0ae5dbabd9ff626c8b29b1caf390 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 6 Dec 2023 19:01:53 +0800
Subject: [PATCH 3/3] Update src/tutorial/README.md

---
 src/tutorial/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tutorial/README.md b/src/tutorial/README.md
index 3c600f1..ca674f9 100644
--- a/src/tutorial/README.md
+++ b/src/tutorial/README.md
@@ -141,7 +141,7 @@ ZLMediaKit depends on some optional third-party libraries. During the building o
 
   ZLMediaKit can support multiple protocols for pulling streams by forking ffmpeg as a subprocess. FFmpeg does not need to be installed during compilation.
 
-- sdl、avcodec、avutil
+- sdl, avcodec, avutil
 
   These three libraries are used by the test_player test program of ZLMediaKit. You usually do not need to install these three libraries.