docs: move to vuepress

.gitignore

@@ -1,8 +1,10 @@
 .idea
 node_modules
 demo2
+docs2
 npm-debug.log
 DPlayer.log*
 wxw
 .vscode
-package-lock.json
+package-lock.json
+docs/.vuepress/dist

.travis.yml

@@ -1,12 +1,13 @@
 language: node_js
-
 node_js:
-  - "node"
-
-cache:
-  yarn: true
-  directories:
-    - node_modules
-
+  - lts/*
 script:
-  yarn run build
+  - npm run docs:build
+deploy:
+  provider: pages
+  skip-cleanup: true
+  local_dir: docs/.vuepress/dist
+  github-token: $GITHUB_TOKEN # a token generated on github allowing travis to push code on you repository
+  keep-history: true
+  on:
+    branch: master

docs/.vuepress/components/DPlayer.vue

@@ -0,0 +1,94 @@
+<template>
+<div class="dplayer-wrap">
+    <div class="dplayer" ref="dplayer"><button class="load" v-on:click="load">Load demo</button></div>
+</div>
+</template>
+<script>
+import DPlayer from 'dplayer';
+import 'dplayer/dist/DPlayer.min.css';
+
+export default {
+    props: {
+        immediate: {
+            type: Boolean,
+            default: false,
+        },
+        options: {
+            type: Object,
+            default: () => ({
+                autoplay: false,
+                theme: '#FADFA3',
+                loop: true,
+                lang: 'zh-cn',
+                hotkey: true,
+                preload: 'auto',
+                logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
+                volume: 0.7,
+                mutex: true,
+                screenshot: true,
+                subtitle: {
+                    url: 'https://cn-south-17-dplayer-49648867.oss.dogecdn.com/hikarunara.vtt',
+                    type: 'webvtt',
+                    fontSize: '20px',
+                    bottom: '10%',
+                    color: '#FADFA3'
+                },
+                video: {
+                    url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+                    pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+                    thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
+                    type: 'auto'
+                },
+                danmaku: {
+                    id: '9E2E3368B56CDBB4',
+                    api: 'https://api.prprpr.me/dplayer/',
+                    token: 'tokendemo',
+                    maximum: 1000,
+                    addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
+                    user: 'DIYgod',
+                    bottom: '15%',
+                    unlimited: true
+                },
+                contextmenu: [
+                    {
+                        text: 'custom1',
+                        link: 'https://github.com/DIYgod/DPlayer'
+                    },
+                    {
+                        text: 'custom2',
+                        click: (player) => {
+                            console.log(player);
+                        }
+                    }
+                ],
+                highlight: [
+                    {
+                        time: 20,
+                        text: '这是第 20 秒'
+                    },
+                    {
+                        time: 120,
+                        text: '这是 2 分钟'
+                    }
+                ]
+            })
+        },
+    },
+    methods: {
+        load: function () {
+            this.options.container = this.$refs.dplayer;
+            this.dplayer = new DPlayer(this.options);
+        }
+    },
+    mounted: function () {
+        if (this.immediate) {
+            this.dplayer = new DPlayer(this.options);
+        }
+    },
+    beforeDestroy: function () {
+        this.dplayer.destroy();
+    }
+}
+</script>
+<style>
+</style>

docs/.vuepress/config.js

@@ -0,0 +1,83 @@
+module.exports = {
+    plugins: {
+        '@vuepress/google-analytics': {
+            ga: 'UA-48084758-9',
+        },
+        '@vuepress/pwa': {
+            serviceWorker: true,
+            updatePopup: {
+                '/zh/': {
+                    message: '发现新内容可用',
+                    buttonText: '刷新',
+                },
+                '/': {
+                    message: 'New content is available',
+                    buttonText: 'Refresh',
+                },
+            },
+        },
+        '@vuepress/back-to-top': true,
+    },
+    locales: {
+        '/zh/': {
+            lang: 'zh-CN',
+            title: 'DPlayer',
+            description: '🍭 Wow, such a lovely HTML5 danmaku video player',
+        },
+        '/': {
+            lang: 'en-US',
+            title: 'DPlayer',
+            description: '🍭 Wow, such a lovely HTML5 danmaku video player',
+        },
+    },
+    head: [['link', { rel: 'icon', href: `/logo.png` }]],
+    themeConfig: {
+        repo: 'MoePlayer/DPlayer',
+        editLinks: true,
+        docsDir: 'docs',
+        locales: {
+            '/zh/': {
+                lang: 'zh-CN',
+                selectText: '选择语言',
+                label: '简体中文',
+                editLinkText: '在 GitHub 上编辑此页',
+                lastUpdated: '上次更新',
+                nav: [
+                    {
+                        text: '指南',
+                        link: '/zh/',
+                    },
+                    {
+                        text: '生态',
+                        link: '/zh/ecosystem/',
+                    },
+                    {
+                        text: '支持 DPlayer',
+                        link: '/zh/support/',
+                    },
+                ],
+            },
+            '/': {
+                lang: 'en-US',
+                selectText: 'Languages',
+                label: 'English',
+                editLinkText: 'Edit this page on GitHub',
+                lastUpdated: 'Last Updated',
+                nav: [
+                    {
+                        text: 'Guide',
+                        link: '/',
+                    },
+                    {
+                        text: 'Ecosystem',
+                        link: '/ecosystem/',
+                    },
+                    {
+                        text: 'Support DPlayer',
+                        link: '/support/',
+                    },
+                ],
+            },
+        },
+    },
+};

docs/.vuepress/styles/index.styl

@@ -0,0 +1,36 @@
+.navbar .home-link .site-name {
+    color: #F5712C;
+}
+
+.page .custom-block.tip {
+    border-color: #F5712C;
+}
+
+.icon.outbound {
+    display: none;
+}
+
+a {
+  word-break: break-all;
+}
+
+#指南 {
+    display: none;
+}
+
+#guide {
+    display: none;
+}
+
+#app .global-ui .sw-update-popup {
+    border: 1px solid #F5712C;
+}
+
+.routes .sidebar-group-items > li > .sidebar-sub-headers > .sidebar-sub-header > a {
+    color: $accentColor;
+}
+
+#dplayer {
+    margin-top: -1.5rem;
+    margin-bottom: 1rem;
+}

docs/.vuepress/styles/palette.styl

@@ -0,0 +1 @@
+$accentColor = #F5712C

docs/README.md

@@ -1,29 +1,44 @@
 ---
-search: english
+sidebar: auto
 ---
 
+# Guide
+
+<link rel="stylesheet" href="">
+<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
+
 # DPlayer
 
 🍭 Wow, such a lovely HTML5 danmaku video player
 
-## Special Sponsors
+<DPlayer :immediate="true"></DPlayer>
+
+&nbsp;
+
+## Special Thanks
+
+### Special Sponsors
+
+&nbsp;
 
 <a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
     <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
 </a>
 
+&nbsp;
+
 <a href="https://www.9ccms.net" target="_blank">
-    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+    <img width="280px" src="https://i.imgur.com/YBV6kfb.png">
 </a>
 
-## Sponsors
+### Sponsors
 
 <a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
     <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
-<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
-    <img width="222px" src="https://imgur.com/apG1uKf.png">
-</a>
 
 ## Installation
 
@@ -41,9 +56,9 @@ yarn add dplayer
 
 ## Quick Start
 
-<div class="dplayer-wrap">
-    <div id="dplayer2"><button class="docute-button load">Click to load player</div>
-</div>
+At first, let's initialize a simplest DPlayer
+
+Load DPlayer files
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -51,6 +66,17 @@ yarn add dplayer
 <script src="DPlayer.min.js"></script>
 ```
 
+Or work with module bundler:
+
+```js
+import 'dplayer/dist/DPlayer.min.css';
+import DPlayer from 'dplayer';
+
+const dp = new DPlayer(options);
+```
+
+Initialization in js:
+
 ```js
 const dp = new DPlayer({
     container: document.getElementById('dplayer'),
@@ -70,39 +96,32 @@ const dp = new DPlayer({
 });
 ```
 
-Work with module bundler:
-
-```js
-import 'dplayer/dist/DPlayer.min.css';
-import DPlayer from 'dplayer';
-
-const dp = new DPlayer(options);
-```
-
 ## Options
 
+You can custom your player instance by those options
+
 Name | Default | Description
 ----|-------|----
 container | document.querySelector('.dplayer') | player container
-live | false | enable live mode, [see more details](http://dplayer.js.org/#/home?id=live)
+live | false | enable live mode, see [#live](#live)
 autoplay | false | video autoplay
 theme | '#b7daff' | main color
 loop | false | video loop
 lang | navigator.language.toLowerCase() | values: 'en', 'zh-cn', 'zh-tw'
 screenshot | false | enable screenshot, if true, video and video poster must enable Cross-Origin
-hotkey | true | enable hotkey
+hotkey | true | enable hotkey, support FF, FR, volume control, play & pause
 preload | 'auto' | values: 'none', 'metadata', 'auto'
 volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
 logo | - | showing logo in the top left corner, you can adjust its size and position by CSS
-apiBackend | - | getting and sending danmaku in your way, [see more details](http://dplayer.js.org/#/home?id=live)
+apiBackend | - | getting and sending danmaku in your way, see [#live](#live)
 video | - | video info
-video.quality | - | [see more details](http://dplayer.js.org/#/home?id=quality-switching)
-video.defaultQuality | - | [see more details](http://dplayer.js.org/#/home?id=quality-switching)
+video.quality | - | see [#Quality switching](#quality-switching)
+video.defaultQuality | - | see [#Quality switching](#quality-switching)
 video.url | - | video url
 video.pic | - | video poster
 video.thumbnails | - | video thumbnails, generated by [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails)
-video.type | 'auto' | values: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' or other custom type, [see more details](http://dplayer.js.org/#/home?id=mse-support)
-video.customType | - | custom video type, [see more details](http://dplayer.js.org/#/home?id=mse-support)
+video.type | 'auto' | values: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' or other custom type, see [#MSE support](#mse-support)
+video.customType | - | custom video type, see [#MSE support](#mse-support)
 subtitle | - | external subtitle
 subtitle.url | `required` | subtitle url
 subtitle.type | 'webvtt' | subtitle type, values: 'webvtt', 'ass', but only webvtt is supported for now
@@ -111,10 +130,10 @@ subtitle.bottom | '40px' | the distance between the subtitle and player bottom,
 subtitle.color | '#fff' | subtitle color
 danmaku | - | showing danmaku
 danmaku.id | `required` | danamku pool id, it must be unique
-danmaku.api | `required` | [see more details](http://dplayer.js.org/#/home?id=danmaku-api)
+danmaku.api | `required` | see [#Danmaku API](#danmaku-api)
 danmaku.token | - | back end verification token
 danmaku.maximum | - | danmaku maximum quantity
-danmaku.addition | - | additional danmaku, [see more details](http://dplayer.js.org/#/home?id=bilibili-danmaku)
+danmaku.addition | - | additional danmaku, see [#bilibili danmaku](#bilibili-danmaku)
 danmaku.user | 'DIYgod' | danmaku user name
 danmaku.bottom | - | values like: '10px' '10%', the distance between the danmaku bottom and player bottom, in order to prevent warding off subtitle
 danmaku.unlimited | false | display all danmaku even though danmaku overlap, notice that player will remember user setting, default setting will not work after user set it themselves
@@ -122,12 +141,6 @@ contextmenu | [] | custom contextmenu
 highlight | [] | custom time markers upon progress bar
 mutex | true | prevent to play multiple player at the same time, pause other players when this player start play
 
-For example:
-
-<div class="dplayer-wrap">
-    <div id="dplayer3"><button class="docute-button load">Click to load player</div>
-</div>
-
 ```js
 const dp = new DPlayer({
     container: document.getElementById('player'),
@@ -365,9 +378,22 @@ Player events
 
 Set video url and video type in `video.quality`, set default quality by `video.defaultQuality`.
 
-<div class="dplayer-wrap">
-    <div id="dplayer4"><button class="docute-button load">Click to load player</div>
-</div>
+<DPlayer :options="{
+    video: {
+        quality: [{
+            name: 'HD',
+            url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+            type: 'hls'
+        }, {
+            name: 'SD',
+            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+            type: 'normal'
+        }],
+        defaultQuality: 0,
+        pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+        thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
+    }
+}"></DPlayer>
 
 ```js
 const dp = new DPlayer({
@@ -426,9 +452,12 @@ const option = {
 
 It requires the library [hls.js](https://github.com/video-dev/hls.js) and it should be loaded before `DPlayer.min.js`.
 
-<div class="dplayer-wrap">
-    <div id="dplayer5"><button class="docute-button load">Click to load player</div>
-</div>
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+        type: 'hls'
+    }
+}"></DPlayer>
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -469,10 +498,6 @@ const dp = new DPlayer({
 
 It requires the library [dash.js](https://github.com/Dash-Industry-Forum/dash.js) and it should be loaded before `DPlayer.min.js`.
 
-<div class="dplayer-wrap">
-    <div id="dplayer6"><button class="docute-button load">Click to load player</div>
-</div>
-
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
 <div id="dplayer"></div>
@@ -539,9 +564,12 @@ const dp = new DPlayer({
 
 It requires the library [flv.js](https://github.com/Bilibili/flv.js) and it should be loaded before `DPlayer.min.js`.
 
-<div class="dplayer-wrap">
-    <div id="dplayer7"><button class="docute-button load">Click to load player</div>
-</div>
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
+        type: 'flv'
+    }
+}"></DPlayer>
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -585,9 +613,12 @@ const dp = new DPlayer({
 
 It requires the library [webtorrent](https://github.com/webtorrent/webtorrent) and it should be loaded before `DPlayer.min.js`.
 
-<div class="dplayer-wrap">
-    <div id="dplayer8"><button class="docute-button load">Click to load player</div>
-</div>
+<DPlayer :options="{
+    video: {
+        url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
+        type: 'webtorrent'
+    }
+}"></DPlayer>
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -636,10 +667,6 @@ const dp = new DPlayer({
 
 DPlayer can work with any MSE library via `customType` option.
 
-<div class="dplayer-wrap">
-    <div id="dplayer10"><button class="docute-button load">Click to load player</div>
-</div>
-
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
 <div id="dplayer"></div>
@@ -667,12 +694,16 @@ const dp = new DPlayer({
 
 ## Live
 
-<div class="dplayer-wrap">
-    <div id="dplayer9"><button class="docute-button load">Click to load player</div>
-</div>
-
 You can use DPlayer in live, but if you want live danmaku, you should prepare a WebSocket backend yourself.
 
+<DPlayer :options="{
+    live: true,
+    video: {
+        url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+        type: 'hls'
+    }
+}"></DPlayer>
+
 Init player:
 
 ```js
@@ -708,12 +739,6 @@ const danmaku = {
 dp.danmaku.draw(danmaku);
 ```
 
-## CDN
-
-- [jsDelivr](https://www.jsdelivr.com/package/npm/dplayer)
-- [cdnjs](https://cdnjs.com/libraries/dplayer)
-- [unpkg](https://unpkg.com/dplayer/)
-
 ## FAQ
 
 ### Why can't player be full screen?

docs/config.js

@@ -1,284 +0,0 @@
-const langs = [
-    { title: 'English', path: '/home', matchPath: /^\/(home|ecosystem|support)/ },
-    { title: '简体中文', path: '/zh-Hans/', matchPath: /^\/zh-Hans/ },
-];
-
-docute.init({
-    landing: 'landing.html',
-    title: 'DPlayer',
-    repo: 'DIYgod/DPlayer',
-    twitter: 'DIYgod',
-    'edit-link': 'https://github.com/MoePlayer/DPlayer/tree/master/docs',
-    nav: {
-        default: [
-            {
-                title: 'Home', path: '/home'
-            },
-            {
-                title: 'Ecosystem', path: '/ecosystem'
-            },
-            {
-                title: 'Support DPlayer', path: '/support'
-            },
-            {
-                title: 'Languages', type: 'dropdown', items: langs
-            }
-        ],
-        'zh-Hans': [
-            {
-                title: '首页', path: '/zh-Hans/'
-            },
-            {
-                title: '生态', path: '/zh-Hans/ecosystem'
-            },
-            {
-                title: '支持 DPlayer', path: '/zh-Hans/support'
-            },
-            {
-                title: '选择语言', type: 'dropdown', items: langs
-            }
-        ],
-    },
-    plugins: [
-        docsearch({
-            apiKey: '46a8ba306e368972c1d75feb581fb430',
-            indexName: 'dplayer',
-            tags: ['english', 'zh-Hans'],
-            url: 'http://dplayer.js.org'
-        }),
-        evanyou(),
-        player()
-    ]
-});
-
-function player () {
-    return function (context) {
-        context.event.on('landing:updated', function () {
-            console.log('landing:updated');
-            clearPlayer();
-            dplayer1();
-        });
-        context.event.on('content:updated', function () {
-            console.log('content:updated');
-            clearPlayer();
-            for (let i = 0; i < document.querySelectorAll('.load').length; i++) {
-                document.querySelectorAll('.load')[i].addEventListener('click', function () {
-                    window[this.parentElement.id] && window[this.parentElement.id]();
-                });
-            }
-        });
-    };
-}
-
-function clearPlayer () {
-    for (let i = 0; i < 10; i++) {
-        if (window['dp' + (i + 1)]) {
-            window['dp' + (i + 1)].destroy();
-        }
-    }
-}
-
-function dplayer1 () {
-    window.dp1 = new DPlayer({
-        container: document.getElementById('dplayer1'),
-        video: {
-            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
-            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
-        },
-        danmaku: {
-            id: '9E2E3368B56CDBB4',
-            api: 'https://api.prprpr.me/dplayer/'
-        }
-    });
-}
-
-function dplayer2 () {
-    window.dp2 = new DPlayer({
-        container: document.getElementById('dplayer2'),
-        video: {
-            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
-            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
-        },
-        danmaku: {
-            id: '9E2E3368B56CDBB4',
-            api: 'https://api.prprpr.me/dplayer/'
-        }
-    });
-}
-
-function dplayer3 () {
-    window.dp3 = new DPlayer({
-        container: document.getElementById('dplayer3'),
-        autoplay: false,
-        theme: '#FADFA3',
-        loop: true,
-        lang: 'zh-cn',
-        hotkey: true,
-        preload: 'auto',
-        logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
-        volume: 0.7,
-        mutex: true,
-        video: {
-            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
-            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
-            type: 'auto'
-        },
-        danmaku: {
-            id: '9E2E3368B56CDBB4',
-            api: 'https://api.prprpr.me/dplayer/',
-            token: 'tokendemo',
-            maximum: 1000,
-            addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
-            user: 'DIYgod',
-            bottom: '15%',
-            unlimited: true
-        },
-        contextmenu: [
-            {
-                text: 'custom1',
-                link: 'https://github.com/DIYgod/DPlayer'
-            },
-            {
-                text: 'custom2',
-                click: (player) => {
-                    console.log(player);
-                }
-            }
-        ],
-        highlight: [
-            {
-                time: 20,
-                text: '这是第 20 秒'
-            },
-            {
-                time: 120,
-                text: '这是 2 分钟'
-            }
-        ]
-    });
-}
-
-function dplayer4 () {
-    window.dp4 = new DPlayer({
-        container: document.getElementById('dplayer4'),
-        video: {
-            quality: [{
-                name: 'HD',
-                url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
-                type: 'hls'
-            }, {
-                name: 'SD',
-                url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-                type: 'normal'
-            }],
-            defaultQuality: 0,
-            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
-            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
-        }
-    });
-}
-
-function dplayer5 () {
-    window.dp5 = new DPlayer({
-        container: document.getElementById('dplayer5'),
-        video: {
-            url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
-            type: 'hls'
-        }
-    });
-}
-
-function dplayer6 () {
-    // window.dp6 = new DPlayer({
-    //     container: document.getElementById('dplayer6'),
-    //     video: {
-    //         url: 'https://moeplayer.b0.upaiyun.com/dplayer/dash/hikarunara.mpd',
-    //         type: 'dash'
-    //     }
-    // });
-}
-
-function dplayer7 () {
-    window.dp7 = new DPlayer({
-        container: document.getElementById('dplayer7'),
-        video: {
-            url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
-            type: 'flv'
-        }
-    });
-}
-
-function dplayer8 () {
-    window.dp8 = new DPlayer({
-        container: document.getElementById('dplayer8'),
-        video: {
-            url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
-            type: 'webtorrent'
-        }
-    });
-}
-
-function dplayer9 () {
-    window.dp9 = new DPlayer({
-        container: document.getElementById('dplayer9'),
-        live: true,
-        danmaku: true,
-        apiBackend: {
-            read: function (endpoint, callback) {
-                console.log('Pretend to connect WebSocket');
-                callback();
-            },
-            send: function (endpoint, danmakuData, callback) {
-                console.log('Pretend to send danamku via WebSocket', danmakuData);
-                callback();
-            }
-        },
-        video: {
-            url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
-            type: 'hls'
-        }
-    });
-}
-
-function dplayer10 () {
-    loadScript('https://cdn.jsdelivr.net/npm/pearplayer', function () {
-        window.dp10 = new DPlayer({
-            container: document.getElementById('dplayer10'),
-            video: {
-                url: 'https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4',
-                type: 'pearplayer',
-                customType: {
-                    'pearplayer': function (video, player) {
-                        new PearPlayer(video, {
-                            src: video.src,
-                            autoplay: player.options.autoplay
-                        });
-                    }
-                }
-            }
-        });
-    });
-}
-
-function loadScript (src, callback) {
-    let s,
-        r,
-        t;
-    r = false;
-    s = document.createElement('script');
-    s.type = 'text/javascript';
-    s.src = src;
-    s.onload = s.onreadystatechange = function () {
-    // console.log( this.readyState ); //uncomment this line to see which ready states are called.
-        if (!r && (!this.readyState || this.readyState == 'complete'))
-        {
-            r = true;
-            callback();
-        }
-    };
-    t = document.getElementsByTagName('script')[0];
-    t.parentNode.insertBefore(s, t);
-}

docs/ecosystem.md

@@ -1,5 +1,5 @@
 ---
-search: english
+sidebar: auto
 ---
 
 # Ecosystem

docs/index.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-  <title>DPlayer</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/theme-github.css" />
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-48084758-9"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
-
-    gtag('config', 'UA-48084758-9');
-  </script>
-  <link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
-  <style>
-    body {
-      text-rendering: auto;
-    }
-    #evanyou-canvas {
-      z-index: -1 !important;
-    }
-    .dplayer-wrap {
-      max-width: 700px;
-      margin: 20px 0;
-    }
-  </style>
-</head>
-<body>
-  <!-- don't remove this part start -->
-  <div id="app"></div>
-  <script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/plugins/docsearch.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docute-evanyou/dist/evanyou.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.js"></script>
-  <script src="./config.js"></script>
-  <!-- livereload script placeholder -->
-  <!-- don't remove this part end -->
-</body>
-</html>

docs/landing.html

@@ -1,83 +0,0 @@
-<h1>DPlayer</h1>
-
-<h3>🍭 Wow, such a lovely HTML5 danmaku video player.</h3>
-
-<div class="dplayer-wrap">
-    <div id="dplayer1"></div>
-</div>
-
-<div class="landing-buttons">
-    <a class="landing-button" target="_blank" href="https://github.com/MoePlayer/DPlayer">
-        GitHub
-    </a>
-
-    <a class="landing-button" router-link="/home">
-        Docs
-    </a>
-</div>
-
-<style>
-    h1 {
-        margin: 0;
-        margin-top: -50px;
-        font-weight: normal;
-        font-size: 40px;
-        letter-spacing: 1px;
-    }
-
-    h3 {
-        margin-top: 20px;
-        color: #999;
-        font-weight: normal;
-        letter-spacing: 1px;
-    }
-
-    .landing {
-        padding: 10px;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        height: 100%;
-        -webkit-user-select: none;
-        user-select: none;
-    }
-
-    .features {
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 16px;
-        line-height: 1.7;
-    }
-
-    .landing-button {
-        border: 1px solid #ccc;
-        border-radius: 33px;
-        padding: 10px 30px;
-        background-color: white;
-        display: inline-block;
-        margin-right: 20px;
-        color: #333;
-    }
-
-    .landing-button:hover {
-        border-color: #42b983;
-        color: #42b983;
-        text-decoration: none;
-    }
-
-    .dplayer-wrap {
-        max-width: 600px;
-        margin: 20px 0 40px;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    }
-</style>

docs/support.md

@@ -1,5 +1,5 @@
 ---
-search: english
+sidebar: auto
 ---
 
 # Sponsor DPlayer Development
@@ -24,19 +24,23 @@ We accept donations through these channels:
 
 Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the DPlayer GitHub repository and this website.
 
-- Become a backer or sponsor via [OpenCollective](https://opencollective.com/dplayer)
-- E-mail us: i#html.love
+- Become a Backer or a Sponser on [Patreon](https://www.patreon.com/DIYgod)
+- E-mail us: i#diygod.me
 
 ## Current Premium Sponsors
 
-## Special Sponsors
+### Special Sponsors
+
+ 
 
 <a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
     <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
 </a>
 
+&nbsp;
+
 <a href="https://www.9ccms.net" target="_blank">
-    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+    <img width="280px" src="https://i.imgur.com/YBV6kfb.png">
 </a>
 
 ### Sponsors
@@ -44,13 +48,6 @@ Recurring pledges come with exclusive perks, e.g. having your name or your compa
 <a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
     <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
-<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
-    <img width="222px" src="https://imgur.com/apG1uKf.png">
-</a>
-
-### OpenCollective backers
-
-![](https://opencollective.com/DPlayer/backers.svg?width=890)
 
 ## DPlayer contributors
 

docs/zh-Hans/README.md → docs/zh/README.md

@@ -1,20 +1,36 @@
 ---
-nav: zh-Hans
-search: zh-Hans
+sidebar: auto
 ---
+# 指南
+
+<link rel="stylesheet" href="">
+<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
 
 # DPlayer
 
 🍭 Wow, such a lovely HTML5 danmaku video player
 
-## Special Sponsors
+<DPlayer :immediate="true"></DPlayer>
+
+&nbsp;
+
+## Special Thanks
+
+### Special Sponsors
+
+&nbsp;
 
 <a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
     <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
 </a>
 
+&nbsp;
+
 <a href="https://www.9ccms.net" target="_blank">
-    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+    <img width="280px" src="https://i.imgur.com/YBV6kfb.png">
 </a>
 
 ### Sponsors
@@ -22,9 +38,6 @@ search: zh-Hans
 <a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
     <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
-<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
-    <img width="222px" src="https://imgur.com/apG1uKf.png">
-</a>
 
 ## 安装
 
@@ -40,11 +53,11 @@ npm install dplayer --save
 yarn add dplayer
 ```
 
-## 入门
+## 快速开始
+
+我们先尝试初始化一个最简单的 DPlayer
 
-<div class="dplayer-wrap">
-    <div id="dplayer2"><button class="docute-button load">点击加载播放器</div>
-</div>
+加载播放器文件:
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -52,58 +65,54 @@ yarn add dplayer
 <script src="DPlayer.min.js"></script>
 ```
 
+或者使用模块管理器:
+
+```js
+import 'dplayer/dist/DPlayer.min.css';
+import DPlayer from 'dplayer';
+
+const dp = new DPlayer(options);
+```
+
+在 js 里初始化:
+
 ```js
 const dp = new DPlayer({
     container: document.getElementById('dplayer'),
-    screenshot: true,
     video: {
-        url: 'demo.mp4',
-        pic: 'demo.jpg',
-        thumbnails: 'thumbnails.jpg'
-    },
-    subtitle: {
-        url: 'webvtt.vtt'
+        url: 'demo.mp4'
     },
-    danmaku: {
-        id: 'demo',
-        api: 'https://api.prprpr.me/dplayer/'
-    }
 });
 ```
 
-使用模块管理器:
-
-```js
-import 'dplayer/dist/DPlayer.min.css';
-import DPlayer from 'dplayer';
-
-const dp = new DPlayer(options);
-```
+一个最简单的 DPlayer 就初始化好了，它只有最基本的视频播放功能
 
 ## 参数
 
+DPlayer 有丰富的参数可以自定义你的播放器实例
+
 名称 | 默认值 | 描述
 ----|-------|----
 container | document.querySelector('.dplayer') | 播放器容器元素
-live | false | 开启直播模式, [详情](http://dplayer.js.org/#/home?id=live)
+live | false | 开启直播模式, 见[#直播](#直播)
 autoplay | false | 视频自动播放
 theme | '#b7daff' | 主题色
 loop | false | 视频循环播放
 lang | navigator.language.toLowerCase() | 可选值: 'en', 'zh-cn', 'zh-tw'
-screenshot | false | 开启截图，如果开启，视频和视频封面需要开启跨域
-hotkey | true | 开启热键
-preload | 'auto' | 预加载，可选值: 'none', 'metadata', 'auto'
+screenshot | false | 开启截图，如果开启，视频和视频封面需要允许跨域
+hotkey | true | 开启热键，支持快进、快退、音量控制、播放暂停
+preload | 'auto' | 视频预加载，可选值: 'none', 'metadata', 'auto'
 volume | 0.7 | 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
 logo | - | 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
-apiBackend | - | 自定义获取和发送弹幕行为，[详情](http://dplayer.js.org/#/home?id=live)
+apiBackend | - | 自定义获取和发送弹幕行为，见[#直播](#直播)
 video | - | 视频信息
-video.quality | - | [详情](http://dplayer.js.org/#/home?id=quality-switching)
-video.defaultQuality | - | [详情](http://dplayer.js.org/#/home?id=quality-switching)
+video.quality | - | 见[#清晰度切换](#清晰度切换)
+video.defaultQuality | - | 见[#清晰度切换](#清晰度切换)
 video.url | - | 视频链接
 video.pic | - | 视频封面
 video.thumbnails | - | 视频缩略图，可以使用 [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails) 生成
-video.type | 'auto' | 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, [详情](http://dplayer.js.org/#/home?id=mse-support)
-video.customType | - | 自定义类型, [详情](http://dplayer.js.org/#/home?id=mse-support)
+video.type | 'auto' | 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见[#MSE 支持](#mse-支持)
+video.customType | - | 自定义类型, 见[#MSE 支持](#mse-支持)
 subtitle | - | 外挂字幕
 subtitle.url | `required` | 字幕链接
 subtitle.type | 'webvtt' | 字幕类型，可选值: 'webvtt', 'ass'，目前只支持 webvtt
@@ -112,10 +121,10 @@ subtitle.bottom | '40px' | 字幕距离播放器底部的距离，取值形如:
 subtitle.color | '#fff' | 字幕颜色
 danmaku | - | 显示弹幕
 danmaku.id | `required` | 弹幕池id，必须唯一
-danmaku.api | `required` | [详情](http://dplayer.js.org/#/home?id=danmaku-api)
+danmaku.api | `required` | 见[#弹幕接口](#弹幕接口)
 danmaku.token | - | 弹幕后端验证 token
 danmaku.maximum | - | 弹幕最大数量
-danmaku.addition | - | 额外外挂弹幕，[详情](http://dplayer.js.org/#/home?id=bilibili-danmaku)
+danmaku.addition | - | 额外外挂弹幕，见[#bilibili 弹幕](#bilibili-弹幕)
 danmaku.user | 'DIYgod' | 弹幕用户名
 danmaku.bottom | - | 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
 danmaku.unlimited | false | 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
@@ -123,12 +132,6 @@ contextmenu | [] | 自定义右键菜单
 highlight | [] | 自定义进度条提示点
 mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
 
-例如:
-
-<div class="dplayer-wrap">
-    <div id="dplayer3"><button class="docute-button load">点击加载播放器</div>
-</div>
-
 ```js
 const dp = new DPlayer({
     container: document.getElementById('player'),
@@ -204,7 +207,7 @@ const dp = new DPlayer({
 
 + `dp.toggle()`: 切换播放和暂停
 
-+ `dp.on(event: string, handler: function)`: 绑定视频和播放器事件，[详情](http://dplayer.js.org/#/home?id=event-binding)
++ `dp.on(event: string, handler: function)`: 绑定视频和播放器事件，见[#事件绑定](#事件绑定)
 
 + `dp.switchVideo(video, danmaku)`: 切换到其他视频
 
@@ -360,9 +363,22 @@ dp.on('ended', function () {
 
 在 `video.quality` 里设置不同清晰度的视频链接和类型，`video.defaultQuality` 设置默认清晰度
 
-<div class="dplayer-wrap">
-    <div id="dplayer4"><button class="docute-button load">点击加载播放器</div>
-</div>
+<DPlayer :options="{
+    video: {
+        quality: [{
+            name: 'HD',
+            url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+            type: 'hls'
+        }, {
+            name: 'SD',
+            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+            type: 'normal'
+        }],
+        defaultQuality: 0,
+        pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+        thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
+    }
+}"></DPlayer>
 
 ```js
 const dp = new DPlayer({
@@ -421,9 +437,12 @@ const option = {
 
 需要在 `DPlayer.min.js` 前面加载 [hls.js](https://github.com/video-dev/hls.js)。
 
-<div class="dplayer-wrap">
-    <div id="dplayer5"><button class="docute-button load">点击加载播放器</div>
-</div>
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+        type: 'hls'
+    }
+}"></DPlayer>
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -464,10 +483,6 @@ const dp = new DPlayer({
 
 需要在 `DPlayer.min.js` 前面加载 [dash.js](https://github.com/Dash-Industry-Forum/dash.js)。
 
-<div class="dplayer-wrap">
-    <div id="dplayer6"><button class="docute-button load">点击加载播放器</div>
-</div>
-
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
 <div id="dplayer"></div>
@@ -534,9 +549,12 @@ const dp = new DPlayer({
 
 需要在 `DPlayer.min.js` 前面加载 [flv.js](https://github.com/Bilibili/flv.js)。
 
-<div class="dplayer-wrap">
-    <div id="dplayer7"><button class="docute-button load">点击加载播放器</div>
-</div>
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
+        type: 'flv'
+    }
+}"></DPlayer>
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -580,9 +598,12 @@ const dp = new DPlayer({
 
 需要在 `DPlayer.min.js` 前面加载 [webtorrent](https://github.com/webtorrent/webtorrent)。
 
-<div class="dplayer-wrap">
-    <div id="dplayer8"><button class="docute-button load">点击加载播放器</div>
-</div>
+<DPlayer :options="{
+    video: {
+        url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
+        type: 'webtorrent'
+    }
+}"></DPlayer>
 
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
@@ -631,10 +652,6 @@ const dp = new DPlayer({
 
 DPlayer 可以通过 `customType` 参数与任何 MSE 库一起使用
 
-<div class="dplayer-wrap">
-    <div id="dplayer10"><button class="docute-button load">点击加载播放器</div>
-</div>
-
 ```html
 <link rel="stylesheet" href="DPlayer.min.css">
 <div id="dplayer"></div>
@@ -662,12 +679,16 @@ const dp = new DPlayer({
 
 ## 直播
 
-<div class="dplayer-wrap">
-    <div id="dplayer9"><button class="docute-button load">点击加载播放器</div>
-</div>
-
 你可以把 DPlayer 用在直播当中，但如果你想要直播弹幕，你需要自己准备一个 WebSocket 后端。
 
+<DPlayer :options="{
+    live: true,
+    video: {
+        url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+        type: 'hls'
+    }
+}"></DPlayer>
+
 初始化播放器:
 
 ```js
@@ -703,12 +724,6 @@ const danmaku = {
 dp.danmaku.draw(danmaku);
 ```
 
-## CDN
-
-- [jsDelivr](https://www.jsdelivr.com/package/npm/dplayer)
-- [cdnjs](https://cdnjs.com/libraries/dplayer)
-- [unpkg](https://unpkg.com/dplayer/)
-
 ## 常见问题
 
 ### 为什么播放器不能全屏？

docs/zh-Hans/ecosystem.md → docs/zh/ecosystem.md

@@ -1,6 +1,5 @@
 ---
-nav: zh-Hans
-search: zh-Hans
+sidebar: auto
 ---
 
 # 生态

docs/zh-Hans/support.md → docs/zh/support.md

@@ -1,6 +1,5 @@
 ---
-nav: zh-Hans
-search: zh-Hans
+sidebar: auto
 ---
 
 # 赞助 DPlayer 的研发
@@ -25,19 +24,23 @@ DPlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着
 
 周期性赞助可以获得额外的回报，比如你的名字或你的公司 logo 会出现在 DPlayer 的 GitHub 仓库和现在我们的官网中。
 
-- 通过 [OpenCollective](https://opencollective.com/dplayer) 赞助成为 backer 或 sponsor 
-- 给我们发邮件联系赞助事宜: i#html.love
+- 通过 [Patreon](https://www.patreon.com/DIYgod) 赞助
+- 给我们发邮件联系赞助事宜: i#diygod.me
 
 ## 当前的顶级赞助商
 
-## Special Sponsors
+### Special Sponsors
+
+ 
 
 <a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
     <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
 </a>
 
+&nbsp;
+
 <a href="https://www.9ccms.net" target="_blank">
-    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+    <img width="280px" src="https://i.imgur.com/YBV6kfb.png">
 </a>
 
 ### Sponsors
@@ -45,13 +48,6 @@ DPlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着
 <a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
     <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
-<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
-    <img width="222px" src="https://imgur.com/apG1uKf.png">
-</a>
-
-### OpenCollective backers
-
-![](https://opencollective.com/DPlayer/backers.svg?width=890)
 
 ## DPlayer 贡献者
 

package.json

@@ -8,7 +8,9 @@
     "start": "npm run dev",
     "build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --colors",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --watch --colors",
-    "test": "eslint src webpack"
+    "test": "eslint src webpack",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "files": [
     "dist"
@@ -32,6 +34,9 @@
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
+    "@vuepress/plugin-back-to-top": "1.0.1",
+    "@vuepress/plugin-google-analytics": "1.0.1",
+    "@vuepress/plugin-pwa": "1.0.1",
     "art-template": "4.13.2",
     "art-template-loader": "1.4.3",
     "autoprefixer": "^9.6.0",
@@ -39,6 +44,7 @@
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
     "cssnano": "^4.1.10",
+    "dplayer": "^1.25.0",
     "eslint": "^5.16.0",
     "eslint-loader": "^2.1.2",
     "exports-loader": "^0.7.0",
@@ -53,6 +59,7 @@
     "svg-inline-loader": "0.8.0",
     "template-string-optimize-loader": "^3.0.0",
     "url-loader": "^2.0.0",
+    "vuepress": "1.0.1",
     "webpack": "^4.33.0",
     "webpack-cli": "3.3.2",
     "webpack-dev-server": "^3.6.0"