- {tokens.map((line, i) => (
-
- {line.map((token, key) => (
-
- ))}
-
- ))}
-
- )}
-
-
-
-
- {Trans[localStr].title}
-{Trans[localStr].des}
-
-
-
-
-
- 
-
-
-
-
-
-
-
- {featureItems(locale as any).map((item) => (
-
-
-
- ))}
-
- 
-
- {item.title}
-{item.des}
-
-
-
-
-
-
- {Trans[localStr].quickStart}
-{Trans[localStr].install}
-{Trans[localStr].use}
-
+
+
+
+
+
+
diff --git a/website/docs/.vitepress/theme/components/DemoTempNotForSSR.vue b/website/docs/.vitepress/theme/components/DemoTempNotForSSR.vue
new file mode 100644
index 0000000..f5048b8
--- /dev/null
+++ b/website/docs/.vitepress/theme/components/DemoTempNotForSSR.vue
@@ -0,0 +1,410 @@
+
+ {{ TITLE_MAP[lang].title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vitepress/theme/components/Team.vue b/website/docs/.vitepress/theme/components/Team.vue
new file mode 100644
index 0000000..db0e57f
--- /dev/null
+++ b/website/docs/.vitepress/theme/components/Team.vue
@@ -0,0 +1,65 @@
+
+ {{ TITLE_MAP[lang].title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vitepress/theme/components/danmus.ts b/website/docs/.vitepress/theme/components/danmus.ts
new file mode 100644
index 0000000..6733757
--- /dev/null
+++ b/website/docs/.vitepress/theme/components/danmus.ts
@@ -0,0 +1,214 @@
+import type { RawDanmu, CommanderMapKey } from '@qier-player/danmaku/dist/es/main/types';
+
+export const danmusData: (RawDanmu & { position: CommanderMapKey, timestatamp: number, checked?: boolean })[] = [
+ {
+ text: '死亡搁浅！',
+ color: '#f00',
+ position: 'fixed-top',
+ timestatamp: 0.4,
+ },
+ {
+ text: '死亡搁浅！！',
+ color: '#f00',
+ position: 'fixed-top',
+ timestatamp: 0.4,
+ },
+ {
+ text: '死亡搁浅！！！',
+ color: '#f00',
+ position: 'fixed-top',
+ timestatamp: 0.4,
+ },
+ {
+ text: '小岛秀夫yyds',
+ color: '#fff',
+ position: 'rolling',
+ timestatamp: 1.2,
+ },
+ {
+ text: '这部作品什么时候出下一部啊，好期待',
+ color: '#fff',
+ position: 'rolling',
+ timestatamp: 1.2,
+ },
+ {
+ text: '生存之旅',
+ color: '#00f',
+ position: 'fixed-top',
+ timestatamp: 1.2,
+ },
+ {
+ text: '我爱死亡搁浅！',
+ color: '#f0f',
+ position: 'rolling',
+ timestatamp: 1.3,
+ },
+ {
+ text: '布里吉特的故事真挺感人的',
+ color: '#ff0',
+ position: 'fixed-bottom',
+ timestatamp: 1.3,
+ },
+ {
+ text: '希望能再见到山姆啊啊啊',
+ color: '#fff',
+ position: 'rolling',
+ timestatamp: 1.3,
+ },
+ {
+ text: '死亡搁浅的画面太美了，感觉像看电影',
+ color: '#0f0',
+ position: 'fixed-top',
+ timestatamp: 1.4,
+ },
+ {
+ text: '你们觉得二代会怎样？',
+ color: '#f90',
+ position: 'rolling',
+ timestatamp: 1.5,
+ },
+ {
+ text: '这游戏的音乐绝绝子',
+ color: '#fff',
+ position: 'fixed-bottom',
+ timestatamp: 1.5,
+ },
+ {
+ text: '期待更多的剧情展开',
+ color: '#0ff',
+ position: 'fixed-top',
+ timestatamp: 3,
+ },
+ {
+ text: '死神与连接的故事！',
+ color: '#f00',
+ position: 'rolling',
+ timestatamp: 3.4,
+ },
+ {
+ text: '克劳斯好帅啊',
+ color: '#fff',
+ position: 'fixed-bottom',
+ timestatamp: 3.5,
+ },
+ {
+ text: '每次冒险都令人心跳加速',
+ color: '#f00',
+ position: 'fixed-top',
+ timestatamp: 4.5,
+ },
+ {
+ text: '死亡搁浅的玩法真挺独特',
+ color: '#ff0',
+ position: 'rolling',
+ timestatamp: 4.5,
+ },
+ {
+ text: '山姆的背影让我心疼',
+ color: '#0f0',
+ position: 'fixed-bottom',
+ timestatamp: 5,
+ },
+ {
+ text: '这游戏的设定太棒了',
+ color: '#00f',
+ position: 'rolling',
+ timestatamp: 5.2,
+ },
+ {
+ text: '真希望能有续集',
+ color: '#f0f',
+ position: 'fixed-top',
+ timestatamp: 6.2,
+ },
+ {
+ text: '连结的意义真深刻',
+ color: '#0ff',
+ position: 'rolling',
+ timestatamp: 7.2,
+ },
+ {
+ text: '画面美得不可思议',
+ color: '#fff',
+ position: 'fixed-bottom',
+ timestatamp: 9.2,
+ },
+ {
+ text: '孤独感和希望并存！',
+ color: '#f90',
+ position: 'fixed-top',
+ timestatamp: 10.2,
+ },
+ {
+ text: '为山姆加油！',
+ color: '#fff',
+ position: 'rolling',
+ timestatamp: 11.2,
+ },
+ {
+ text: '死亡搁浅的世界好迷人！',
+ color: '#00f',
+ position: 'fixed-bottom',
+ timestatamp: 12.2,
+ },
+ {
+ text: '这段生存挑战挺有意思的。',
+ color: '#00f',
+ position: 'fixed-top',
+ timestatamp: 13,
+ },
+ {
+ text: '故事情节吸引人。',
+ color: '#f0f',
+ position: 'rolling',
+ timestatamp: 14,
+ },
+ {
+ text: '在探索未知的旅程',
+ color: '#ff0',
+ position: 'fixed-bottom',
+ timestatamp: 16,
+ },
+ {
+ text: '感觉到一种连接和孤独。',
+ color: '#fff',
+ position: 'rolling',
+ timestatamp: 16,
+ },
+ {
+ text: '山姆的经历很特别。',
+ color: '#0f0',
+ position: 'fixed-top',
+ timestatamp: 12,
+ },
+ {
+ text: '主题确实很深刻。',
+ color: '#f90',
+ position: 'rolling',
+ timestatamp: 14,
+ },
+ {
+ text: '音乐的选择很好。',
+ color: '#fff',
+ position: 'fixed-bottom',
+ timestatamp: 11.2,
+ },
+ {
+ text: '沉浸感很强。',
+ color: '#0ff',
+ position: 'fixed-top',
+ timestatamp: 13.2,
+ },
+ {
+ text: '对未来的故事很期待。',
+ color: '#f00',
+ position: 'rolling',
+ timestatamp: 14.2,
+ },
+ {
+ text: '这种体验很独特。',
+ color: '#fff',
+ position: 'fixed-bottom',
+ timestatamp: 4.2,
+ },
+]
diff --git a/website/docs/.vitepress/theme/index.ts b/website/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..124e4ab
--- /dev/null
+++ b/website/docs/.vitepress/theme/index.ts
@@ -0,0 +1,9 @@
+import { type Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './styles/vars.css'
+
+const theme: Theme = {
+ ...DefaultTheme,
+}
+
+export default theme
diff --git a/website/docs/.vitepress/theme/styles/vars.css b/website/docs/.vitepress/theme/styles/vars.css
new file mode 100644
index 0000000..ca40112
--- /dev/null
+++ b/website/docs/.vitepress/theme/styles/vars.css
@@ -0,0 +1,83 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+ /* blue */
+ --c-blue-1: #0781a4;
+ --c-blue-2: #0894bc;
+ --c-blue-3: #09a8d5;
+ --c-blue-4: #0abbed;
+ --c-blue-5: #1bc5f5;
+ --c-blue-6: #34ccf6;
+ --c-blue-7: #4cd2f7;
+ /* dark */
+ --c-white-dark: #f8f8f8;
+ --c-black-darker: #0d121b;
+ --c-black: #111827;
+ --c-black-light: #161f32;
+ --c-black-lighter: #262a44;
+ /* main theme */
+ --theme-color: var(--c-blue-4);
+}
+
+html.dark:root {
+ --vp-home-hero-name-color: transparent;
+ --vp-home-hero-name-background: linear-gradient(
+ 120deg,
+ var(--c-blue-7) 50%,
+ var(--c-blue-4)
+ );
+ --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--c-blue-3) 50%, var(--c-blue-4) 50%);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-button-brand-border: var(--c-blue-3);
+ --vp-button-brand-text: var(--c-white-dark);
+ --vp-button-brand-bg: var(--c-blue-4);
+ --vp-button-brand-hover-border: var(--c-blue-3);
+ --vp-button-brand-hover-text: var(--c-white-dark);
+ --vp-button-brand-hover-bg: var(--c-blue-6);
+ --vp-button-brand-active-border: var(--c-blue-3);
+ --vp-button-brand-active-text: var(--c-black-darker);
+ --vp-button-brand-active-bg: var(--c-blue-3);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-home-hero-name-color: transparent;
+ --vp-home-hero-name-background: linear-gradient(
+ 120deg,
+ var(--c-blue-7) 50%,
+ var(--c-blue-4)
+ );
+ --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--c-blue-7) 50%, var(--c-blue-7) 50%);
+ --vp-home-hero-image-filter: blur(124px);
+}
+
+@media (min-width: 640px) {
+ :root {
+ --vp-home-hero-image-filter: blur(136px);
+ }
+}
+
+@media (min-width: 960px) {
+ :root {
+ --vp-home-hero-image-filter: blur(148px);
+ }
+}
+
+/**
+ * Component: Brand
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-c-brand-1: var(--c-blue-1);
+}
diff --git a/website/docs/api/events.md b/website/docs/api/events.md
deleted file mode 100644
index 37c120c..0000000
--- a/website/docs/api/events.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Events
-order: 4
----
-
-# Events
diff --git a/website/docs/api/events.zh-CN.md b/website/docs/api/events.zh-CN.md
deleted file mode 100644
index 8e1a73f..0000000
--- a/website/docs/api/events.zh-CN.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 事件
-order: 4
----
-
-# 事件
diff --git a/website/docs/api/functions.md b/website/docs/api/functions.md
deleted file mode 100644
index a450f5a..0000000
--- a/website/docs/api/functions.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Functions
-order: 3
----
-
-# Functions
diff --git a/website/docs/api/functions.zh-CN.md b/website/docs/api/functions.zh-CN.md
deleted file mode 100644
index 7da65f1..0000000
--- a/website/docs/api/functions.zh-CN.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 方法
-order: 3
----
-
-# 方法
diff --git a/website/docs/api/index.md b/website/docs/api/index.md
deleted file mode 100644
index 391dc76..0000000
--- a/website/docs/api/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Options
-order: 1
-nav:
- title: API
- order: 2
----
-
-# Options
diff --git a/website/docs/api/index.zh-CN.md b/website/docs/api/index.zh-CN.md
deleted file mode 100644
index 73da017..0000000
--- a/website/docs/api/index.zh-CN.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: 参数
-order: 1
-nav:
- title: API
- order: 2
----
-
-# 参数
diff --git a/website/docs/api/property.md b/website/docs/api/property.md
deleted file mode 100644
index 644c820..0000000
--- a/website/docs/api/property.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Properties
-order: 2
----
-
-# Properties
diff --git a/website/docs/api/property.zh-CN.md b/website/docs/api/property.zh-CN.md
deleted file mode 100644
index bbc5f30..0000000
--- a/website/docs/api/property.zh-CN.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 属性
-order: 2
----
-
-# 属性
diff --git a/website/docs/doc/controller.md b/website/docs/doc/controller.md
deleted file mode 100644
index 1ae1613..0000000
--- a/website/docs/doc/controller.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: Controller
-order: 6
----
-
-# Controller
-
-At the bottom of the player, there are a series of control items for users to perform operations such as play (pause), volume adjustment, full screen, etc., and also include a playback progress bar.
-
-## Configs
-
-You can configure the position of each item of the controller, whether to render it, etc. through the `controller` parameter. It is an object that contains `progress` and `eles` two configurable items, the former is **progress bar**, the latter Yes **General Controls**, you can add new control items by yourself.
-
-The default settings are as follows:
-
-```js
-new Player({
- controller: {
- progress: ['progress'],
- eles: ['play', 'time', 'spacer', 'volume', 'settings', 'web-fullscreen', 'fullscreen'],
- },
-});
-```
-
-The array in the above code is filled with the `id` of each built-in control, and their position in the array determines their position on the view.
-
-What's special is that the `id` is the `spacer` control, which can divide the control into two parts. For example, to put the volume buttons to the left, just put the `volume` string to the left of the `spacer`.
-
-```js
-eles: ['play', 'time', 'volume', 'spacer', 'settings', 'web-fullscreen', 'fullscreen'],
-```
-
-## Built-in controls
-
-| Control id | Description |
-| -------------- | ---------------------------------------------------------------- |
-| progress | Video progress bar |
-| play | play/pause |
-| time | Video time display |
-| spacer | Used to divide the control item layout into left and right parts |
-| volume | volume adjustment |
-| settings | settings |
-| web-fullscreen | Web fullscreen |
-| fullscreen | full screen |
-
-## Custom control
-
-控制项是可以自定义的，：
-
-```typescript
-interface IControllerEle {
- el: HTMLElement; // DOM element of the control
- id?: any; // the unique id of the control
- tip?: string; // the tip string for the control
- tooltip?: Tooltip; // Prompt component object
- mounted?: boolean; // Whether the control has been mounted
- init?: (player: Player, tooltip: Tooltip) => void; // Called when the control is initialized
- dispose?: () => void; // destroy
- [key: string]: any;
-}
-```
-
-The `tip` parameter is a string that will be displayed when the mouse is over the corresponding control.
-
-```js
-const control = {
- id: 'control',
- tip: 'control',
- init(player) {
- const textDom = document.createElement('span');
- textDom.innerText = 'control';
- this.el.appendChild(textDom);
- },
-};
-```
-
-## Update control item
-
-Provides the built-in method `updateControllerEles()` to dynamically update control bar items.
-
-```js
-const player = new Player({ ... })
-
-player.updateControllerEles(['play', 'spacer', 'settings'], 'eles')
-```
-
-The first parameter is the new control item array, and the second parameter is the configuration item to be updated, here is `eles`, which is the configuration of the control bar at the bottom.
-
-## Register and get control items
-
-The `player` instance provides two methods to register and get menu item objects.
-
-### register
-
-#### `registerControllerEle(ele: IControllerEle, id?: string)`
-
-Use this method to register controls, and then use the `id` string to access, generally only used in custom plugins.
-
-### Obtain
-
-#### `getControllerEle(id: string)`
-
-Use this method to get the control with the specified `id`.
-
-```js
-const control = { ... }
-const player = new Player({ ... });
-// register
-player.registerControllerEle(control, 'control');
-// Obtain
-const controlTmp = player.getControllerEle('control');
-
-if (controlTmp) {
- console.log(controlTmp)
-}
-```
-
-The above is to register our own defined control items, and we can also get built-in control items, such as the playback class instance.
-
-```js
-console.log(player.getControllerEle('play'));
-```
-
-⚠️ Among them, the `spacer` control item is special, and its instance cannot be obtained through `getControlItem('spacer')`.
-
-## More examples
-
-- [Quality Switch](/doc/examples/quality-switch)
diff --git a/website/docs/doc/examples/quality-switch.md b/website/docs/doc/examples/quality-switch.md
deleted file mode 100644
index 43f0d9b..0000000
--- a/website/docs/doc/examples/quality-switch.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Quality Switch
-order: 2
-group:
- title: Examples
- order: 100
----
-
-# Quality Switch
-
-Quality Switch
-
-TODO
diff --git a/website/docs/doc/examples/quality-switch.zh-CN.md b/website/docs/doc/examples/quality-switch.zh-CN.md
deleted file mode 100644
index 84b0335..0000000
--- a/website/docs/doc/examples/quality-switch.zh-CN.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: 画质切换
-order: 2
-group:
- title: 例子
- order: 100
----
-
-# 画质切换
-
-实现画质切换自定义控制项
-
-TODO
diff --git a/website/docs/doc/examples/video-screenshot.md b/website/docs/doc/examples/video-screenshot.md
deleted file mode 100644
index 602dc43..0000000
--- a/website/docs/doc/examples/video-screenshot.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Video Screenshot
-order: 1
-group:
- title: Examples
- order: 100
----
-
-# Video Screenshot
-
-这里使用右键菜单的形式实现视频截图功能。
-
-TODO
diff --git a/website/docs/doc/examples/video-screenshot.zh-CN.md b/website/docs/doc/examples/video-screenshot.zh-CN.md
deleted file mode 100644
index 1b0089e..0000000
--- a/website/docs/doc/examples/video-screenshot.zh-CN.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: 视频截图
-order: 1
-group:
- title: 例子
- order: 100
----
-
-# 视频截图
-
-这里使用右键菜单的形式实现视频截图功能。
-
-TODO
diff --git a/website/docs/doc/index.md b/website/docs/doc/index.md
deleted file mode 100644
index 3a3f290..0000000
--- a/website/docs/doc/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Introduction
-order: 1
-nav:
- title: Docs
- order: 1
----
-
-# What's qier-player?
-
-`qier-player` is a modern web player that supports highly customized UI, responsive layout and rich features. This project is written by Typescript and has good type hints; more features will be gradually developed in the future, such as barrage as a plug-in, compatible with mobile terminals, etc. If you are interested in understanding the future development plan, you can click [Future plan](/doc#future-plan) to view.
-
-{{ TITLE_MAP[lang].teamTitle }}
+
+
+ 
-
-
-
-
+
+We can see that this sprite is composed of `5 x 4` small thumbnails; a video may have multiple sprite images.
+
+| Parameter | Description |
+| ----------- | ----------------- |
+| startSecond | The starting time for thumbnail creation; for example, if the thumbnail starts at `0` seconds, this will be `0`. |
+| gapSecond | The time span for each small thumbnail; if one is captured every `1` second, this will be `1`. |
+| col | The number of columns in the sprite. |
+| row | The number of rows in the sprite. |
+| width | The width of each small thumbnail. |
+| height | The height of each small thumbnail. |
+| images | An array of URLs for the sprite images. |
+
+## Creating Thumbnails {#make-thumbnails}
+
+Generally, after a user uploads a video to the server, the thumbnail generation is handled server-side. For Java, you can use [FFmpeg](https://www.ffmpeg.org/) or [JavaCV](https://github.com/bytedeco/javacv); for Node, you can use [Fluent ffmpeg](https://github.com/fluent-ffmpeg/node-fluent-ffmpeg).
+
+To make things easier, we will introduce how to use FFmpeg via the command line to create video thumbnails.
+
+::: tip Powerful Audio and Video Processing Tool
+FFmpeg is an open-source, cross-platform audio and video processing tool that can be used for recording, converting, editing, and more. It supports nearly all common audio and video formats and can perform a variety of operations, including encoding, decoding, packaging, unpackaging, cutting, merging, compressing, transcoding, and extracting audio.
+
+In short, FFmpeg is a rich-featured, powerful, and flexible tool for audio and video processing, and many players use it as their core.
+:::
+
+First, go to the [FFmpeg official website](https://www.ffmpeg.org/download.html) to download and install it, making sure to select the right version for your system (for example, if you are using macOS, select macOS). Once downloaded, you will have a command-line tool (you can also quickly install it via `brew install ffmpeg`). Open the tool.
+
+Then, execute the following command in the terminal:
+
+```sh
+ffmpeg -i ./test-video.mp4 -vf 'fps=1/1:round=zero:start_time=0,scale=160x90,tile=5x4' t%d.jpg
+```
+
+This command generates a `5 x 4` sprite image with small thumbnails sized at `160 x 90`. The sprite file is named `t1.jpg`.
+
+::: warning Note
+The demo video is only `17` seconds long. If a sprite is generated every `1` second, and the sprite specification is `5` columns and `4` rows, only one `t1.jpg` will be created. If the video is long enough, multiple sprites will be generated: `t1.jpg`, `t2.jpg`, `t3.jpg`, `t4.jpg...`
+:::
+
+Explanation of the command parameters:
+
+- `-i` specifies the video file.
+- `-vf` is followed by the filter; multiple filters are separated by `,`, and multiple parameters for a filter are separated by `:`.
+- `fps=1/1` means to output `1` image every `1` second, `round=zero` rounds the timestamp to `0`. `start_time=0` starts capturing from `0` seconds.
+- `scale=160x90` sets the output image resolution, and `tile=5x4` arranges the small images in a `5 x 4` grid.
+- `t%d.jpg` specifies the file name, with `%d` indicating a numeric increment.
+
+After generating the images, you can configure them as follows:
+
+```js
+new Player({
+ // ...other configurations
+ thumbnail: {
+ col: 5,
+ row: 4,
+ startSecond: 0,
+ gapSecond: 1,
+ images: [
+ '/thumbnails/t1.jpg', // Adjust the directory based on your placement
+ ],
+ },
+})
+```
+
+::: warning Caution
+If you pass an empty array to `thumbnail.images`, the small thumbnail frames will not display, so once you do pass it, please ensure the images are accessible.
+:::
diff --git a/website/docs/en/guide/what-is-qier-player.md b/website/docs/en/guide/what-is-qier-player.md
new file mode 100644
index 0000000..cb5c585
--- /dev/null
+++ b/website/docs/en/guide/what-is-qier-player.md
@@ -0,0 +1,38 @@
+# What is QierPlayer? {#what-is-qier-player}
+
+`QierPlayer` is a simple and easy-to-use h5 player, supporting highly customizable UI and rich features of a modern web player. This project is written in Typescript, providing good type hints; more features will be gradually developed in the future, such as integrating bullet screen as a plugin and mobile compatibility.
+
+
+
+Just want to give it a try? Jump to [Getting Started](./getting-started).
+
+
+
+
+
+
+
+The name of qier-player comes from a beautiful girl's name in this world with the character "qi", affectionately called "qier".
+
+
+
+## Features {#features}
+
+- 📦 Out-of-the-box, eliminating the need for most UI style writing, fully functional.
+- 🚄 Developed danmaku library, quickly integrate with the player.
+- 🛡 Developed using TypeScript, providing complete type definition files.
+- 📃 Easily customize themes, replacing original icons and theme colors is very simple.
+- 🔖 Supports internationalization, simply call the API to register your language.
+
+## Future Plans {#future-plans}
+
+There are still many features that need to be implemented in this project. Some ideas for the future include:
+
+- **Design Plugin Integration Mechanism**: Support user-defined plugin integration.
+- **Mobile Adaptation**: This requires attention to detail.
diff --git a/website/docs/en/index.md b/website/docs/en/index.md
new file mode 100644
index 0000000..eb5774c
--- /dev/null
+++ b/website/docs/en/index.md
@@ -0,0 +1,51 @@
+---
+layout: home
+title: QierPlayer
+titleTemplate: The Modern web player
+
+hero:
+ name: 'QierPlayer'
+ text: 'The modern web player'
+ tagline: A simple and easy-to-use h5 player with highly customized UI and rich functions
+ actions:
+ - theme: brand
+ text: Get Started
+ link: /guide/getting-started
+ - theme: alt
+ text: View on GitHub
+ link: https://github.com/vortesnail/qier-player
+ image:
+ src: /logo.svg
+ alt: QierPlayer
+
+features:
+ - icon:
+ title: Customizable
+ details: Highly customizable UI, basically every place can be customized and replaced.
+ - icon:
+ title: Multifunction
+ details: By default, it supports full screen, web page full screen, playback speed, loop playback, mirror screen, context menu, video thumbnails, shortcut keys, internationalization, etc.
+ - icon:
+ title: Scalability
+ details: Customizable functions are provided, and plug-in mechanisms are provided to implement them. Functions including the control bar and right-click menu can be added in accordance with specifications.
+ - icon:
+ title: Danmaku
+ details: Provides an independent danmaku library that works perfectly with the player.
+ - icon:
+ title: Vanilla JS
+ details: Use TypeScript for vanilla JavaScript library development, regardless of what UI framework is used.
+ - icon:
+ title: Stream media
+ details: Supports access to any streaming media, such as hls and flv, etc.
+---
+
+
+
+
+
+只是想尝试一下？跳到[快速开始](./getting-started)。
+
+
+
+
+
+
+
+qier-player 的名字由来是一个在这个世界上很美好的女孩的名字中带有“琪”字，亲昵的称呼“琪儿”。
+
+
+
+## 特性 {#features}
+
+- 📦 开箱即用，免去大部分 ui 的样式编写，功能齐全。
+- 🚄 已开发弹幕库，快速接入播放器。
+- 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
+- 📃 主题轻松自定义，替换原有的图标、主题色非常简单。
+- 🔖 支持国际化，简单的 api 调用即可注册你的语言。
+
+## 未来计划 {#future-plans}
+
+目前该项目还有许多需要做的功能，目前想到的有以下：
+
+- **设计插件接入机制**：支持用户自定义插件接入。
+- **移动端适配**：这是一个细心活儿。
+- **修复各种小问题**：比如弹幕在视频全屏或者调整尺寸后，发射的位置不对等。
diff --git a/website/docs/zh/index.md b/website/docs/zh/index.md
new file mode 100644
index 0000000..70ff4ea
--- /dev/null
+++ b/website/docs/zh/index.md
@@ -0,0 +1,51 @@
+---
+layout: home
+title: QierPlayer
+titleTemplate: 现代 web 播放器
+
+hero:
+ name: 'QierPlayer'
+ text: '现代 web 播放器'
+ tagline: 简单易用的 h5 播放器，UI 高度定制化、功能丰富
+ actions:
+ - theme: brand
+ text: 快速开始
+ link: /zh/guide/getting-started
+ - theme: alt
+ text: GitHub
+ link: https://github.com/vortesnail/qier-player
+ image:
+ src: /logo.svg
+ alt: QierPlayer
+
+features:
+ - icon:
+ title: 可定制化
+ details: 高度可定制的 ui，基本上每个地方都可以定制和替换。
+ - icon:
+ title: 多功能
+ details: 默认支持全屏、网页全屏、播放速度、循环播放、镜像画面、上下文菜单、视频缩略图、快捷键、国际化等。
+ - icon:
+ title: 可扩展性
+ details: 可自定义功能，提供插件机制实现，包括控制栏、右键菜单均可按照规范进行功能的添加。
+ - icon:
+ title: 支持弹幕
+ details: 提供独立的弹幕库，与播放器完美配合。
+ - icon:
+ title: 与框架无关
+ details: 使用 TypeScript 进行原生的 JavaScript 库开发，与使用什么 UI 框架无关。
+ - icon:
+ title: 流媒体
+ details: 支持接入任何流媒体，如 hls 和 flv 等。
+---
+
+
+
+