You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@doris.apache.org by mo...@apache.org on 2022/06/08 09:45:19 UTC

[incubator-doris] branch master updated: [doc](website)Add Doris new official website code and documents (#9977)

This is an automated email from the ASF dual-hosted git repository.

morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-doris.git


The following commit(s) were added to refs/heads/master by this push:
     new 2d39cffa5c [doc](website)Add Doris new official website code and documents (#9977)
2d39cffa5c is described below

commit 2d39cffa5cd19ae1984a1459532072583e9b78df
Author: wangyongfeng <94...@qq.com>
AuthorDate: Wed Jun 8 17:45:12 2022 +0800

    [doc](website)Add Doris new official website code and documents (#9977)
    
    In order to cooperate with Doris's successful graduation from Apache, the Doris official website also needs a new look
    and more powerful feature, so we decided to redesign the Doris official website.
    The code and documents of the new official website are included in this PR.
    
    Since the new website is completely rewritten, the content and structure of the project are different from the previous one.
    In particular, the directory structure of documents has changed, and the number of documents is large, so the number of
    files in this PR is very large.
    
    In the old website,all English documents are in the en/ directory, and Chinese documents in the zh-CN/ directory,
    but in the new website,the documents are split into multiple directories according to the nav.
    The document's directory structure changes as follows:
    ```
    docs (old website)
    |   |—— .vuepress (library)
    |   |—— en
    |   |   |—— admin-manual
    │   │   |—— advanced
    |   |   |—— article
    |   |   |—— benchmark
    |   |   |—— case-user
    |   |   |—— community
    |   |   |—— data-operate
    |   |   |—— data-table
    |   |   |—— design
    |   |   |—— developer-guide
    |   |   |—— downloads
    |   |   |—— ecosystem
    |   |   |—— faq
    |   |   |—— get-starting
    |   |   |—— install
    |   |   |—— sql-manual
    |   |   |—— summary
    |   |   |___ README.md
    |   |—— zh-CN
    ...
    
    docs (new website)
    |   |—— .vuepress (library)
    |   |—— en
    |   |   |—— community (unchanged, community nav)
    │   │   |—— developer (new directory, developer nav)
    │   │   |   |—— design (moved from en/design)
    │   │   |   |__ developer-guide (moved from en/developer-guide)
    |   |   |—— docs (new directory, all children directories moved from en/, document nav)
    │   │   |   |—— admin-manual
    │   │   |   |—— advanced
    │   │   |   |—— benchmark
    │   │   |   |—— data-operate
    │   │   |   |—— data-table
    │   │   |   |—— ecosystem
    │   │   |   |—— faq
    │   │   |   |—— get-starting
    │   │   |   |—— install
    │   │   |   |—— sql-manual
    │   │   |   |—— summary
    |   |   |—— downloads (unchanged, downloads nav)
    |   |   |—— userCase (moved from en/case-user, user nav)
    |   |   |___ README.md
    |   |—— zh-CN
    ...
    ```
---
 docs/.vuepress/config.js                           |  370 ++-
 docs/.vuepress/public/blog-images/avatar.png       |  Bin 0 -> 70469 bytes
 docs/.vuepress/public/blog-images/core1.jpg        |  Bin 0 -> 2505 bytes
 docs/.vuepress/public/blog-images/core2.jpg        |  Bin 0 -> 2766 bytes
 docs/.vuepress/public/blog-images/core3.jpg        |  Bin 0 -> 2786 bytes
 docs/.vuepress/public/blog-images/core4.jpg        |  Bin 0 -> 2600 bytes
 docs/.vuepress/public/blog-images/corebg.jpg       |  Bin 0 -> 16491 bytes
 docs/.vuepress/public/blog-images/data-1.png       |  Bin 0 -> 14353 bytes
 docs/.vuepress/public/blog-images/data.png         |  Bin 0 -> 17143 bytes
 docs/.vuepress/public/blog-images/doris1.png       |  Bin 0 -> 16796 bytes
 docs/.vuepress/public/blog-images/doris2.png       |  Bin 0 -> 29756 bytes
 docs/.vuepress/public/blog-images/doris3.png       |  Bin 0 -> 26017 bytes
 docs/.vuepress/public/blog-images/dorisSolid1.jpg  |  Bin 0 -> 14909 bytes
 docs/.vuepress/public/blog-images/dorisSolid2.jpg  |  Bin 0 -> 15325 bytes
 docs/.vuepress/public/blog-images/dorisyezi.png    |  Bin 0 -> 9418 bytes
 docs/.vuepress/public/blog-images/ebi1.jpg         |  Bin 0 -> 28357 bytes
 docs/.vuepress/public/blog-images/ebi2.jpg         |  Bin 0 -> 16284 bytes
 docs/.vuepress/public/blog-images/ebi3.jpg         |  Bin 0 -> 24237 bytes
 docs/.vuepress/public/blog-images/fx1.png          |  Bin 0 -> 293 bytes
 docs/.vuepress/public/blog-images/fx2.png          |  Bin 0 -> 462 bytes
 docs/.vuepress/public/blog-images/fx3.png          |  Bin 0 -> 359 bytes
 docs/.vuepress/public/blog-images/fx4.png          |  Bin 0 -> 574 bytes
 docs/.vuepress/public/blog-images/fx5.png          |  Bin 0 -> 492 bytes
 docs/.vuepress/public/blog-images/fx6.png          |  Bin 0 -> 368 bytes
 docs/.vuepress/public/blog-images/hero.png         |  Bin 0 -> 15414 bytes
 docs/.vuepress/public/blog-images/homebannerbg.jpg |  Bin 0 -> 11698 bytes
 docs/.vuepress/public/blog-images/hrighting.png    |  Bin 0 -> 80055 bytes
 docs/.vuepress/public/blog-images/i1.png           |  Bin 0 -> 8751 bytes
 docs/.vuepress/public/blog-images/i2.png           |  Bin 0 -> 5701 bytes
 docs/.vuepress/public/blog-images/i3.png           |  Bin 0 -> 8346 bytes
 docs/.vuepress/public/blog-images/i4.png           |  Bin 0 -> 7284 bytes
 docs/.vuepress/public/blog-images/i5.png           |  Bin 0 -> 6021 bytes
 docs/.vuepress/public/blog-images/i6.png           |  Bin 0 -> 6985 bytes
 docs/.vuepress/public/blog-images/icobg.png        |  Bin 0 -> 83821 bytes
 docs/.vuepress/public/blog-images/is1.png          |  Bin 0 -> 3093 bytes
 docs/.vuepress/public/blog-images/is2.png          |  Bin 0 -> 3251 bytes
 docs/.vuepress/public/blog-images/logo.png         |  Bin 0 -> 18959 bytes
 docs/.vuepress/public/blog-images/newdownb.jpg     |  Bin 0 -> 15229 bytes
 docs/.vuepress/public/blog-images/news1.jpg        |  Bin 0 -> 32566 bytes
 docs/.vuepress/public/blog-images/news2.jpg        |  Bin 0 -> 27611 bytes
 docs/.vuepress/public/blog-images/news3.jpg        |  Bin 0 -> 6935 bytes
 docs/.vuepress/public/blog-images/xbkuanglogo.png  |  Bin 0 -> 15858 bytes
 docs/.vuepress/public/favicon.ico                  |  Bin 4286 -> 0 bytes
 .../public/images/idea-checkstyle-plugin-cn.png    |  Bin 32979 -> 0 bytes
 .../public/images/idea-checkstyle-plugin-en.png    |  Bin 28042 -> 0 bytes
 .../public/images/idea-checkstyle-version.png      |  Bin 48448 -> 0 bytes
 .../public/images/idea-rearrange-code.png          |  Bin 67359 -> 0 bytes
 .../public/images/join/image-20220523151619754.png |  Bin 98672 -> 0 bytes
 .../public/images/join/image-20220523151653562.png |  Bin 176346 -> 0 bytes
 .../public/images/join/image-20220523151902368.png |  Bin 102953 -> 0 bytes
 .../public/images/join/image-20220523152004731.png |  Bin 177516 -> 0 bytes
 .../public/images/join/image-20220523152639123.png |  Bin 161251 -> 0 bytes
 .../public/images/join/image-20220523153555640.png |  Bin 157160 -> 0 bytes
 .../public/images/join/image-20220523153600797.png |  Bin 157160 -> 0 bytes
 .../public/images/join/image-20220523153757607.png |  Bin 148522 -> 0 bytes
 .../public/images/join/image-20220523153913059.png |  Bin 164229 -> 0 bytes
 .../public/images/join/image-20220523153958828.png |  Bin 123206 -> 0 bytes
 .../public/images/join/image-20220523154712519.png |  Bin 98259 -> 0 bytes
 .../public/images/join/image-20220523160915229.png |  Bin 151325 -> 0 bytes
 .../public/images/ssb_v11_v015_compare.png         |  Bin 87708 -> 0 bytes
 .../public/js/home.js}                             |   24 +-
 docs/.vuepress/public/js/js.js                     |  118 +
 .../public/js/xRoll.js}                            |   48 +-
 .../{theme/index.js => sidebar/en/community.js}    |   36 +-
 .../{theme/index.js => sidebar/en/developer.js}    |   37 +-
 docs/.vuepress/sidebar/{en.js => en/docs.js}       |   85 +-
 .../{theme/index.js => sidebar/zh-CN/community.js} |   36 +-
 .../{theme/index.js => sidebar/zh-CN/developer.js} |   39 +-
 docs/.vuepress/sidebar/{zh-CN.js => zh-CN/docs.js} |   87 +-
 docs/.vuepress/styles/index.styl                   | 2728 ++++++++++++++++++++
 .../styles/palette.styl}                           |   84 +-
 .../theme/components/AlgoliaSearchBox.vue          |  194 ++
 docs/.vuepress/theme/components/Common.vue         |  240 ++
 docs/.vuepress/theme/components/Dropdown.vue       |  268 ++
 docs/.vuepress/theme/components/DropdownLink.vue   |  181 ++
 .../theme/components/DropdownTransition.vue}       |   76 +-
 docs/.vuepress/theme/components/Footer.vue         |  150 +-
 docs/.vuepress/theme/components/FriendLink.vue     |  240 ++
 docs/.vuepress/theme/components/Home.vue           |  596 ++---
 .../theme/components/HomeBlog/hock.js}             |   19 +-
 docs/.vuepress/theme/components/HomeBlog/index.vue |  323 +++
 docs/.vuepress/theme/components/MobShare.vue       |   48 +
 .../.vuepress/theme/components/Mode/ModePicker.vue |  118 +
 docs/.vuepress/theme/components/Mode/applyMode.js  |   57 +
 docs/.vuepress/theme/components/Mode/index.vue     |  122 +
 .../.vuepress/theme/components/Mode/modeOptions.js |   62 +
 docs/.vuepress/theme/components/NavLink.vue        |   85 +
 docs/.vuepress/theme/components/NavLinks.vue       |  211 ++
 docs/.vuepress/theme/components/Navbar.vue         |  187 ++
 docs/.vuepress/theme/components/NoteAbstract.vue   |   84 +
 .../theme/components/NoteAbstractItem.vue          |  109 +
 docs/.vuepress/theme/components/Page.vue           |  346 +++
 docs/.vuepress/theme/components/PageFooter.vue     |   87 +
 docs/.vuepress/theme/components/PageInfo.vue       |  122 +
 docs/.vuepress/theme/components/Password.vue       |  339 +++
 docs/.vuepress/theme/components/PersonalInfo.vue   |  133 +
 docs/.vuepress/theme/components/SearchBox.vue      |  268 ++
 docs/.vuepress/theme/components/Sidebar.vue        |   85 +
 docs/.vuepress/theme/components/SidebarButton.vue  |   44 +
 docs/.vuepress/theme/components/SidebarGroup.vue   |  153 ++
 docs/.vuepress/theme/components/SidebarLink.vue    |  115 +
 docs/.vuepress/theme/components/SidebarLinks.vue   |  158 ++
 docs/.vuepress/theme/components/SubSidebar.vue     |   94 +
 docs/.vuepress/theme/components/TagList.vue        |   77 +
 .../theme/enhanceApp.js}                           |   69 +-
 docs/.vuepress/theme/fonts/iconfont.css            |  258 ++
 docs/.vuepress/theme/fonts/iconfont.ttf            |  Bin 0 -> 17648 bytes
 docs/.vuepress/theme/fonts/iconfont.woff           |  Bin 0 -> 11476 bytes
 docs/.vuepress/theme/fonts/iconfont.woff2          |  Bin 0 -> 9992 bytes
 docs/.vuepress/theme/global-components/Badge.vue   |   63 +
 .../theme/helpers/composable.js}                   |   19 +-
 docs/.vuepress/theme/helpers/other.js              |   69 +
 docs/.vuepress/theme/helpers/postData.js           |   91 +
 docs/.vuepress/theme/helpers/utils.js              |  283 ++
 docs/.vuepress/theme/images/bg.svg                 |   40 +
 docs/.vuepress/theme/images/home-bg.jpg            |  Bin 0 -> 1300686 bytes
 docs/.vuepress/theme/images/home-head.png          |  Bin 0 -> 291785 bytes
 docs/.vuepress/theme/images/icon_vuepress_reco.png |  Bin 0 -> 69432 bytes
 docs/.vuepress/theme/index.js                      |  145 +-
 docs/.vuepress/theme/layouts/404.vue               |   93 +
 docs/.vuepress/theme/layouts/Article.vue           |   71 -
 docs/.vuepress/theme/layouts/ArticleList.vue       |  141 -
 docs/.vuepress/theme/layouts/Category.vue          |  202 ++
 docs/.vuepress/theme/layouts/Layout.vue            |  132 +-
 docs/.vuepress/theme/layouts/Tag.vue               |  100 +
 docs/.vuepress/theme/layouts/Tags.vue              |   84 +
 docs/.vuepress/theme/layouts/TimeLines.vue         |  175 ++
 .../CaseList.vue => theme/layouts/UserCase.vue}    |   64 +-
 docs/.vuepress/theme/layouts/ZhCategory.vue        |  191 ++
 docs/.vuepress/theme/layouts/ZhTimeLines.vue       |  175 ++
 .../theme/lib/vuepress-theme-reco.js}              |   17 +-
 .../theme/locales/en.js}                           |   23 +-
 .../theme/locales/es.js}                           |   23 +-
 .../theme/locales/index.js}                        |   20 +-
 .../theme/locales/ja.js}                           |   23 +-
 .../theme/locales/ko.js}                           |   23 +-
 .../theme/locales/zh-hans.js}                      |   23 +-
 .../theme/locales/zh-hant.js}                      |   23 +-
 .../theme/mixins/locales.js}                       |   71 +-
 .../theme/mixins/moduleTransiton.js}               |   31 +-
 .../theme/mixins/pagination.js}                    |   54 +-
 docs/.vuepress/theme/mixins/posts.js               |  106 +
 .../case-user.md => .vuepress/theme/noopModule.js} |   12 +-
 docs/.vuepress/theme/package.json                  |   29 +
 .../theme/styles/arrow.styl}                       |   72 +-
 docs/.vuepress/theme/styles/code.styl              |  153 ++
 docs/.vuepress/theme/styles/custom-blocks.styl     |   69 +
 docs/.vuepress/theme/styles/index.styl             |   21 -
 .../theme/styles/mobile.styl}                      |   82 +-
 docs/.vuepress/theme/styles/palette.styl           |   69 +
 docs/.vuepress/theme/styles/theme.styl             |  241 ++
 .../theme/styles/toc.styl}                         |   14 +-
 .../theme/styles/wrapper.styl}                     |   20 +-
 docs/README.md                                     |  255 --
 docs/build_help_zip.sh                             |    2 +-
 docs/en/README.md                                  |  436 +++-
 docs/en/article/article-list.md                    |    7 -
 .../design/Flink-doris-connector-Design.md}        |    0
 .../design/doris_storage_optimization.md           |    0
 .../{ => developer}/design/grouping_sets_design.md |    0
 docs/en/{ => developer}/design/metadata-design.md  |    0
 .../developer-guide/be-vscode-dev.md               |    0
 .../developer-guide/benchmark-tool.md              |    0
 .../developer-guide/bitmap-hll-file-format.md      |    0
 .../developer-guide/cpp-diagnostic-code.md         |    0
 .../developer-guide/cpp-format-code.md             |    0
 .../{ => developer}/developer-guide/debug-tool.md  |    0
 .../{ => developer}/developer-guide/docker-dev.md  |    0
 .../developer-guide/fe-eclipse-dev.md              |    0
 .../{ => developer}/developer-guide/fe-idea-dev.md |    0
 .../developer-guide/fe-vscode-dev.md               |    0
 .../developer-guide/github-checks.md               |    0
 .../developer-guide/how-to-share-blogs.md          |    0
 .../developer-guide/java-format-code.md            |    0
 .../en/{ => developer}/developer-guide/minidump.md |    0
 .../cluster-management/elastic-expansion.md        |    0
 .../cluster-management/load-balancing.md           |    0
 .../admin-manual/cluster-management/upgrade.md     |    0
 .../en/{ => docs}/admin-manual/config/be-config.md |    0
 .../en/{ => docs}/admin-manual/config/fe-config.md |    0
 .../admin-manual/config/user-property.md           |    0
 .../{ => docs}/admin-manual/data-admin/backup.md   |    0
 .../admin-manual/data-admin/delete-recover.md      |    0
 .../{ => docs}/admin-manual/data-admin/restore.md  |    0
 .../admin-manual/http-actions/cancel-label.md      |    0
 .../http-actions/check-reset-rpc-cache.md          |    0
 .../admin-manual/http-actions/compaction-action.md |    0
 .../admin-manual/http-actions/connection-action.md |    0
 .../admin-manual/http-actions/fe-get-log-file.md   |    0
 .../http-actions/fe/backends-action.md             |    0
 .../http-actions/fe/bootstrap-action.md            |    0
 .../http-actions/fe/cancel-load-action.md          |    0
 .../http-actions/fe/check-decommission-action.md   |    0
 .../http-actions/fe/check-storage-type-action.md   |    0
 .../admin-manual/http-actions/fe/config-action.md  |    0
 .../http-actions/fe/connection-action.md           |    0
 .../http-actions/fe/get-ddl-stmt-action.md         |    0
 .../http-actions/fe/get-load-info-action.md        |    0
 .../admin-manual/http-actions/fe/get-load-state.md |    0
 .../http-actions/fe/get-log-file-action.md         |    0
 .../admin-manual/http-actions/fe/get-small-file.md |    0
 .../admin-manual/http-actions/fe/ha-action.md      |    0
 .../http-actions/fe/hardware-info-action.md        |    0
 .../admin-manual/http-actions/fe/health-action.md  |    0
 .../admin-manual/http-actions/fe/log-action.md     |    0
 .../admin-manual/http-actions/fe/logout-action.md  |    0
 .../http-actions/fe/manager/cluster-action.md      |    0
 .../http-actions/fe/manager/node-action.md         |    0
 .../fe/manager/query-profile-action.md             |    0
 .../admin-manual/http-actions/fe/meta-action.md    |    0
 .../http-actions/fe/meta-info-action.md            |    0
 .../http-actions/fe/meta-replay-state-action.md    |    0
 .../admin-manual/http-actions/fe/profile-action.md |    0
 .../http-actions/fe/query-detail-action.md         |    0
 .../http-actions/fe/query-profile-action.md        |    0
 .../http-actions/fe/row-count-action.md            |    0
 .../admin-manual/http-actions/fe/session-action.md |    0
 .../http-actions/fe/set-config-action.md           |    0
 .../http-actions/fe/show-data-action.md            |    0
 .../http-actions/fe/show-meta-info-action.md       |    0
 .../http-actions/fe/show-proc-action.md            |    0
 .../http-actions/fe/show-runtime-info-action.md    |    0
 .../http-actions/fe/statement-execution-action.md  |    0
 .../admin-manual/http-actions/fe/system-action.md  |    0
 .../http-actions/fe/table-query-plan-action.md     |    0
 .../http-actions/fe/table-row-count-action.md      |    0
 .../http-actions/fe/table-schema-action.md         |    0
 .../admin-manual/http-actions/fe/upload-action.md  |    0
 .../admin-manual/http-actions/get-load-state.md    |    0
 .../admin-manual/http-actions/get-tablets.md       |    0
 .../admin-manual/http-actions/profile-action.md    |    0
 .../http-actions/query-detail-action.md            |    0
 .../admin-manual/http-actions/restore-tablet.md    |    0
 .../admin-manual/http-actions/show-data-action.md  |    0
 .../http-actions/tablet-migration-action.md        |    0
 .../http-actions/tablets_distribution.md           |    0
 .../maint-monitor/be-olap-error-code.md            |    0
 .../admin-manual/maint-monitor/disk-capacity.md    |    0
 .../admin-manual/maint-monitor/doris-error-code.md |    0
 .../maint-monitor/metadata-operation.md            |    0
 .../admin-manual/maint-monitor/monitor-alert.md    |    0
 .../maint-monitor/monitor-metrics/be-metrics.md    |    0
 .../maint-monitor/monitor-metrics/fe-metrics.md    |    0
 .../admin-manual/maint-monitor/multi-tenant.md     |    0
 .../admin-manual/maint-monitor/tablet-meta-tool.md |    0
 .../maint-monitor/tablet-repair-and-balance.md     |    0
 .../maint-monitor/tablet-restore-tool.md           |    0
 docs/en/{ => docs}/admin-manual/multi-tenant.md    |    0
 docs/en/{ => docs}/admin-manual/optimization.md    |    0
 .../{ => docs}/admin-manual/privilege-ldap/ldap.md |    0
 .../admin-manual/privilege-ldap/user-privilege.md  |    0
 docs/en/{ => docs}/admin-manual/query-profile.md   |    0
 .../en/{ => docs}/admin-manual/sql-interception.md |    0
 .../advanced/alter-table/replace-table.md          |    0
 .../advanced/alter-table/schema-change.md          |    0
 .../{ => docs}/advanced/best-practice/debug-log.md |    0
 .../advanced/best-practice/import-analysis.md      |    0
 .../advanced/best-practice/query-analysis.md       |    0
 docs/en/{ => docs}/advanced/broker.md              |    0
 .../{ => docs}/advanced/cache/partition-cache.md   |    0
 docs/en/{ => docs}/advanced/cache/query-cache.md   |    0
 .../join-optimization/bucket-shuffle-join.md       |    0
 .../advanced/join-optimization/colocation-join.md  |    0
 .../join-optimization/doris-join-optimization.md   |    0
 .../advanced/join-optimization/runtime-filter.md   |    0
 docs/en/{ => docs}/advanced/materialized-view.md   |    0
 .../advanced/orthogonal-bitmap-manual.md           |    0
 .../{ => docs}/advanced/orthogonal-hll-manual.md   |    0
 .../advanced/partition/dynamic-partition.md        |    0
 .../advanced/partition/table-temp-partition.md     |    0
 docs/en/{ => docs}/advanced/resource.md            |    0
 docs/en/{ => docs}/advanced/small-file-mgr.md      |    0
 docs/en/{ => docs}/advanced/sql-mode.md            |    0
 docs/en/{ => docs}/advanced/time-zone.md           |    0
 docs/en/{ => docs}/advanced/using-hll.md           |    0
 docs/en/{ => docs}/advanced/variables.md           |    0
 .../advanced/vectorized-execution-engine.md        |    0
 docs/en/{ => docs}/benchmark/ssb.md                |    0
 .../data-operate/export/export-manual.md           |    0
 .../data-operate/export/export_with_mysql_dump.md  |    0
 docs/en/{ => docs}/data-operate/export/outfile.md  |    0
 .../import/import-scenes/external-storage-load.md  |    0
 .../import/import-scenes/external-table-load.md    |    0
 .../data-operate/import/import-scenes/jdbc-load.md |    0
 .../import/import-scenes/kafka-load.md             |    0
 .../import/import-scenes/load-atomicity.md         |    0
 .../import/import-scenes/load-data-convert.md      |    0
 .../import/import-scenes/load-strict-mode.md       |    0
 .../import/import-scenes/local-file-load.md        |    0
 .../import/import-way/binlog-load-manual.md        |    0
 .../import/import-way/broker-load-manual.md        |    0
 .../import/import-way/insert-into-manual.md        |    0
 .../import/import-way/load-json-format.md          |    0
 .../import/import-way/routine-load-manual.md       |    0
 .../import/import-way/s3-load-manual.md            |    0
 .../import/import-way/spark-load-manual.md         |    0
 .../import/import-way/stream-load-manual.md        |    0
 .../{ => docs}/data-operate/import/load-manual.md  |    0
 .../update-delete/batch-delete-manual.md           |    0
 .../data-operate/update-delete/delete-manual.md    |    0
 .../update-delete/sequence-column-manual.md        |    0
 .../data-operate/update-delete/update.md           |    0
 docs/en/{ => docs}/data-table/advance-usage.md     |    0
 docs/en/{ => docs}/data-table/basic-usage.md       |    0
 docs/en/{ => docs}/data-table/best-practice.md     |    0
 docs/en/{ => docs}/data-table/data-model.md        |    0
 docs/en/{ => docs}/data-table/data-partition.md    |    0
 docs/en/{ => docs}/data-table/hit-the-rollup.md    |    0
 .../en/{ => docs}/data-table/index/bitmap-index.md |    0
 docs/en/{ => docs}/data-table/index/bloomfilter.md |    0
 .../en/{ => docs}/data-table/index/prefix-index.md |    0
 docs/en/{ => docs}/ecosystem/audit-plugin.md       |    0
 docs/en/{ => docs}/ecosystem/datax.md              |    0
 .../ecosystem/doris-manager/cluster-managenent.md  |    0
 .../ecosystem/doris-manager/compiling-deploying.md |    0
 .../ecosystem/doris-manager/initializing.md        |    0
 .../ecosystem/doris-manager/space-list.md          |    0
 .../ecosystem/doris-manager/space-management.md    |    0
 .../ecosystem/doris-manager/system-settings.md     |    0
 .../ecosystem/external-table/doris-on-es.md        |    0
 .../ecosystem/external-table/hive-of-doris.md      |    0
 .../external-table/hudi-external-table.md          |    0
 .../ecosystem/external-table/iceberg-of-doris.md   |    0
 .../ecosystem/external-table/odbc-of-doris.md      |    0
 .../{ => docs}/ecosystem/flink-doris-connector.md  |    0
 docs/en/{ => docs}/ecosystem/logstash.md           |    0
 .../ecosystem/plugin-development-manual.md         |    0
 .../{ => docs}/ecosystem/seatunnel/flink-sink.md   |    0
 .../{ => docs}/ecosystem/seatunnel/spark-sink.md   |    0
 .../{ => docs}/ecosystem/spark-doris-connector.md  |    0
 docs/en/{ => docs}/ecosystem/udf/contribute-udf.md |    0
 .../ecosystem/udf/java-user-defined-function.md    |    0
 .../ecosystem/udf/native-user-defined-function.md  |    0
 .../ecosystem/udf/remote-user-defined-function.md  |    0
 docs/en/{ => docs}/faq/data-faq.md                 |    0
 docs/en/{ => docs}/faq/install-faq.md              |    0
 docs/en/{ => docs}/faq/sql-faq.md                  |    0
 docs/en/{ => docs}/get-starting/get-starting.md    |    0
 docs/en/{ => docs}/install/install-deploy.md       |    0
 .../install/source-install/compilation-arm.md      |    0
 .../compilation-with-ldb-toolchain.md              |    0
 .../install/source-install/compilation.md          |    0
 .../aggregate-functions/approx_count_distinct.md   |    0
 .../sql-functions/aggregate-functions/avg.md       |    0
 .../aggregate-functions/bitmap_union.md            |    0
 .../sql-functions/aggregate-functions/count.md     |    0
 .../aggregate-functions/group_concat.md            |    0
 .../aggregate-functions/hll_union_agg.md           |    0
 .../sql-functions/aggregate-functions/max.md       |    0
 .../sql-functions/aggregate-functions/max_by.md    |    0
 .../sql-functions/aggregate-functions/min.md       |    0
 .../sql-functions/aggregate-functions/min_by.md    |    0
 .../aggregate-functions/percentile.md              |    0
 .../aggregate-functions/percentile_approx.md       |    0
 .../sql-functions/aggregate-functions/stddev.md    |    0
 .../aggregate-functions/stddev_samp.md             |    0
 .../sql-functions/aggregate-functions/sum.md       |    0
 .../sql-functions/aggregate-functions/topn.md      |    0
 .../sql-functions/aggregate-functions/var_samp.md  |    0
 .../sql-functions/aggregate-functions/variance.md  |    0
 .../array-functions/array_contains.md              |    0
 .../array-functions/array_position.md              |    0
 .../sql-functions/array-functions/element_at.md    |    0
 .../sql-functions/bitmap-functions/bitmap_and.md   |    0
 .../bitmap-functions/bitmap_and_count.md           |    0
 .../bitmap-functions/bitmap_and_not.md             |    0
 .../bitmap-functions/bitmap_and_not_count.md       |    0
 .../bitmap-functions/bitmap_contains.md            |    0
 .../sql-functions/bitmap-functions/bitmap_empty.md |    0
 .../bitmap-functions/bitmap_from_string.md         |    0
 .../bitmap-functions/bitmap_has_all.md             |    0
 .../bitmap-functions/bitmap_has_any.md             |    0
 .../sql-functions/bitmap-functions/bitmap_hash.md  |    0
 .../bitmap-functions/bitmap_intersect.md           |    0
 .../sql-functions/bitmap-functions/bitmap_max.md   |    0
 .../sql-functions/bitmap-functions/bitmap_min.md   |    0
 .../sql-functions/bitmap-functions/bitmap_not.md   |    0
 .../sql-functions/bitmap-functions/bitmap_or.md    |    0
 .../bitmap-functions/bitmap_or_count.md            |    0
 .../bitmap-functions/bitmap_subset_in_range.md     |    0
 .../bitmap-functions/bitmap_subset_limit.md        |    0
 .../bitmap-functions/bitmap_to_string.md           |    0
 .../sql-functions/bitmap-functions/bitmap_union.md |    0
 .../sql-functions/bitmap-functions/bitmap_xor.md   |    0
 .../bitmap-functions/bitmap_xor_count.md           |    0
 .../orthogonal_bitmap_intersect.md                 |    0
 .../orthogonal_bitmap_intersect_count.md           |    0
 .../orthogonal_bitmap_union_count.md               |    0
 .../sql-functions/bitmap-functions/sub_bitmap.md   |    0
 .../sql-functions/bitmap-functions/to_bitmap.md    |    0
 .../sql-functions/bitwise-functions/bitand.md      |    0
 .../sql-functions/bitwise-functions/bitnot.md      |    0
 .../sql-functions/bitwise-functions/bitor.md       |    0
 .../sql-functions/bitwise-functions/bitxor.md      |    0
 .../en/{ => docs}/sql-manual/sql-functions/cast.md |    0
 .../sql-functions/conditional-functions/case.md    |    0
 .../conditional-functions/coalesce.md              |    0
 .../sql-functions/conditional-functions/if.md      |    0
 .../sql-functions/conditional-functions/ifnull.md  |    0
 .../sql-functions/conditional-functions/nullif.md  |    0
 .../sql-functions/conditional-functions/nvl.md     |    0
 .../date-time-functions/convert_tz.md              |    0
 .../sql-functions/date-time-functions/curdate.md   |    0
 .../date-time-functions/current_timestamp.md       |    0
 .../sql-functions/date-time-functions/curtime.md   |    0
 .../sql-functions/date-time-functions/date_add.md  |    0
 .../date-time-functions/date_format.md             |    0
 .../sql-functions/date-time-functions/date_sub.md  |    0
 .../sql-functions/date-time-functions/datediff.md  |    0
 .../sql-functions/date-time-functions/day.md       |    0
 .../sql-functions/date-time-functions/dayname.md   |    0
 .../date-time-functions/dayofmonth.md              |    0
 .../sql-functions/date-time-functions/dayofweek.md |    0
 .../sql-functions/date-time-functions/dayofyear.md |    0
 .../sql-functions/date-time-functions/from_days.md |    0
 .../date-time-functions/from_unixtime.md           |    0
 .../sql-functions/date-time-functions/hour.md      |    0
 .../sql-functions/date-time-functions/makedate.md  |    0
 .../sql-functions/date-time-functions/minute.md    |    0
 .../sql-functions/date-time-functions/month.md     |    0
 .../sql-functions/date-time-functions/monthname.md |    0
 .../sql-functions/date-time-functions/now.md       |    0
 .../sql-functions/date-time-functions/second.md    |    0
 .../date-time-functions/str_to_date.md             |    0
 .../date-time-functions/time_round.md              |    0
 .../sql-functions/date-time-functions/timediff.md  |    0
 .../date-time-functions/timestampadd.md            |    0
 .../date-time-functions/timestampdiff.md           |    0
 .../sql-functions/date-time-functions/to_date.md   |    0
 .../sql-functions/date-time-functions/to_days.md   |    0
 .../date-time-functions/unix_timestamp.md          |    0
 .../date-time-functions/utc_timestamp.md           |    0
 .../sql-functions/date-time-functions/week.md      |    0
 .../sql-functions/date-time-functions/weekday.md   |    0
 .../date-time-functions/weekofyear.md              |    0
 .../sql-functions/date-time-functions/year.md      |    0
 .../sql-functions/date-time-functions/yearweek.md  |    0
 .../sql-manual/sql-functions/digital-masking.md    |    0
 .../sql-functions/encrypt-digest-functions/aes.md  |    0
 .../sql-functions/encrypt-digest-functions/md5.md  |    0
 .../encrypt-digest-functions/md5sum.md             |    0
 .../sql-functions/encrypt-digest-functions/sm3.md  |    0
 .../encrypt-digest-functions/sm3sum.md             |    0
 .../sql-functions/encrypt-digest-functions/sm4.md  |    0
 .../hash-functions/murmur_hash3_32.md              |    0
 .../json-functions/get_json_double.md              |    0
 .../sql-functions/json-functions/get_json_int.md   |    0
 .../json-functions/get_json_string.md              |    0
 .../sql-functions/json-functions/json_array.md     |    0
 .../sql-functions/json-functions/json_object.md    |    0
 .../sql-functions/json-functions/json_quote.md     |    0
 .../sql-functions/math-functions/conv.md           |    0
 .../sql-functions/math-functions/pmod.md           |    0
 .../sql-functions/spatial-functions/st_astext.md   |    0
 .../sql-functions/spatial-functions/st_circle.md   |    0
 .../sql-functions/spatial-functions/st_contains.md |    0
 .../spatial-functions/st_distance_sphere.md        |    0
 .../spatial-functions/st_geometryfromtext.md       |    0
 .../spatial-functions/st_linefromtext.md           |    0
 .../sql-functions/spatial-functions/st_point.md    |    0
 .../sql-functions/spatial-functions/st_polygon.md  |    0
 .../sql-functions/spatial-functions/st_x.md        |    0
 .../sql-functions/spatial-functions/st_y.md        |    0
 .../append_trailing_char_if_absent.md              |    0
 .../sql-functions/string-functions/ascii.md        |    0
 .../sql-functions/string-functions/bit_length.md   |    0
 .../sql-functions/string-functions/char_length.md  |    0
 .../sql-functions/string-functions/concat.md       |    0
 .../sql-functions/string-functions/concat_ws.md    |    0
 .../sql-functions/string-functions/ends_with.md    |    0
 .../sql-functions/string-functions/find_in_set.md  |    0
 .../sql-functions/string-functions/hex.md          |    0
 .../sql-functions/string-functions/instr.md        |    0
 .../sql-functions/string-functions/lcase.md        |    0
 .../sql-functions/string-functions/left.md         |    0
 .../sql-functions/string-functions/length.md       |    0
 .../sql-functions/string-functions/like/like.md    |    0
 .../string-functions/like/not_like.md              |    0
 .../sql-functions/string-functions/locate.md       |    0
 .../sql-functions/string-functions/lower.md        |    0
 .../sql-functions/string-functions/lpad.md         |    0
 .../sql-functions/string-functions/ltrim.md        |    0
 .../sql-functions/string-functions/money_format.md |    0
 .../string-functions/null_or_empty.md              |    0
 .../string-functions/regexp/not_regexp.md          |    0
 .../string-functions/regexp/regexp.md              |    0
 .../string-functions/regexp/regexp_extract.md      |    0
 .../string-functions/regexp/regexp_replace.md      |    0
 .../sql-functions/string-functions/repeat.md       |    0
 .../sql-functions/string-functions/replace.md      |    0
 .../sql-functions/string-functions/reverse.md      |    0
 .../sql-functions/string-functions/right.md        |    0
 .../sql-functions/string-functions/rpad.md         |    0
 .../sql-functions/string-functions/split_part.md   |    0
 .../sql-functions/string-functions/starts_with.md  |    0
 .../sql-functions/string-functions/strleft.md      |    0
 .../sql-functions/string-functions/strright.md     |    0
 .../sql-functions/string-functions/substring.md    |    0
 .../sql-functions/string-functions/unhex.md        |    0
 .../table-functions/explode-bitmap.md              |    0
 .../table-functions/explode-json-array.md          |    0
 .../table-functions/explode-numbers.md             |    0
 .../sql-functions/table-functions/explode-split.md |    0
 .../table-functions/outer-combinator.md            |    0
 .../window-functions/WINDOW-FUNCTION-AVG.md        |    0
 .../window-functions/WINDOW-FUNCTION-COUNT.md      |    0
 .../window-functions/WINDOW-FUNCTION-DENSE-RANK.md |    0
 .../WINDOW-FUNCTION-FIRST-VALUE.md                 |    0
 .../window-functions/WINDOW-FUNCTION-LAG.md        |    0
 .../window-functions/WINDOW-FUNCTION-LAST-VALUE.md |    0
 .../window-functions/WINDOW-FUNCTION-LEAD.md       |    0
 .../window-functions/WINDOW-FUNCTION-MAX.md        |    0
 .../window-functions/WINDOW-FUNCTION-MIN.md        |    0
 .../window-functions/WINDOW-FUNCTION-RANK.md       |    0
 .../window-functions/WINDOW-FUNCTION-ROW-NUMBER.md |    0
 .../window-functions/WINDOW-FUNCTION-SUM.md        |    0
 .../window-functions/WINDOW-FUNCTION.md            |    0
 .../Account-Management-Statements/CREATE-ROLE.md   |    0
 .../Account-Management-Statements/CREATE-USER.md   |    0
 .../Account-Management-Statements/DROP-ROLE.md     |    0
 .../Account-Management-Statements/DROP-USER.md     |    0
 .../Account-Management-Statements/GRANT.md         |    0
 .../Account-Management-Statements/LDAP.md          |    0
 .../Account-Management-Statements/REVOKE.md        |    0
 .../Account-Management-Statements/SET-PASSWORD.md  |    0
 .../Account-Management-Statements/SET-PROPERTY.md  |    0
 .../ALTER-SYSTEM-ADD-BACKEND.md                    |    0
 .../ALTER-SYSTEM-ADD-BROKER.md                     |    0
 .../ALTER-SYSTEM-ADD-FOLLOWER.md                   |    0
 .../ALTER-SYSTEM-ADD-OBSERVER.md                   |    0
 .../ALTER-SYSTEM-DECOMMISSION-BACKEND.md           |    0
 .../ALTER-SYSTEM-DROP-BACKEND.md                   |    0
 .../ALTER-SYSTEM-DROP-BROKER.md                    |    0
 .../ALTER-SYSTEM-DROP-FOLLOWER.md                  |    0
 .../ALTER-SYSTEM-DROP-OBSERVER.md                  |    0
 .../ALTER-SYSTEM-MODIFY-BACKEND.md                 |    0
 .../ALTER-SYSTEM-MODIFY-BROKER.md                  |    0
 .../CANCEL-ALTER-SYSTEM.md                         |    0
 .../Alter/ALTER-DATABASE.md                        |    0
 .../Alter/ALTER-RESOURCE.md                        |    0
 .../Alter/ALTER-SQL-BLOCK-RULE.md                  |    0
 .../Alter/ALTER-TABLE-BITMAP.md                    |    0
 .../Alter/ALTER-TABLE-COLUMN.md                    |    0
 .../Alter/ALTER-TABLE-PARTITION.md                 |    0
 .../Alter/ALTER-TABLE-PROPERTY.md                  |    0
 .../Alter/ALTER-TABLE-RENAME.md                    |    0
 .../Alter/ALTER-TABLE-REPLACE.md                   |    0
 .../Alter/ALTER-TABLE-ROLLUP.md                    |    0
 .../Data-Definition-Statements/Alter/ALTER-VIEW.md |    0
 .../Alter/CANCEL-ALTER-TABLE.md                    |    0
 .../Backup-and-Restore/BACKUP.md                   |    0
 .../Backup-and-Restore/CANCEL-BACKUP.md            |    0
 .../Backup-and-Restore/CANCEL-RESTORE.md           |    0
 .../Backup-and-Restore/CREATE-REPOSITORY.md        |    0
 .../Backup-and-Restore/DROP-REPOSITORY.md          |    0
 .../Backup-and-Restore/RESTORE.md                  |    0
 .../Create/CREATE-DATABASE.md                      |    0
 .../Create/CREATE-ENCRYPT-KEY.md                   |    0
 .../Create/CREATE-EXTERNAL-TABLE.md                |    0
 .../Create/CREATE-FILE.md                          |    0
 .../Create/CREATE-FUNCTION.md                      |    0
 .../Create/CREATE-INDEX.md                         |    0
 .../Create/CREATE-MATERIALIZED-VIEW.md             |    0
 .../Create/CREATE-POLICY.md                        |    0
 .../Create/CREATE-RESOURCE.md                      |    0
 .../Create/CREATE-SQL-BLOCK-RULE.md                |    0
 .../Create/CREATE-TABLE-AS-SELECT.md               |    0
 .../Create/CREATE-TABLE-LIKE.md                    |    0
 .../Create/CREATE-TABLE.md                         |    0
 .../Create/CREATE-VIEW.md                          |    0
 .../Drop/DROP-DATABASE.md                          |    0
 .../Drop/DROP-ENCRYPT-KEY.md                       |    0
 .../Data-Definition-Statements/Drop/DROP-FILE.md   |    0
 .../Drop/DROP-FUNCTION.md                          |    0
 .../Data-Definition-Statements/Drop/DROP-INDEX.md  |    0
 .../Drop/DROP-MATERIALIZED-VIEW.md                 |    0
 .../Drop/DROP-RESOURCE.md                          |    0
 .../Drop/DROP-SQL-BLOCK-RULE.md                    |    0
 .../Data-Definition-Statements/Drop/DROP-TABLE.md  |    0
 .../Drop/TRUNCATE-TABLE.md                         |    0
 .../Load/ALTER-ROUTINE-LOAD.md                     |    0
 .../Load/BROKER-LOAD.md                            |    0
 .../Load/CANCEL-LOAD.md                            |    0
 .../Load/CREATE-ROUTINE-LOAD.md                    |    0
 .../Load/CREATE-SYNC-JOB.md                        |    0
 .../Load/MULTI-LOAD.md                             |    0
 .../Load/PAUSE-ROUTINE-LOAD.md                     |    0
 .../Load/PAUSE-SYNC-JOB.md                         |    0
 .../Load/RESUME-ROUTINE-LOAD.md                    |    0
 .../Load/RESUME-SYNC-JOB.md                        |    0
 .../Load/STOP-ROUTINE-LOAD.md                      |    0
 .../Load/STOP-SYNC-JOB.md                          |    0
 .../Load/STREAM-LOAD.md                            |    0
 .../Manipulation/DELETE.md                         |    0
 .../Manipulation/EXPORT.md                         |    0
 .../Manipulation/INSERT.md                         |    0
 .../Manipulation/SELECT.md                         |    0
 .../Manipulation/UPDATE.md                         |    0
 .../Data-Manipulation-Statements/OUTFILE.md        |    0
 .../sql-manual/sql-reference/Data-Types/ARRAY.md   |    0
 .../sql-manual/sql-reference/Data-Types/BIGINT.md  |    0
 .../sql-manual/sql-reference/Data-Types/BITMAP.md  |    0
 .../sql-manual/sql-reference/Data-Types/BOOLEAN.md |    0
 .../sql-manual/sql-reference/Data-Types/CHAR.md    |    0
 .../sql-manual/sql-reference/Data-Types/DATE.md    |    0
 .../sql-reference/Data-Types/DATETIME.md           |    0
 .../sql-manual/sql-reference/Data-Types/DECIMAL.md |    0
 .../sql-manual/sql-reference/Data-Types/DOUBLE.md  |    0
 .../sql-manual/sql-reference/Data-Types/FLOAT.md   |    0
 .../sql-manual/sql-reference/Data-Types/HLL.md     |    0
 .../sql-manual/sql-reference/Data-Types/INT.md     |    0
 .../sql-reference/Data-Types/LARGEINT.md           |    0
 .../sql-reference/Data-Types/QUANTILE_STATE.md     |    0
 .../sql-reference/Data-Types/SMALLINT.md           |    0
 .../sql-manual/sql-reference/Data-Types/STRING.md  |    0
 .../sql-manual/sql-reference/Data-Types/TINYINT.md |    0
 .../sql-manual/sql-reference/Data-Types/VARCHAR.md |    0
 .../ADMIN-CANCEL-REPAIR.md                         |    0
 .../ADMIN-CHECK-TABLET.md                          |    0
 .../ADMIN-CLEAN-TRASH.md                           |    0
 .../ADMIN-REPAIR-TABLE.md                          |    0
 .../ADMIN-SET-CONFIG.md                            |    0
 .../ADMIN-SET-REPLICA-STATUS.md                    |    0
 .../ADMIN-SHOW-CONFIG.md                           |    0
 .../ADMIN-SHOW-REPLICA-DISTRIBUTION.md             |    0
 .../ADMIN-SHOW-REPLICA-STATUS.md                   |    0
 .../ADMIN-SHOW-TABLET-STORAGE-FORMAT.md            |    0
 .../ENABLE-FEATURE.md                              |    0
 .../INSTALL-PLUGIN.md                              |    0
 .../Database-Administration-Statements/KILL.md     |    0
 .../Database-Administration-Statements/RECOVER.md  |    0
 .../SET-VARIABLE.md                                |    0
 .../UNINSTALL-PLUGIN.md                            |    0
 .../SHOW-ALTER-TABLE-MATERIALIZED-VIEW.md          |    0
 .../sql-reference/Show-Statements/SHOW-ALTER.md    |    0
 .../sql-reference/Show-Statements/SHOW-BACKENDS.md |    0
 .../sql-reference/Show-Statements/SHOW-BACKUP.md   |    0
 .../sql-reference/Show-Statements/SHOW-BROKER.md   |    0
 .../sql-reference/Show-Statements/SHOW-CHARSET.md  |    0
 .../Show-Statements/SHOW-COLLATION.md              |    0
 .../sql-reference/Show-Statements/SHOW-COLUMNS.md  |    0
 .../Show-Statements/SHOW-CREATE-DATABASE.md        |    0
 .../Show-Statements/SHOW-CREATE-FUNCTION.md        |    0
 .../SHOW-CREATE-MATERIALIZED-VIEW.md               |    0
 .../Show-Statements/SHOW-CREATE-ROUTINE-LOAD.md    |    0
 .../Show-Statements/SHOW-CREATE-TABLE.md           |    0
 .../sql-reference/Show-Statements/SHOW-DATA.md     |    0
 .../Show-Statements/SHOW-DATABASE-ID.md            |    0
 .../Show-Statements/SHOW-DATABASES.md              |    0
 .../sql-reference/Show-Statements/SHOW-DELETE.md   |    0
 .../Show-Statements/SHOW-DYNAMIC-PARTITION.md      |    0
 .../Show-Statements/SHOW-ENCRYPT-KEY.md            |    0
 .../sql-reference/Show-Statements/SHOW-ENGINES.md  |    0
 .../sql-reference/Show-Statements/SHOW-EVENTS.md   |    0
 .../sql-reference/Show-Statements/SHOW-EXPORT.md   |    0
 .../sql-reference/Show-Statements/SHOW-FILE.md     |    0
 .../Show-Statements/SHOW-FRONTENDS.md              |    0
 .../Show-Statements/SHOW-FUNCTIONS.md              |    0
 .../sql-reference/Show-Statements/SHOW-GRANTS.md   |    0
 .../sql-reference/Show-Statements/SHOW-INDEX.md    |    0
 .../Show-Statements/SHOW-LAST-INSERT.md            |    0
 .../Show-Statements/SHOW-LOAD-PROFILE.md           |    0
 .../Show-Statements/SHOW-LOAD-WARNINGS.md          |    0
 .../sql-reference/Show-Statements/SHOW-LOAD.md     |    0
 .../Show-Statements/SHOW-MIGRATIONS.md             |    0
 .../Show-Statements/SHOW-OPEN-TABLES.md            |    0
 .../Show-Statements/SHOW-PARTITION-ID.md           |    0
 .../Show-Statements/SHOW-PARTITIONS.md             |    0
 .../sql-reference/Show-Statements/SHOW-PLUGINS.md  |    0
 .../sql-reference/Show-Statements/SHOW-PROC.md     |    0
 .../Show-Statements/SHOW-PROCEDURE.md              |    0
 .../Show-Statements/SHOW-PROCESSLIST.md            |    0
 .../sql-reference/Show-Statements/SHOW-PROPERTY.md |    0
 .../Show-Statements/SHOW-QUERY-PROFILE.md          |    0
 .../Show-Statements/SHOW-REPOSITORIES.md           |    0
 .../Show-Statements/SHOW-RESOURCES.md              |    0
 .../sql-reference/Show-Statements/SHOW-RESTORE.md  |    0
 .../sql-reference/Show-Statements/SHOW-ROLES.md    |    0
 .../sql-reference/Show-Statements/SHOW-ROLLUP.md   |    0
 .../Show-Statements/SHOW-ROUTINE-LOAD-TASK.md      |    0
 .../Show-Statements/SHOW-ROUTINE-LOAD.md           |    0
 .../Show-Statements/SHOW-SMALL-FILES.md            |    0
 .../sql-reference/Show-Statements/SHOW-SNAPSHOT.md |    0
 .../Show-Statements/SHOW-SQL-BLOCK-RULE.md         |    0
 .../sql-reference/Show-Statements/SHOW-STATUS.md   |    0
 .../Show-Statements/SHOW-STREAM-LOAD.md            |    0
 .../sql-reference/Show-Statements/SHOW-SYNC-JOB.md |    0
 .../sql-reference/Show-Statements/SHOW-TABLE-ID.md |    0
 .../Show-Statements/SHOW-TABLE-STATUS.md           |    0
 .../sql-reference/Show-Statements/SHOW-TABLES.md   |    0
 .../sql-reference/Show-Statements/SHOW-TABLET.md   |    0
 .../Show-Statements/SHOW-TRANSACTION.md            |    0
 .../sql-reference/Show-Statements/SHOW-TRASH.md    |    0
 .../sql-reference/Show-Statements/SHOW-TRIGGERS.md |    0
 .../sql-reference/Show-Statements/SHOW-USER.md     |    0
 .../Show-Statements/SHOW-VARIABLES.md              |    0
 .../sql-reference/Show-Statements/SHOW-VIEW.md     |    0
 .../sql-reference/Show-Statements/SHOW-WARNING.md  |    0
 .../Show-Statements/SHOW-WHITE-LIST.md             |    0
 .../sql-reference/Utility-Statements/DESCRIBE.md   |    0
 .../sql-reference/Utility-Statements/HELP.md       |    0
 .../sql-reference/Utility-Statements/USE.md        |    0
 docs/en/{ => docs}/summary/basic-summary.md        |    0
 docs/en/{ => docs}/summary/system-architecture.md  |    0
 docs/en/userCase/user.md                           |   92 +
 docs/package.json                                  |   58 +-
 docs/zh-CN/README.md                               |  433 +++-
 docs/zh-CN/article/article-list.md                 |    7 -
 .../design/doris_storage_optimization.md           |    0
 .../design/flink_doris_connector_design.md         |    0
 .../{ => developer}/design/grouping_sets_design.md |    0
 .../{ => developer}/design/metadata-design.md      |    0
 docs/zh-CN/{ => developer}/design/spark_load.md    |    0
 .../developer-guide/be-vscode-dev.md               |    0
 .../developer-guide/benchmark-tool.md              |    0
 .../developer-guide/bitmap-hll-file-format.md      |    0
 .../developer-guide/cpp-diagnostic-code.md         |    0
 .../developer-guide/cpp-format-code.md             |    0
 .../{ => developer}/developer-guide/debug-tool.md  |    0
 .../{ => developer}/developer-guide/docker-dev.md  |    0
 .../developer-guide/fe-eclipse-dev.md              |    0
 .../{ => developer}/developer-guide/fe-idea-dev.md |    0
 .../developer-guide/fe-vscode-dev.md               |    0
 .../developer-guide/github-checks.md               |    0
 .../developer-guide/how-to-share-blogs.md          |    0
 .../developer-guide/java-format-code.md            |    0
 .../{ => developer}/developer-guide/minidump.md    |    0
 .../developer-guide/regression-testing.md          |    0
 .../cluster-management/elastic-expansion.md        |    0
 .../cluster-management/load-balancing.md           |    0
 .../admin-manual/cluster-management/upgrade.md     |    0
 .../{ => docs}/admin-manual/config/be-config.md    |    0
 .../{ => docs}/admin-manual/config/fe-config.md    |    0
 .../admin-manual/config/user-property.md           |    0
 .../{ => docs}/admin-manual/data-admin/backup.md   |    0
 .../admin-manual/data-admin/delete-recover.md      |    0
 .../{ => docs}/admin-manual/data-admin/restore.md  |    0
 .../admin-manual/http-actions/cancel-label.md      |    0
 .../http-actions/check-reset-rpc-cache.md          |    0
 .../admin-manual/http-actions/compaction-action.md |    0
 .../admin-manual/http-actions/connection-action.md |    0
 .../admin-manual/http-actions/fe-get-log-file.md   |    0
 .../http-actions/fe/backends-action.md             |    0
 .../http-actions/fe/bootstrap-action.md            |    0
 .../http-actions/fe/cancel-load-action.md          |    0
 .../http-actions/fe/check-decommission-action.md   |    0
 .../http-actions/fe/check-storage-type-action.md   |    0
 .../admin-manual/http-actions/fe/config-action.md  |    0
 .../http-actions/fe/connection-action.md           |    0
 .../http-actions/fe/get-ddl-stmt-action.md         |    0
 .../http-actions/fe/get-load-info-action.md        |    0
 .../admin-manual/http-actions/fe/get-load-state.md |    0
 .../http-actions/fe/get-log-file-action.md         |    0
 .../admin-manual/http-actions/fe/get-small-file.md |    0
 .../admin-manual/http-actions/fe/ha-action.md      |    0
 .../http-actions/fe/hardware-info-action.md        |    0
 .../admin-manual/http-actions/fe/health-action.md  |    0
 .../admin-manual/http-actions/fe/log-action.md     |    0
 .../admin-manual/http-actions/fe/logout-action.md  |    0
 .../http-actions/fe/manager/cluster-action.md      |    0
 .../http-actions/fe/manager/node-action.md         |    0
 .../fe/manager/query-profile-action.md             |    0
 .../admin-manual/http-actions/fe/meta-action.md    |    0
 .../http-actions/fe/meta-info-action.md            |    0
 .../http-actions/fe/meta-replay-state-action.md    |    0
 .../admin-manual/http-actions/fe/profile-action.md |    0
 .../http-actions/fe/query-detail-action.md         |    0
 .../http-actions/fe/query-profile-action.md        |    0
 .../http-actions/fe/row-count-action.md            |    0
 .../admin-manual/http-actions/fe/session-action.md |    0
 .../http-actions/fe/set-config-action.md           |    0
 .../http-actions/fe/show-data-action.md            |    0
 .../http-actions/fe/show-meta-info-action.md       |    0
 .../http-actions/fe/show-proc-action.md            |    0
 .../http-actions/fe/show-runtime-info-action.md    |    0
 .../http-actions/fe/statement-execution-action.md  |    0
 .../admin-manual/http-actions/fe/system-action.md  |    0
 .../http-actions/fe/table-query-plan-action.md     |    0
 .../http-actions/fe/table-row-count-action.md      |    0
 .../http-actions/fe/table-schema-action.md         |    0
 .../admin-manual/http-actions/fe/upload-action.md  |    0
 .../admin-manual/http-actions/get-load-state.md    |    0
 .../admin-manual/http-actions/get-tablets.md       |    0
 .../admin-manual/http-actions/profile-action.md    |    0
 .../http-actions/query-detail-action.md            |    0
 .../admin-manual/http-actions/restore-tablet.md    |    0
 .../admin-manual/http-actions/show-data-action.md  |    0
 .../http-actions/tablet-migration-action.md        |    0
 .../http-actions/tablets_distribution.md           |    0
 .../maint-monitor/be-olap-error-code.md            |    0
 .../admin-manual/maint-monitor/disk-capacity.md    |    0
 .../admin-manual/maint-monitor/doris-error-code.md |    0
 .../maint-monitor/metadata-operation.md            |    0
 .../admin-manual/maint-monitor/monitor-alert.md    |    0
 .../maint-monitor/monitor-metrics/be-metrics.md    |    0
 .../maint-monitor/monitor-metrics/fe-metrics.md    |    0
 .../admin-manual/maint-monitor/tablet-meta-tool.md |    0
 .../maint-monitor/tablet-repair-and-balance.md     |    0
 .../maint-monitor/tablet-restore-tool.md           |    0
 docs/zh-CN/{ => docs}/admin-manual/multi-tenant.md |    0
 docs/zh-CN/{ => docs}/admin-manual/optimization.md |    0
 .../{ => docs}/admin-manual/privilege-ldap/ldap.md |    0
 .../admin-manual/privilege-ldap/user-privilege.md  |    0
 .../zh-CN/{ => docs}/admin-manual/query-profile.md |    0
 .../{ => docs}/admin-manual/sql-interception.md    |    0
 .../advanced/alter-table/replace-table.md          |    0
 .../advanced/alter-table/schema-change.md          |    0
 .../{ => docs}/advanced/best-practice/debug-log.md |    0
 .../advanced/best-practice/import-analysis.md      |    0
 .../advanced/best-practice/query-analysis.md       |    0
 docs/zh-CN/{ => docs}/advanced/broker.md           |    0
 .../{ => docs}/advanced/cache/partition-cache.md   |    0
 .../join-optimization/bucket-shuffle-join.md       |    0
 .../advanced/join-optimization/colocation-join.md  |    0
 .../join-optimization/doris-join-optimization.md   |    0
 .../advanced/join-optimization/runtime-filter.md   |    0
 .../zh-CN/{ => docs}/advanced/materialized-view.md |    0
 .../advanced/orthogonal-bitmap-manual.md           |    0
 .../advanced/partition/dynamic-partition.md        |    0
 .../advanced/partition/table-tmp-partition.md      |    0
 docs/zh-CN/{ => docs}/advanced/resource.md         |    0
 docs/zh-CN/{ => docs}/advanced/small-file-mgr.md   |    0
 docs/zh-CN/{ => docs}/advanced/sql-mode.md         |    0
 docs/zh-CN/{ => docs}/advanced/time-zone.md        |    0
 docs/zh-CN/{ => docs}/advanced/using-hll.md        |    0
 docs/zh-CN/{ => docs}/advanced/variables.md        |    0
 .../advanced/vectorized-execution-engine.md        |    0
 docs/zh-CN/{ => docs}/benchmark/ssb.md             |    0
 .../data-operate/export/export-manual.md           |    0
 .../data-operate/export/export_with_mysql_dump.md  |    0
 .../{ => docs}/data-operate/export/outfile.md      |    0
 .../import/import-scenes/external-storage-load.md  |    0
 .../import/import-scenes/external-table-load.md    |    0
 .../data-operate/import/import-scenes/jdbc-load.md |    0
 .../import/import-scenes/kafka-load.md             |    0
 .../import/import-scenes/load-atomicity.md         |    0
 .../import/import-scenes/load-data-convert.md      |    0
 .../import/import-scenes/load-strict-mode.md       |    0
 .../import/import-scenes/local-file-load.md        |    0
 .../import/import-way/binlog-load-manual.md        |    0
 .../import/import-way/broker-load-manual.md        |    0
 .../import/import-way/insert-into-manual.md        |    0
 .../import/import-way/load-json-format.md          |    0
 .../import/import-way/routine-load-manual.md       |    0
 .../import/import-way/s3-load-manual.md            |    0
 .../import/import-way/spark-load-manual.md         |    0
 .../import/import-way/stream-load-manual.md        |    0
 .../{ => docs}/data-operate/import/load-manual.md  |    0
 .../update-delete/batch-delete-manual.md           |    0
 .../data-operate/update-delete/delete-manual.md    |    0
 .../update-delete/sequence-column-manual.md        |    0
 .../data-operate/update-delete/update.md           |    0
 docs/zh-CN/{ => docs}/data-table/advance-usage.md  |    0
 docs/zh-CN/{ => docs}/data-table/basic-usage.md    |    0
 docs/zh-CN/{ => docs}/data-table/best-practice.md  |    0
 docs/zh-CN/{ => docs}/data-table/data-model.md     |    0
 docs/zh-CN/{ => docs}/data-table/data-partition.md |    0
 docs/zh-CN/{ => docs}/data-table/hit-the-rollup.md |    0
 .../{ => docs}/data-table/index/bitmap-index.md    |    0
 .../{ => docs}/data-table/index/bloomfilter.md     |    0
 .../{ => docs}/data-table/index/prefix-index.md    |    0
 docs/zh-CN/{ => docs}/ecosystem/audit-plugin.md    |    0
 docs/zh-CN/{ => docs}/ecosystem/datax.md           |    0
 .../ecosystem/doris-manager/cluster-managenent.md  |    0
 .../ecosystem/doris-manager/compiling-deploying.md |    0
 .../ecosystem/doris-manager/initializing.md        |    0
 .../ecosystem/doris-manager/space-list.md          |    0
 .../ecosystem/doris-manager/space-management.md    |    0
 .../ecosystem/doris-manager/system-settings.md     |    0
 .../ecosystem/external-table/doris-on-es.md        |    0
 .../ecosystem/external-table/hive-of-doris.md      |    0
 .../external-table/hudi-external-table.md          |    0
 .../ecosystem/external-table/iceberg-of-doris.md   |    0
 .../ecosystem/external-table/odbc-of-doris.md      |    0
 .../{ => docs}/ecosystem/flink-doris-connector.md  |    0
 docs/zh-CN/{ => docs}/ecosystem/logstash.md        |    0
 .../ecosystem/plugin-development-manual.md         |    0
 .../{ => docs}/ecosystem/seatunnel/flink-sink.md   |    0
 .../{ => docs}/ecosystem/seatunnel/spark-sink.md   |    0
 .../{ => docs}/ecosystem/spark-doris-connector.md  |    0
 .../{ => docs}/ecosystem/udf/contribute-udf.md     |    0
 .../ecosystem/udf/java-user-defined-function.md    |    0
 .../ecosystem/udf/native-user-defined-function.md  |    0
 .../ecosystem/udf/remote-user-defined-function.md  |    0
 docs/zh-CN/{ => docs}/faq/data-faq.md              |    0
 docs/zh-CN/{ => docs}/faq/install-faq.md           |    0
 docs/zh-CN/{ => docs}/faq/sql-faq.md               |    0
 docs/zh-CN/{ => docs}/get-starting/get-starting.md |    0
 docs/zh-CN/{ => docs}/install/install-deploy.md    |    0
 .../install/source-install/compilation-arm.md      |    0
 .../compilation-with-ldb-toolchain.md              |    0
 .../install/source-install/compilation.md          |    0
 .../aggregate-functions/approx_count_distinct.md   |    0
 .../sql-functions/aggregate-functions/avg.md       |    0
 .../aggregate-functions/bitmap_union.md            |    0
 .../sql-functions/aggregate-functions/count.md     |    0
 .../aggregate-functions/group_concat.md            |    0
 .../aggregate-functions/hll_union_agg.md           |    0
 .../sql-functions/aggregate-functions/max.md       |    0
 .../sql-functions/aggregate-functions/max_by.md    |    0
 .../sql-functions/aggregate-functions/min.md       |    0
 .../sql-functions/aggregate-functions/min_by.md    |    0
 .../aggregate-functions/percentile.md              |    0
 .../aggregate-functions/percentile_approx.md       |    0
 .../sql-functions/aggregate-functions/stddev.md    |    0
 .../aggregate-functions/stddev_samp.md             |    0
 .../sql-functions/aggregate-functions/sum.md       |    0
 .../sql-functions/aggregate-functions/topn.md      |    0
 .../sql-functions/aggregate-functions/var_samp.md  |    0
 .../sql-functions/aggregate-functions/variance.md  |    0
 .../array-functions/array_contains.md              |    0
 .../array-functions/array_position.md              |    0
 .../sql-functions/array-functions/element_at.md    |    0
 .../sql-functions/bitmap-functions/bitmap_and.md   |    0
 .../bitmap-functions/bitmap_and_count.md           |    0
 .../bitmap-functions/bitmap_and_not.md             |    0
 .../bitmap-functions/bitmap_and_not_count.md       |    0
 .../bitmap-functions/bitmap_contains.md            |    0
 .../sql-functions/bitmap-functions/bitmap_empty.md |    0
 .../bitmap-functions/bitmap_from_string.md         |    0
 .../bitmap-functions/bitmap_has_all.md             |    0
 .../bitmap-functions/bitmap_has_any.md             |    0
 .../sql-functions/bitmap-functions/bitmap_hash.md  |    0
 .../bitmap-functions/bitmap_intersect.md           |    0
 .../sql-functions/bitmap-functions/bitmap_max.md   |    0
 .../sql-functions/bitmap-functions/bitmap_min.md   |    0
 .../sql-functions/bitmap-functions/bitmap_not.md   |    0
 .../sql-functions/bitmap-functions/bitmap_or.md    |    0
 .../bitmap-functions/bitmap_or_count.md            |    0
 .../bitmap-functions/bitmap_subset_in_range.md     |    0
 .../bitmap-functions/bitmap_subset_limit.md        |    0
 .../bitmap-functions/bitmap_to_string.md           |    0
 .../sql-functions/bitmap-functions/bitmap_union.md |    0
 .../sql-functions/bitmap-functions/bitmap_xor.md   |    0
 .../bitmap-functions/bitmap_xor_count.md           |    0
 .../orthogonal_bitmap_intersect.md                 |    0
 .../orthogonal_bitmap_intersect_count.md           |    0
 .../orthogonal_bitmap_union_count.md               |    0
 .../sql-functions/bitmap-functions/sub_bitmap.md   |    0
 .../sql-functions/bitmap-functions/to_bitmap.md    |    0
 .../sql-functions/bitwise-functions/bitand.md      |    0
 .../sql-functions/bitwise-functions/bitnot.md      |    0
 .../sql-functions/bitwise-functions/bitor.md       |    0
 .../sql-functions/bitwise-functions/bitxor.md      |    0
 .../{ => docs}/sql-manual/sql-functions/cast.md    |    0
 .../sql-functions/conditional-functions/case.md    |    0
 .../conditional-functions/coalesce.md              |    0
 .../sql-functions/conditional-functions/if.md      |    0
 .../sql-functions/conditional-functions/ifnull.md  |    0
 .../sql-functions/conditional-functions/nullif.md  |    0
 .../sql-functions/conditional-functions/nvl.md     |    0
 .../date-time-functions/convert_tz.md              |    0
 .../sql-functions/date-time-functions/curdate.md   |    0
 .../date-time-functions/current_timestamp.md       |    0
 .../sql-functions/date-time-functions/curtime.md   |    0
 .../sql-functions/date-time-functions/date_add.md  |    0
 .../date-time-functions/date_format.md             |    0
 .../sql-functions/date-time-functions/date_sub.md  |    0
 .../sql-functions/date-time-functions/datediff.md  |    0
 .../sql-functions/date-time-functions/day.md       |    0
 .../sql-functions/date-time-functions/dayname.md   |    0
 .../date-time-functions/dayofmonth.md              |    0
 .../sql-functions/date-time-functions/dayofweek.md |    0
 .../sql-functions/date-time-functions/dayofyear.md |    0
 .../sql-functions/date-time-functions/from_days.md |    0
 .../date-time-functions/from_unixtime.md           |    0
 .../sql-functions/date-time-functions/hour.md      |    0
 .../sql-functions/date-time-functions/makedate.md  |    0
 .../sql-functions/date-time-functions/minute.md    |    0
 .../sql-functions/date-time-functions/month.md     |    0
 .../sql-functions/date-time-functions/monthname.md |    0
 .../sql-functions/date-time-functions/now.md       |    0
 .../sql-functions/date-time-functions/second.md    |    0
 .../date-time-functions/str_to_date.md             |    0
 .../date-time-functions/time_round.md              |    0
 .../sql-functions/date-time-functions/timediff.md  |    0
 .../date-time-functions/timestampadd.md            |    0
 .../date-time-functions/timestampdiff.md           |    0
 .../sql-functions/date-time-functions/to_date.md   |    0
 .../sql-functions/date-time-functions/to_days.md   |    0
 .../date-time-functions/unix_timestamp.md          |    0
 .../date-time-functions/utc_timestamp.md           |    0
 .../sql-functions/date-time-functions/week.md      |    0
 .../sql-functions/date-time-functions/weekday.md   |    0
 .../date-time-functions/weekofyear.md              |    0
 .../sql-functions/date-time-functions/year.md      |    0
 .../sql-functions/date-time-functions/yearweek.md  |    0
 .../sql-manual/sql-functions/digital-masking.md    |    0
 .../sql-functions/encrypt-digest-functions/aes.md  |    0
 .../sql-functions/encrypt-digest-functions/md5.md  |    0
 .../encrypt-digest-functions/md5sum.md             |    0
 .../sql-functions/encrypt-digest-functions/sm3.md  |    0
 .../encrypt-digest-functions/sm3sum.md             |    0
 .../sql-functions/encrypt-digest-functions/sm4.md  |    0
 .../hash-functions/murmur_hash3_32.md              |    0
 .../json-functions/get_json_double.md              |    0
 .../sql-functions/json-functions/get_json_int.md   |    0
 .../json-functions/get_json_string.md              |    0
 .../sql-functions/json-functions/json_array.md     |    0
 .../sql-functions/json-functions/json_object.md    |    0
 .../sql-functions/json-functions/json_quote.md     |    0
 .../sql-functions/math-functions/conv.md           |    0
 .../sql-functions/math-functions/pmod.md           |    0
 .../sql-functions/spatial-functions/st_astext.md   |    0
 .../sql-functions/spatial-functions/st_circle.md   |    0
 .../sql-functions/spatial-functions/st_contains.md |    0
 .../spatial-functions/st_distance_sphere.md        |    0
 .../spatial-functions/st_geometryfromtext.md       |    0
 .../spatial-functions/st_linefromtext.md           |    0
 .../sql-functions/spatial-functions/st_point.md    |    0
 .../sql-functions/spatial-functions/st_polygon.md  |    0
 .../sql-functions/spatial-functions/st_x.md        |    0
 .../sql-functions/spatial-functions/st_y.md        |    0
 .../append_trailing_char_if_absent.md              |    0
 .../sql-functions/string-functions/ascii.md        |    0
 .../sql-functions/string-functions/bit_length.md   |    0
 .../sql-functions/string-functions/char_length.md  |    0
 .../sql-functions/string-functions/concat.md       |    0
 .../sql-functions/string-functions/concat_ws.md    |    0
 .../sql-functions/string-functions/ends_with.md    |    0
 .../sql-functions/string-functions/find_in_set.md  |    0
 .../sql-functions/string-functions/hex.md          |    0
 .../sql-functions/string-functions/instr.md        |    0
 .../sql-functions/string-functions/lcase.md        |    0
 .../sql-functions/string-functions/left.md         |    0
 .../sql-functions/string-functions/length.md       |    0
 .../sql-functions/string-functions/like/like.md    |    0
 .../string-functions/like/not_like.md              |    0
 .../sql-functions/string-functions/locate.md       |    0
 .../sql-functions/string-functions/lower.md        |    0
 .../sql-functions/string-functions/lpad.md         |    0
 .../sql-functions/string-functions/ltrim.md        |    0
 .../sql-functions/string-functions/money_format.md |    0
 .../string-functions/null_or_empty.md              |    0
 .../string-functions/regexp/not_regexp.md          |    0
 .../string-functions/regexp/regexp.md              |    0
 .../string-functions/regexp/regexp_extract.md      |    0
 .../string-functions/regexp/regexp_replace.md      |    0
 .../sql-functions/string-functions/repeat.md       |    0
 .../sql-functions/string-functions/replace.md      |    0
 .../sql-functions/string-functions/reverse.md      |    0
 .../sql-functions/string-functions/right.md        |    0
 .../sql-functions/string-functions/rpad.md         |    0
 .../sql-functions/string-functions/split_part.md   |    0
 .../sql-functions/string-functions/starts_with.md  |    0
 .../sql-functions/string-functions/strleft.md      |    0
 .../sql-functions/string-functions/strright.md     |    0
 .../sql-functions/string-functions/substring.md    |    0
 .../sql-functions/string-functions/unhex.md        |    0
 .../table-functions/explode-bitmap.md              |    0
 .../table-functions/explode-json-array.md          |    0
 .../table-functions/explode-numbers.md             |    0
 .../sql-functions/table-functions/explode-split.md |    0
 .../table-functions/outer-combinator.md            |    0
 .../window-functions/WINDOW-FUNCTION-AVG.md        |    0
 .../window-functions/WINDOW-FUNCTION-COUNT.md      |    0
 .../window-functions/WINDOW-FUNCTION-DENSE-RANK.md |    0
 .../WINDOW-FUNCTION-FIRST-VALUE.md                 |    0
 .../window-functions/WINDOW-FUNCTION-LAG.md        |    0
 .../window-functions/WINDOW-FUNCTION-LAST-VALUE.md |    0
 .../window-functions/WINDOW-FUNCTION-LEAD.md       |    0
 .../window-functions/WINDOW-FUNCTION-MAX.md        |    0
 .../window-functions/WINDOW-FUNCTION-MIN.md        |    0
 .../window-functions/WINDOW-FUNCTION-RANK.md       |    0
 .../window-functions/WINDOW-FUNCTION-ROW-NUMBER.md |    0
 .../window-functions/WINDOW-FUNCTION-SUM.md        |    0
 .../window-functions/WINDOW-FUNCTION.md            |    0
 .../Account-Management-Statements/CREATE-ROLE.md   |    0
 .../Account-Management-Statements/CREATE-USER.md   |    0
 .../Account-Management-Statements/DROP-ROLE.md     |    0
 .../Account-Management-Statements/DROP-USER.md     |    0
 .../Account-Management-Statements/GRANT.md         |    0
 .../Account-Management-Statements/LDAP.md          |    0
 .../Account-Management-Statements/REVOKE.md        |    0
 .../Account-Management-Statements/SET-PASSWORD.md  |    0
 .../Account-Management-Statements/SET-PROPERTY.md  |    0
 .../ALTER-SYSTEM-ADD-BACKEND.md                    |    0
 .../ALTER-SYSTEM-ADD-BROKER.md                     |    0
 .../ALTER-SYSTEM-ADD-FOLLOWER.md                   |    0
 .../ALTER-SYSTEM-ADD-OBSERVER.md                   |    0
 .../ALTER-SYSTEM-DECOMMISSION-BACKEND.md           |    0
 .../ALTER-SYSTEM-DROP-BACKEND.md                   |    0
 .../ALTER-SYSTEM-DROP-BROKER.md                    |    0
 .../ALTER-SYSTEM-DROP-FOLLOWER.md                  |    0
 .../ALTER-SYSTEM-DROP-OBSERVER.md                  |    0
 .../ALTER-SYSTEM-MODIFY-BACKEND.md                 |    0
 .../ALTER-SYSTEM-MODIFY-BROKER.md                  |    0
 .../CANCEL-ALTER-SYSTEM.md                         |    0
 .../Alter/ALTER-DATABASE.md                        |    0
 .../Alter/ALTER-RESOURCE.md                        |    0
 .../Alter/ALTER-SQL-BLOCK-RULE.md                  |    0
 .../Alter/ALTER-TABLE-BITMAP.md                    |    0
 .../Alter/ALTER-TABLE-COLUMN.md                    |    0
 .../Alter/ALTER-TABLE-PARTITION.md                 |    0
 .../Alter/ALTER-TABLE-PROPERTY.md                  |    0
 .../Alter/ALTER-TABLE-RENAME.md                    |    0
 .../Alter/ALTER-TABLE-REPLACE.md                   |    0
 .../Alter/ALTER-TABLE-ROLLUP.md                    |    0
 .../Data-Definition-Statements/Alter/ALTER-VIEW.md |    0
 .../Alter/CANCEL-ALTER-TABLE.md                    |    0
 .../Backup-and-Restore/BACKUP.md                   |    0
 .../Backup-and-Restore/CANCEL-BACKUP.md            |    0
 .../Backup-and-Restore/CANCEL-RESTORE.md           |    0
 .../Backup-and-Restore/CREATE-REPOSITORY.md        |    0
 .../Backup-and-Restore/DROP-REPOSITORY.md          |    0
 .../Backup-and-Restore/RESTORE.md                  |    0
 .../Create/CREATE-DATABASE.md                      |    0
 .../Create/CREATE-ENCRYPT-KEY.md                   |    0
 .../Create/CREATE-EXTERNAL-TABLE.md                |    0
 .../Create/CREATE-FILE.md                          |    0
 .../Create/CREATE-FUNCTION.md                      |    0
 .../Create/CREATE-INDEX.md                         |    0
 .../Create/CREATE-MATERIALIZED-VIEW.md             |    0
 .../Create/CREATE-POLICY.md                        |    0
 .../Create/CREATE-RESOURCE.md                      |    0
 .../Create/CREATE-SQL-BLOCK-RULE.md                |    0
 .../Create/CREATE-TABLE-AS-SELECT.md               |    0
 .../Create/CREATE-TABLE-LIKE.md                    |    0
 .../Create/CREATE-TABLE.md                         |    0
 .../Create/CREATE-VIEW.md                          |    0
 .../Drop/DROP-DATABASE.md                          |    0
 .../Drop/DROP-ENCRYPT-KEY.md                       |    0
 .../Data-Definition-Statements/Drop/DROP-FILE.md   |    0
 .../Drop/DROP-FUNCTION.md                          |    0
 .../Data-Definition-Statements/Drop/DROP-INDEX.md  |    0
 .../Drop/DROP-MATERIALIZED-VIEW.md                 |    0
 .../Data-Definition-Statements/Drop/DROP-POLICY.md |    0
 .../Drop/DROP-RESOURCE.md                          |    0
 .../Drop/DROP-SQL-BLOCK-RULE.md                    |    0
 .../Data-Definition-Statements/Drop/DROP-TABLE.md  |    0
 .../Drop/TRUNCATE-TABLE.md                         |    0
 .../Load/ALTER-ROUTINE-LOAD.md                     |    0
 .../Load/BROKER-LOAD.md                            |    0
 .../Load/CANCEL-LOAD.md                            |    0
 .../Load/CREATE-ROUTINE-LOAD.md                    |    0
 .../Load/CREATE-SYNC-JOB.md                        |    0
 .../Load/MULTI-LOAD.md                             |    0
 .../Load/PAUSE-ROUTINE-LOAD.md                     |    0
 .../Load/PAUSE-SYNC-JOB.md                         |    0
 .../Load/RESUME-ROUTINE-LOAD.md                    |    0
 .../Load/RESUME-SYNC-JOB.md                        |    0
 .../Load/STOP-ROUTINE-LOAD.md                      |    0
 .../Load/STOP-SYNC-JOB.md                          |    0
 .../Load/STREAM-LOAD.md                            |    0
 .../Manipulation/DELETE.md                         |    0
 .../Manipulation/EXPORT.md                         |    0
 .../Manipulation/INSERT.md                         |    0
 .../Manipulation/SELECT.md                         |    0
 .../Manipulation/UPDATE.md                         |    0
 .../Data-Manipulation-Statements/OUTFILE.md        |    0
 .../sql-manual/sql-reference/Data-Types/ARRAY.md   |    0
 .../sql-manual/sql-reference/Data-Types/BIGINT.md  |    0
 .../sql-manual/sql-reference/Data-Types/BITMAP.md  |    0
 .../sql-manual/sql-reference/Data-Types/BOOLEAN.md |    0
 .../sql-manual/sql-reference/Data-Types/CHAR.md    |    0
 .../sql-manual/sql-reference/Data-Types/DATE.md    |    0
 .../sql-reference/Data-Types/DATETIME.md           |    0
 .../sql-manual/sql-reference/Data-Types/DECIMAL.md |    0
 .../sql-manual/sql-reference/Data-Types/DOUBLE.md  |    0
 .../sql-manual/sql-reference/Data-Types/FLOAT.md   |    0
 .../sql-manual/sql-reference/Data-Types/HLL.md     |    0
 .../sql-manual/sql-reference/Data-Types/INT.md     |    0
 .../sql-reference/Data-Types/LARGEINT.md           |    0
 .../sql-reference/Data-Types/QUANTILE-STATE.md     |    0
 .../sql-reference/Data-Types/SMALLINT.md           |    0
 .../sql-manual/sql-reference/Data-Types/STRING.md  |    0
 .../sql-manual/sql-reference/Data-Types/TINYINT.md |    0
 .../sql-manual/sql-reference/Data-Types/VARCHAR.md |    0
 .../ADMIN-CANCEL-REPAIR.md                         |    0
 .../ADMIN-CHECK-TABLET.md                          |    0
 .../ADMIN-CLEAN-TRASH.md                           |    0
 .../ADMIN-REPAIR-TABLE.md                          |    0
 .../ADMIN-SET-CONFIG.md                            |    0
 .../ADMIN-SET-REPLICA-STATUS.md                    |    0
 .../ADMIN-SHOW-CONFIG.md                           |    0
 .../ADMIN-SHOW-REPLICA-DISTRIBUTION.md             |    0
 .../ADMIN-SHOW-REPLICA-STATUS.md                   |    0
 .../ADMIN-SHOW-TABLET-STORAGE-FORMAT.md            |    0
 .../ENABLE-FEATURE.md                              |    0
 .../INSTALL-PLUGIN.md                              |    0
 .../Database-Administration-Statements/KILL.md     |    0
 .../Database-Administration-Statements/RECOVER.md  |    0
 .../SET-VARIABLE.md                                |    0
 .../UNINSTALL-PLUGIN.md                            |    0
 .../SHOW-ALTER-TABLE-MATERIALIZED-VIEW.md          |    0
 .../sql-reference/Show-Statements/SHOW-ALTER.md    |    0
 .../sql-reference/Show-Statements/SHOW-BACKENDS.md |    0
 .../sql-reference/Show-Statements/SHOW-BACKUP.md   |    0
 .../sql-reference/Show-Statements/SHOW-BROKER.md   |    0
 .../sql-reference/Show-Statements/SHOW-CHARSET.md  |    0
 .../Show-Statements/SHOW-COLLATION.md              |    0
 .../sql-reference/Show-Statements/SHOW-COLUMNS.md  |    0
 .../Show-Statements/SHOW-CREATE-DATABASE.md        |    0
 .../Show-Statements/SHOW-CREATE-FUNCTION.md        |    0
 .../SHOW-CREATE-MATERIALIZED-VIEW.md               |    0
 .../Show-Statements/SHOW-CREATE-ROUTINE-LOAD.md    |    0
 .../Show-Statements/SHOW-CREATE-TABLE.md           |    0
 .../sql-reference/Show-Statements/SHOW-DATA.md     |    0
 .../Show-Statements/SHOW-DATABASE-ID.md            |    0
 .../Show-Statements/SHOW-DATABASES.md              |    0
 .../sql-reference/Show-Statements/SHOW-DELETE.md   |    0
 .../Show-Statements/SHOW-DYNAMIC-PARTITION.md      |    0
 .../Show-Statements/SHOW-ENCRYPT-KEY.md            |    0
 .../sql-reference/Show-Statements/SHOW-ENGINES.md  |    0
 .../sql-reference/Show-Statements/SHOW-EVENTS.md   |    0
 .../sql-reference/Show-Statements/SHOW-EXPORT.md   |    0
 .../sql-reference/Show-Statements/SHOW-FILE.md     |    0
 .../Show-Statements/SHOW-FRONTENDS.md              |    0
 .../Show-Statements/SHOW-FUNCTIONS.md              |    0
 .../sql-reference/Show-Statements/SHOW-GRANTS.md   |    0
 .../sql-reference/Show-Statements/SHOW-INDEX.md    |    0
 .../Show-Statements/SHOW-LAST-INSERT.md            |    0
 .../Show-Statements/SHOW-LOAD-PROFILE.md           |    0
 .../Show-Statements/SHOW-LOAD-WARNINGS.md          |    0
 .../sql-reference/Show-Statements/SHOW-LOAD.md     |    0
 .../Show-Statements/SHOW-MIGRATIONS.md             |    0
 .../Show-Statements/SHOW-OPEN-TABLES.md            |    0
 .../Show-Statements/SHOW-PARTITION-ID.md           |    0
 .../Show-Statements/SHOW-PARTITIONS.md             |    0
 .../sql-reference/Show-Statements/SHOW-PLUGINS.md  |    0
 .../sql-reference/Show-Statements/SHOW-POLICY.md   |    0
 .../sql-reference/Show-Statements/SHOW-PROC.md     |    0
 .../Show-Statements/SHOW-PROCEDURE.md              |    0
 .../Show-Statements/SHOW-PROCESSLIST.md            |    0
 .../sql-reference/Show-Statements/SHOW-PROPERTY.md |    0
 .../Show-Statements/SHOW-QUERY-PROFILE.md          |    0
 .../Show-Statements/SHOW-REPOSITORIES.md           |    0
 .../Show-Statements/SHOW-RESOURCES.md              |    0
 .../sql-reference/Show-Statements/SHOW-RESTORE.md  |    0
 .../sql-reference/Show-Statements/SHOW-ROLES.md    |    0
 .../sql-reference/Show-Statements/SHOW-ROLLUP.md   |    0
 .../Show-Statements/SHOW-ROUTINE-LOAD-TASK.md      |    0
 .../Show-Statements/SHOW-ROUTINE-LOAD.md           |    0
 .../Show-Statements/SHOW-SMALL-FILES.md            |    0
 .../sql-reference/Show-Statements/SHOW-SNAPSHOT.md |    0
 .../Show-Statements/SHOW-SQL-BLOCK-RULE.md         |    0
 .../sql-reference/Show-Statements/SHOW-STATUS.md   |    0
 .../Show-Statements/SHOW-STREAM-LOAD.md            |    0
 .../sql-reference/Show-Statements/SHOW-SYNC-JOB.md |    0
 .../sql-reference/Show-Statements/SHOW-TABLE-ID.md |    0
 .../Show-Statements/SHOW-TABLE-STATUS.md           |    0
 .../sql-reference/Show-Statements/SHOW-TABLES.md   |    0
 .../sql-reference/Show-Statements/SHOW-TABLET.md   |    0
 .../Show-Statements/SHOW-TRANSACTION.md            |    0
 .../sql-reference/Show-Statements/SHOW-TRASH.md    |    0
 .../sql-reference/Show-Statements/SHOW-TRIGGERS.md |    0
 .../sql-reference/Show-Statements/SHOW-USER.md     |    0
 .../Show-Statements/SHOW-VARIABLES.md              |    0
 .../sql-reference/Show-Statements/SHOW-VIEW.md     |    0
 .../sql-reference/Show-Statements/SHOW-WARNING.md  |    0
 .../Show-Statements/SHOW-WHITE-LIST.md             |    0
 .../sql-reference/Utility-Statements/DESCRIBE.md   |    0
 .../sql-reference/Utility-Statements/HELP.md       |    0
 .../sql-reference/Utility-Statements/USE.md        |    0
 docs/zh-CN/{ => docs}/summary/basic-summary.md     |    0
 .../{ => docs}/summary/system-architecture.md      |    0
 docs/zh-CN/userCase/user.md                        |   93 +
 1257 files changed, 12063 insertions(+), 2087 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
old mode 100644
new mode 100755
index 6b3f4504f0..f81ad745a4
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,38 +1,38 @@
 /*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
 
-// Values would be replaced automatically during the travis' building
-const BUILDING_BRANCH = process.env.BRANCH || ''
-const ALGOLIA_API_KEY = process.env.ALGOLIA_API_KEY || ''
-const ALGOLIA_INDEX_NAME = process.env.ALGOLIA_INDEX_NAME || ''
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+const BUILDING_BRANCH = process.env.BRANCH || "";
+const ALGOLIA_API_KEY = process.env.ALGOLIA_API_KEY || "";
+const ALGOLIA_INDEX_NAME = process.env.ALGOLIA_INDEX_NAME || "";
 
 function convertSidebar(list, path) {
   if (list.length > 0) {
-      list.forEach((element, i) => {
-        if (element.children) {
-            convertSidebar(element.children, path + element.directoryPath)
-            delete element.directoryPath
-        } else {
-            list[i] = path + element
-        }
-      });
+    list.forEach((element, i) => {
+      if (element.children) {
+        convertSidebar(element.children, path + element.directoryPath);
+        delete element.directoryPath;
+      } else {
+        list[i] = `${path}${element}`;
+      }
+    });
   }
-  return list
+  return list;
 }
 
 function buildAlgoliaSearchConfig(lang) {
@@ -40,93 +40,271 @@ function buildAlgoliaSearchConfig(lang) {
     apiKey: ALGOLIA_API_KEY,
     indexName: ALGOLIA_INDEX_NAME,
     algoliaOptions: {
-      facetFilters: ['lang:' + lang, 'version:' + BUILDING_BRANCH]
-    }
-  }
+      facetFilters: ["lang:" + lang, "version:" + BUILDING_BRANCH],
+    },
+  };
 }
 
 module.exports = {
-  base: BUILDING_BRANCH.length > 0 ? '/' + BUILDING_BRANCH + '/' : '',
+  base: BUILDING_BRANCH.length > 0 ? "/" + BUILDING_BRANCH + "/" : "",
   locales: {
-    '/en/': {
-      lang: 'en',
-      title: 'Apache Doris',
-      description: 'Apache Doris'
+    "/en/": {
+      lang: "en", // html lang属性
+      title: "Apache Doris",
+      description: "Apache Doris",
+    },
+    "/zh-CN/": {
+      lang: "zh-CN",
+      title: "Apache Doris",
+      description: "Apache Doris",
     },
-    '/zh-CN/': {
-      lang: 'zh-CN',
-      title: 'Apache Doris',
-      description: 'Apache Doris'
-    }
   },
+  // 头部文件设置
   head: [
-    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
-    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
-    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
-    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
+    // CSS样式上传
+    ["link", { rel: "icon", href: "/blog-images/logo.png" }],
+    [
+      "link",
+      {
+        rel: "stylesheet",
+        href: "//at.alicdn.com/t/font_3319292_bdqvc63l075.css",
+      },
+    ],
+    [
+      "link",
+      {
+        rel: "stylesheet",
+        href: "https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css",
+      },
+    ],
+    // meta 描述
+    [
+      "meta",
+      {
+        name: "viewport",
+        content: "width=device-width,initial-scale=1,user-scalable=no",
+      },
+    ],
+    // js 上传
+    [
+      "script",
+      {
+        type: "text/javascript",
+        src: "https://cdn.jsdelivr.net/npm/jquery@2.1.4/dist/jquery.min.js",
+      },
+    ],
+    ["script", { type: "text/javascript", src: "/js/xRoll.js" }],
+    ["script", { type: "text/javascript", src: "/js/js.js" }],
   ],
-  title: 'Apache Doris',
-  description: 'Apache Doris',
+  title: "Apache Doris",
+  description: "Apache Doris",
+  theme: "haobom",
   themeConfig: {
-    title: 'Doris',
-    logo: '/images/doris-logo-only.png',
-    search: true,
-    smoothScroll: true,
-    searchMaxSuggestions: 10,
-    nextLinks: true,
-    prevLinks: true,
-    repo: 'apache/incubator-doris',
-    repoLabel: 'GitHub',
-    lastUpdated: 'Last Updated',
-    editLinks: true,
-    docsDir: 'docs',
-    docsBranch: BUILDING_BRANCH,
-    searchPlaceholder: 'Search',
+    mode: "light",
+    modePicker: false,
+    noFoundPageByTencent: false,
     locales: {
-      '/en/': {
-        algolia: buildAlgoliaSearchConfig('en'),
-        selectText: 'Languages',
-        label: 'English',
-        ariaLabel: 'Languages',
-        editLinkText: 'Edit this page on GitHub',
+      "/en/": {
+        algolia: buildAlgoliaSearchConfig("en"),
+        versions: {
+          text: "versions",
+          icon: "doris doris-xiala",
+          items: [
+            {
+              text: "master",
+              link: "/en/docs/get-starting/get-starting.html",
+            }
+          ]
+        },
+        // 导航栏
         nav: [
           {
-            text: 'Download', link: '/en/downloads/downloads'
-          }
+            text: "Document",
+            link: "",
+            name: "document",
+          },
+          {
+            text: "Blog",
+            icon: "doris doris-xiala",
+            name: 'blog',
+            items: [
+              { text: "Doris Weekly", link: "/en/categories/DorisWeekly/" },
+              { text: "Best Practice", link: "/en/categories/PracticalCases/" },
+              { text: "Release Note", link: "/en/categories/ReleaseNote/" },
+              {
+                text: "Doris Internal",
+                link: "/en/categories/DorisInternals/",
+              },
+            ],
+          },
+          {
+            text: "Developer",
+            link: "/en/developer/developer-guide/debug-tool.html",
+          },
+          {
+            text: "Community",
+            link: "/en/community/team.html",
+          },
+          {
+            text: "User",
+            link: "/en/userCase/user.html",
+          },
+          {
+            text: "ASF",
+            icon: "doris doris-xiala",
+            items: [
+              { text: "Foundation", link: "https://www.apache.org/" },
+              { text: "Security", link: "https://www.apache.org/security/" },
+              { text: "License", link: "https://www.apache.org/licenses/" },
+              {
+                text: "Events",
+                link: "https://www.apache.org/events/current-event",
+              },
+              {
+                text: "Sponsorship",
+                link: "https://www.apache.org/foundation/sponsorship.html",
+              },
+              {
+                text: "Privacy",
+                link: "https://www.apache.org/foundation/policies/privacy.html",
+              },
+              {
+                text: "Thanks",
+                link: "https://www.apache.org/foundation/thanks.html",
+              },
+            ],
+          },
+          {
+            text: "Downloads",
+            link: "/en/downloads/downloads",
+            className: "downloads",
+          },
         ],
+
+        // 指定页面侧边栏
         sidebar: {
-          '/en/': convertSidebar(require('./sidebar/en.js'), '/en/')
+          "/en/developer/": convertSidebar(
+            require("./sidebar/en/developer.js"),
+            "/en/developer/"
+          ),
+          "/en/community/": convertSidebar(
+            require("./sidebar/en/community.js"),
+            "/en/community/"
+          ),
+          "/en/docs/": convertSidebar(
+            require("./sidebar/en/docs.js"),
+            "/en/docs/"
+          ),
         },
-        article: {
-          metaTime: 'Date',
-          metaAuthor: 'Author',
-          paginationPre: 'Prev',
-          paginationNext: 'Next'
-        }
       },
-      '/zh-CN/': {
-        algolia: buildAlgoliaSearchConfig('zh-CN'),
-        selectText: 'Languages',
-        label: '简体中文',
-        editLinkText: '在 GitHub 上编辑此页',
+      "/zh-CN/": {
+        algolia: buildAlgoliaSearchConfig("zh-CN"),
+        versions: {
+          text: "versions",
+          icon: "doris doris-xiala",
+          items: [
+            {
+              text: "master",
+              link: "/zh-CN/docs/get-starting/get-starting.html",
+            }
+          ]
+        },
+        // 导航栏
         nav: [
           {
-            text: '下载', link: '/zh-CN/downloads/downloads'
-          }
+            text: "文档",
+            link: "",
+            name: "document",
+          },
+          {
+            text: "博客",
+            icon: "doris doris-xiala",
+            name: 'blog',
+            items: [
+              { text: "每周通报", link: "/zh-CN/categories/DorisWeekly/" },
+              { text: "最佳实践", link: "/zh-CN/categories/PracticalCases/" },
+              { text: "版本发布", link: "/zh-CN/categories/ReleaseNote/" },
+              {
+                text: "内核解析",
+                link: "/zh-CN/categories/DorisInternals/",
+              },
+            ],
+          },
+          {
+            text: "开发者",
+            link: "/zh-CN/developer/developer-guide/debug-tool.html",
+          },
+          {
+            text: "社区",
+            link: "/zh-CN/community/team.html",
+          },
+          {
+            text: "用户",
+            link: "/zh-CN/userCase/user.html",
+          },
+          {
+            text: "ASF",
+            icon: "doris doris-xiala",
+            items: [
+              { text: "基金会", link: "https://www.apache.org/" },
+              { text: "安全", link: "https://www.apache.org/security/" },
+              { text: "版权", link: "https://www.apache.org/licenses/" },
+              {
+                text: "活动",
+                link: "https://www.apache.org/events/current-event",
+              },
+              {
+                text: "捐赠",
+                link: "https://www.apache.org/foundation/sponsorship.html",
+              },
+              {
+                text: "隐私",
+                link: "https://www.apache.org/foundation/policies/privacy.html",
+              },
+              {
+                text: "鸣谢",
+                link: "https://www.apache.org/foundation/thanks.html",
+              },
+            ],
+          },
+          {
+            text: "下载",
+            link: "/zh-CN/downloads/downloads",
+            className: "downloads",
+          },
         ],
+
+        // 指定页面侧边栏
         sidebar: {
-          '/zh-CN/': convertSidebar(require('./sidebar/zh-CN.js'), '/zh-CN/')
+          "/zh-CN/community/": convertSidebar(
+            require("./sidebar/zh-CN/community.js"),
+            "/zh-CN/community/"
+          ),
+          "/zh-CN/developer/": convertSidebar(
+            require("./sidebar/zh-CN/developer.js"),
+            "/zh-CN/developer/"
+          ),
+          "/zh-CN/docs/": convertSidebar(
+            require("./sidebar/zh-CN/docs.js"),
+            "/zh-CN/docs/"
+          ),
         },
-        article: {
-          metaTime: '时间',
-          metaAuthor: '作者',
-          paginationPre: '上一页',
-          paginationNext: '下一页'
-        }
-      }
-    }
+      },
+    },
+
+    logo: "/blog-images/logo.png", // 博客的Logo图片
+    search: true, // 是否开启搜索框
+    searchMaxSuggestions: 10, // 搜索的关键词深度
+    // "lastUpdated": "Last Updated", // 最后更新时间 这个无所谓
+    author: "", // 作者名称
+    authorAvatar: "", // 作者头像
+    record: "xxxx", // 这里是网站备案!
+    startYear: "2022", // 网站的起始时间 效果:2022 - 2022
+    subSidebar: "auto", //在所有页面中启用自动生成子侧边栏,原 sidebar 仍然兼容
+    displayAllHeaders: true,
+    sidebarDepth: 2,
+  },
+  markdown: {
+    lineNumbers: true,
   },
-  plugins: [
-    'reading-progress', 'plugin-back-to-top', 'plugin-medium-zoom'
-  ]
 };
diff --git a/docs/.vuepress/public/blog-images/avatar.png b/docs/.vuepress/public/blog-images/avatar.png
new file mode 100644
index 0000000000..5f75696012
Binary files /dev/null and b/docs/.vuepress/public/blog-images/avatar.png differ
diff --git a/docs/.vuepress/public/blog-images/core1.jpg b/docs/.vuepress/public/blog-images/core1.jpg
new file mode 100644
index 0000000000..6fe1077ac6
Binary files /dev/null and b/docs/.vuepress/public/blog-images/core1.jpg differ
diff --git a/docs/.vuepress/public/blog-images/core2.jpg b/docs/.vuepress/public/blog-images/core2.jpg
new file mode 100644
index 0000000000..d9e54663ea
Binary files /dev/null and b/docs/.vuepress/public/blog-images/core2.jpg differ
diff --git a/docs/.vuepress/public/blog-images/core3.jpg b/docs/.vuepress/public/blog-images/core3.jpg
new file mode 100644
index 0000000000..f16f35fa7d
Binary files /dev/null and b/docs/.vuepress/public/blog-images/core3.jpg differ
diff --git a/docs/.vuepress/public/blog-images/core4.jpg b/docs/.vuepress/public/blog-images/core4.jpg
new file mode 100644
index 0000000000..eb13fea4c9
Binary files /dev/null and b/docs/.vuepress/public/blog-images/core4.jpg differ
diff --git a/docs/.vuepress/public/blog-images/corebg.jpg b/docs/.vuepress/public/blog-images/corebg.jpg
new file mode 100644
index 0000000000..2a6ab8ecfc
Binary files /dev/null and b/docs/.vuepress/public/blog-images/corebg.jpg differ
diff --git a/docs/.vuepress/public/blog-images/data-1.png b/docs/.vuepress/public/blog-images/data-1.png
new file mode 100644
index 0000000000..2bda553f6c
Binary files /dev/null and b/docs/.vuepress/public/blog-images/data-1.png differ
diff --git a/docs/.vuepress/public/blog-images/data.png b/docs/.vuepress/public/blog-images/data.png
new file mode 100644
index 0000000000..837024a2d0
Binary files /dev/null and b/docs/.vuepress/public/blog-images/data.png differ
diff --git a/docs/.vuepress/public/blog-images/doris1.png b/docs/.vuepress/public/blog-images/doris1.png
new file mode 100644
index 0000000000..edbe1b4b1c
Binary files /dev/null and b/docs/.vuepress/public/blog-images/doris1.png differ
diff --git a/docs/.vuepress/public/blog-images/doris2.png b/docs/.vuepress/public/blog-images/doris2.png
new file mode 100644
index 0000000000..1a42bb4536
Binary files /dev/null and b/docs/.vuepress/public/blog-images/doris2.png differ
diff --git a/docs/.vuepress/public/blog-images/doris3.png b/docs/.vuepress/public/blog-images/doris3.png
new file mode 100644
index 0000000000..c985c371d1
Binary files /dev/null and b/docs/.vuepress/public/blog-images/doris3.png differ
diff --git a/docs/.vuepress/public/blog-images/dorisSolid1.jpg b/docs/.vuepress/public/blog-images/dorisSolid1.jpg
new file mode 100644
index 0000000000..b1416153a1
Binary files /dev/null and b/docs/.vuepress/public/blog-images/dorisSolid1.jpg differ
diff --git a/docs/.vuepress/public/blog-images/dorisSolid2.jpg b/docs/.vuepress/public/blog-images/dorisSolid2.jpg
new file mode 100644
index 0000000000..6ca6702c85
Binary files /dev/null and b/docs/.vuepress/public/blog-images/dorisSolid2.jpg differ
diff --git a/docs/.vuepress/public/blog-images/dorisyezi.png b/docs/.vuepress/public/blog-images/dorisyezi.png
new file mode 100644
index 0000000000..a5641a62c4
Binary files /dev/null and b/docs/.vuepress/public/blog-images/dorisyezi.png differ
diff --git a/docs/.vuepress/public/blog-images/ebi1.jpg b/docs/.vuepress/public/blog-images/ebi1.jpg
new file mode 100644
index 0000000000..4a3983b441
Binary files /dev/null and b/docs/.vuepress/public/blog-images/ebi1.jpg differ
diff --git a/docs/.vuepress/public/blog-images/ebi2.jpg b/docs/.vuepress/public/blog-images/ebi2.jpg
new file mode 100644
index 0000000000..41a064b7fa
Binary files /dev/null and b/docs/.vuepress/public/blog-images/ebi2.jpg differ
diff --git a/docs/.vuepress/public/blog-images/ebi3.jpg b/docs/.vuepress/public/blog-images/ebi3.jpg
new file mode 100644
index 0000000000..702f55cb35
Binary files /dev/null and b/docs/.vuepress/public/blog-images/ebi3.jpg differ
diff --git a/docs/.vuepress/public/blog-images/fx1.png b/docs/.vuepress/public/blog-images/fx1.png
new file mode 100644
index 0000000000..91e247eecd
Binary files /dev/null and b/docs/.vuepress/public/blog-images/fx1.png differ
diff --git a/docs/.vuepress/public/blog-images/fx2.png b/docs/.vuepress/public/blog-images/fx2.png
new file mode 100644
index 0000000000..fe650eef21
Binary files /dev/null and b/docs/.vuepress/public/blog-images/fx2.png differ
diff --git a/docs/.vuepress/public/blog-images/fx3.png b/docs/.vuepress/public/blog-images/fx3.png
new file mode 100644
index 0000000000..c75aa75587
Binary files /dev/null and b/docs/.vuepress/public/blog-images/fx3.png differ
diff --git a/docs/.vuepress/public/blog-images/fx4.png b/docs/.vuepress/public/blog-images/fx4.png
new file mode 100644
index 0000000000..7679f27922
Binary files /dev/null and b/docs/.vuepress/public/blog-images/fx4.png differ
diff --git a/docs/.vuepress/public/blog-images/fx5.png b/docs/.vuepress/public/blog-images/fx5.png
new file mode 100644
index 0000000000..618ff68906
Binary files /dev/null and b/docs/.vuepress/public/blog-images/fx5.png differ
diff --git a/docs/.vuepress/public/blog-images/fx6.png b/docs/.vuepress/public/blog-images/fx6.png
new file mode 100644
index 0000000000..139bd8bd6e
Binary files /dev/null and b/docs/.vuepress/public/blog-images/fx6.png differ
diff --git a/docs/.vuepress/public/blog-images/hero.png b/docs/.vuepress/public/blog-images/hero.png
new file mode 100644
index 0000000000..458c223b0f
Binary files /dev/null and b/docs/.vuepress/public/blog-images/hero.png differ
diff --git a/docs/.vuepress/public/blog-images/homebannerbg.jpg b/docs/.vuepress/public/blog-images/homebannerbg.jpg
new file mode 100644
index 0000000000..143ada54e8
Binary files /dev/null and b/docs/.vuepress/public/blog-images/homebannerbg.jpg differ
diff --git a/docs/.vuepress/public/blog-images/hrighting.png b/docs/.vuepress/public/blog-images/hrighting.png
new file mode 100644
index 0000000000..95f68e7c04
Binary files /dev/null and b/docs/.vuepress/public/blog-images/hrighting.png differ
diff --git a/docs/.vuepress/public/blog-images/i1.png b/docs/.vuepress/public/blog-images/i1.png
new file mode 100644
index 0000000000..f681c9a310
Binary files /dev/null and b/docs/.vuepress/public/blog-images/i1.png differ
diff --git a/docs/.vuepress/public/blog-images/i2.png b/docs/.vuepress/public/blog-images/i2.png
new file mode 100644
index 0000000000..db1cb5d2d3
Binary files /dev/null and b/docs/.vuepress/public/blog-images/i2.png differ
diff --git a/docs/.vuepress/public/blog-images/i3.png b/docs/.vuepress/public/blog-images/i3.png
new file mode 100644
index 0000000000..fdc37192fb
Binary files /dev/null and b/docs/.vuepress/public/blog-images/i3.png differ
diff --git a/docs/.vuepress/public/blog-images/i4.png b/docs/.vuepress/public/blog-images/i4.png
new file mode 100644
index 0000000000..ac8ec7568b
Binary files /dev/null and b/docs/.vuepress/public/blog-images/i4.png differ
diff --git a/docs/.vuepress/public/blog-images/i5.png b/docs/.vuepress/public/blog-images/i5.png
new file mode 100644
index 0000000000..85a2d0a0ef
Binary files /dev/null and b/docs/.vuepress/public/blog-images/i5.png differ
diff --git a/docs/.vuepress/public/blog-images/i6.png b/docs/.vuepress/public/blog-images/i6.png
new file mode 100644
index 0000000000..845f10e78c
Binary files /dev/null and b/docs/.vuepress/public/blog-images/i6.png differ
diff --git a/docs/.vuepress/public/blog-images/icobg.png b/docs/.vuepress/public/blog-images/icobg.png
new file mode 100644
index 0000000000..4b97060850
Binary files /dev/null and b/docs/.vuepress/public/blog-images/icobg.png differ
diff --git a/docs/.vuepress/public/blog-images/is1.png b/docs/.vuepress/public/blog-images/is1.png
new file mode 100644
index 0000000000..a0d44baf5d
Binary files /dev/null and b/docs/.vuepress/public/blog-images/is1.png differ
diff --git a/docs/.vuepress/public/blog-images/is2.png b/docs/.vuepress/public/blog-images/is2.png
new file mode 100644
index 0000000000..428830f8eb
Binary files /dev/null and b/docs/.vuepress/public/blog-images/is2.png differ
diff --git a/docs/.vuepress/public/blog-images/logo.png b/docs/.vuepress/public/blog-images/logo.png
new file mode 100644
index 0000000000..1c0fa86c1c
Binary files /dev/null and b/docs/.vuepress/public/blog-images/logo.png differ
diff --git a/docs/.vuepress/public/blog-images/newdownb.jpg b/docs/.vuepress/public/blog-images/newdownb.jpg
new file mode 100644
index 0000000000..3bfd81eba3
Binary files /dev/null and b/docs/.vuepress/public/blog-images/newdownb.jpg differ
diff --git a/docs/.vuepress/public/blog-images/news1.jpg b/docs/.vuepress/public/blog-images/news1.jpg
new file mode 100644
index 0000000000..3f6bc779d9
Binary files /dev/null and b/docs/.vuepress/public/blog-images/news1.jpg differ
diff --git a/docs/.vuepress/public/blog-images/news2.jpg b/docs/.vuepress/public/blog-images/news2.jpg
new file mode 100644
index 0000000000..84a519239f
Binary files /dev/null and b/docs/.vuepress/public/blog-images/news2.jpg differ
diff --git a/docs/.vuepress/public/blog-images/news3.jpg b/docs/.vuepress/public/blog-images/news3.jpg
new file mode 100644
index 0000000000..65e3d5fcff
Binary files /dev/null and b/docs/.vuepress/public/blog-images/news3.jpg differ
diff --git a/docs/.vuepress/public/blog-images/xbkuanglogo.png b/docs/.vuepress/public/blog-images/xbkuanglogo.png
new file mode 100644
index 0000000000..18552505c3
Binary files /dev/null and b/docs/.vuepress/public/blog-images/xbkuanglogo.png differ
diff --git a/docs/.vuepress/public/favicon.ico b/docs/.vuepress/public/favicon.ico
deleted file mode 100644
index c79ff458a2..0000000000
Binary files a/docs/.vuepress/public/favicon.ico and /dev/null differ
diff --git a/docs/.vuepress/public/images/idea-checkstyle-plugin-cn.png b/docs/.vuepress/public/images/idea-checkstyle-plugin-cn.png
deleted file mode 100644
index 2dea261d9e..0000000000
Binary files a/docs/.vuepress/public/images/idea-checkstyle-plugin-cn.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/idea-checkstyle-plugin-en.png b/docs/.vuepress/public/images/idea-checkstyle-plugin-en.png
deleted file mode 100644
index bcaa2e144e..0000000000
Binary files a/docs/.vuepress/public/images/idea-checkstyle-plugin-en.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/idea-checkstyle-version.png b/docs/.vuepress/public/images/idea-checkstyle-version.png
deleted file mode 100644
index a512e98fe2..0000000000
Binary files a/docs/.vuepress/public/images/idea-checkstyle-version.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/idea-rearrange-code.png b/docs/.vuepress/public/images/idea-rearrange-code.png
deleted file mode 100644
index c02e9a4cba..0000000000
Binary files a/docs/.vuepress/public/images/idea-rearrange-code.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523151619754.png b/docs/.vuepress/public/images/join/image-20220523151619754.png
deleted file mode 100644
index bdc51aef10..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523151619754.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523151653562.png b/docs/.vuepress/public/images/join/image-20220523151653562.png
deleted file mode 100644
index 34dec53438..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523151653562.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523151902368.png b/docs/.vuepress/public/images/join/image-20220523151902368.png
deleted file mode 100644
index eed4a20cc6..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523151902368.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523152004731.png b/docs/.vuepress/public/images/join/image-20220523152004731.png
deleted file mode 100644
index 40abcf88fe..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523152004731.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523152639123.png b/docs/.vuepress/public/images/join/image-20220523152639123.png
deleted file mode 100644
index e7c350c57b..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523152639123.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523153555640.png b/docs/.vuepress/public/images/join/image-20220523153555640.png
deleted file mode 100644
index 0290de71d9..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523153555640.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523153600797.png b/docs/.vuepress/public/images/join/image-20220523153600797.png
deleted file mode 100644
index 0290de71d9..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523153600797.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523153757607.png b/docs/.vuepress/public/images/join/image-20220523153757607.png
deleted file mode 100644
index 079b27d39f..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523153757607.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523153913059.png b/docs/.vuepress/public/images/join/image-20220523153913059.png
deleted file mode 100644
index 3a1306b611..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523153913059.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523153958828.png b/docs/.vuepress/public/images/join/image-20220523153958828.png
deleted file mode 100644
index 8e699eaea8..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523153958828.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523154712519.png b/docs/.vuepress/public/images/join/image-20220523154712519.png
deleted file mode 100644
index 3ba9575e8e..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523154712519.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/join/image-20220523160915229.png b/docs/.vuepress/public/images/join/image-20220523160915229.png
deleted file mode 100644
index 139317fffe..0000000000
Binary files a/docs/.vuepress/public/images/join/image-20220523160915229.png and /dev/null differ
diff --git a/docs/.vuepress/public/images/ssb_v11_v015_compare.png b/docs/.vuepress/public/images/ssb_v11_v015_compare.png
deleted file mode 100644
index de7fd96b9b..0000000000
Binary files a/docs/.vuepress/public/images/ssb_v11_v015_compare.png and /dev/null differ
diff --git a/docs/en/advanced/orthogonal-hll-manual.md b/docs/.vuepress/public/js/home.js
similarity index 77%
copy from docs/en/advanced/orthogonal-hll-manual.md
copy to docs/.vuepress/public/js/home.js
index fd2dc4e0fe..9467be4be3 100644
--- a/docs/en/advanced/orthogonal-hll-manual.md
+++ b/docs/.vuepress/public/js/home.js
@@ -1,11 +1,4 @@
----
-{
-    "title": "HLL approximate accurate deduplication",
-    "language": "en"
-}
----
-
-<!-- 
+/*
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
@@ -22,7 +15,16 @@ software distributed under the License is distributed on an
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
--->
-
-# HLL approximate accurate deduplication
+*/
 
+setTimeout(function(){
+  $("#app").addClass('home');
+  var wow = new WOW({
+      boxClass: 'wow',
+      animateClass: 'animated',
+      offset: 0,
+      mobile: true,
+      live: true
+  });
+  wow.init();
+},500)
\ No newline at end of file
diff --git a/docs/.vuepress/public/js/js.js b/docs/.vuepress/public/js/js.js
new file mode 100644
index 0000000000..558f90ba82
--- /dev/null
+++ b/docs/.vuepress/public/js/js.js
@@ -0,0 +1,118 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+$(function(){
+    var _pushState = window.history.pushState;
+    window.history.pushState = function() {
+        setTimeout(function(){
+            
+            $('#app').parents('body').removeClass('youde');
+            $('.blogliebiao').parents('.no-sidebar').parents('body').addClass('youde');
+            $('.blogxiangqing').parents('.no-sidebar').parents('body').addClass('youde');
+            $('.my-comment').parents('body').removeClass('youde');
+            $('.timeline-content').parents('body').removeClass('youde');
+            $('.newsBox').parents('body').removeClass('youde');
+            let dhera = $('.nav-dropdown li a');
+            if($('.nav-dropdown li a').hasClass("router-link-active")){
+                $(this).parents('.nav-dropdown').prev().addClass('router-link-active');
+            };
+
+            let $home = $('#app .theme-reco-content > div:nth-child(1)').is(".home-blog");
+            if($home){
+                $("#app").addClass('home');
+            }else{
+                $("#app").removeClass('home');
+            }
+            $('.timebox').parent().addClass('time-nomar');
+
+            let $category = $('#app .theme-container > div > div:last-child > div:last-child > ul').is(".category-wrapper");
+            if($category){
+                $("#app").addClass('category');
+            }else{
+                $("#app").removeClass('category');
+            }
+
+            let $timeline = $('#app .theme-container > div > div:last-child > div:last-child > ul').is(".timeline-content");
+            if($timeline){
+                $("#app").addClass('timeline');
+            }else{
+                $("#app").removeClass('timeline');
+            }
+
+            let $zhcate1 = window.location.pathname;
+            if($zhcate1 === '/zh-CN/categories/DorisWeekly/'){
+                location.reload();
+                $('#app .category-wrapper li:nth-child(1) a').attr("href",'/zh-CN/categories/DorisWeekly/');
+                $('#app .category-wrapper li:nth-child(2) a').attr("href",'/zh-CN/categories/PracticalCases/');
+                $('#app .category-wrapper li:nth-child(3) a').attr("href",'/zh-CN/categories/ReleaseNote/');
+            }
+            if($zhcate1 === '/categories/DorisWeekly/'){
+                location.reload();
+                $('#app .category-wrapper li:nth-child(1) a').attr("href",'/categories/DorisWeekly/');
+                $('#app .category-wrapper li:nth-child(2) a').attr("href",'/categories/PracticalCases/');
+                $('#app .category-wrapper li:nth-child(3) a').attr("href",'/categories/ReleaseNote/');
+            }
+            if($zhcate1 === '/zh-CN/categories/PracticalCases/'){
+                location.reload();
+                $('#app .category-wrapper li:nth-child(1) a').attr("href",'/zh-CN/categories/DorisWeekly/');
+                $('#app .category-wrapper li:nth-child(2) a').attr("href",'/zh-CN/categories/PracticalCases/');
+                $('#app .category-wrapper li:nth-child(3) a').attr("href",'/zh-CN/categories/ReleaseNote/');
+            }
+            if($zhcate1 === '/categories/PracticalCases/'){
+                location.reload();
+                $('#app .category-wrapper li:nth-child(1) a').attr("href",'/categories/DorisWeekly/');
+                $('#app .category-wrapper li:nth-child(2) a').attr("href",'/categories/PracticalCases/');
+                $('#app .category-wrapper li:nth-child(3) a').attr("href",'/categories/ReleaseNote/');
+            }
+            if($zhcate1 === '/zh-CN/categories/ReleaseNote/'){
+                location.reload();
+                $('#app .category-wrapper li:nth-child(1) a').attr("href",'/zh-CN/categories/DorisWeekly/');
+                $('#app .category-wrapper li:nth-child(2) a').attr("href",'/zh-CN/categories/PracticalCases/');
+                $('#app .category-wrapper li:nth-child(3) a').attr("href",'/zh-CN/categories/ReleaseNote/');
+            }
+            if($zhcate1 === '/categories/ReleaseNote/'){
+                location.reload();
+                $('#app .category-wrapper li:nth-child(1) a').attr("href",'/categories/DorisWeekly/');
+                $('#app .category-wrapper li:nth-child(2) a').attr("href",'/categories/PracticalCases/');
+                $('#app .category-wrapper li:nth-child(3) a').attr("href",'/categories/ReleaseNote/');
+            }
+
+
+        },100)
+        return _pushState.apply(this, arguments);
+    }
+
+    $('body').on('click','a',function(){
+        var windName = window.location.pathname;
+        var time = setInterval(function () {
+            var m = $(".blogliebiao .nav-dropdown a").attr("href");
+            if (m) {
+                console.log(m);
+                $(".blogliebiao .nav-dropdown a").each(function () {
+                    var l_m = $(this).attr("href")
+                    if (l_m == windName) {
+                            $('.blogliebiao .nav-dropdown a').parents('.dropdown-item').removeClass("active")
+                            $(this).parents('.dropdown-item').addClass("active")
+                    }
+                });
+                clearInterval(time);
+            }
+        }, 100);
+    })
+
+});
\ No newline at end of file
diff --git a/docs/en/admin-manual/http-actions/fe/meta-replay-state-action.md b/docs/.vuepress/public/js/xRoll.js
similarity index 60%
copy from docs/en/admin-manual/http-actions/fe/meta-replay-state-action.md
copy to docs/.vuepress/public/js/xRoll.js
index 94de010e8e..6819ade70f 100644
--- a/docs/en/admin-manual/http-actions/fe/meta-replay-state-action.md
+++ b/docs/.vuepress/public/js/xRoll.js
@@ -1,11 +1,4 @@
----
-{
-    "title": "Meta Replay State Action",
-    "language": "en"
-}
----
-
-<!-- 
+/*
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
@@ -22,40 +15,5 @@ software distributed under the License is distributed on an
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
--->
-
-# Meta Replay State Action
-
-(Not Implemented)
-
-## Request
-
-`GET /api/_meta_replay_state`
-
-## Description
-
-Get the status of FE node metadata replay.
-    
-## Path parameters
-
-None
-
-## Query parameters
-
-None
-
-## Request body
-
-None
-
-## Response
-
-TODO
-    
-## Examples
-
-TODO
-
-
-
-
+*/
+var xRoll=function(el,fn){xRoll.prototype.init(el,fn)};xRoll.prototype={init:function(_el,fn){_el.attr("data-state",false);this.start(_el,fn);$(window).on("scroll",function(){xRoll.prototype.start(_el,fn)})},start:function(_el,fn){var _this=this;$(_el).each(function(){var _self=$(this);var xRollTop=$(window).scrollTop();var isWindowHeiget=$(window).height();if(_self.data().state){return}if(xRollTop+isWindowHeiget>$(this).offset().top){fn();setTimeout(function(){_self.attr("data-state",tr [...]
\ No newline at end of file
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/sidebar/en/community.js
similarity index 53%
copy from docs/.vuepress/theme/index.js
copy to docs/.vuepress/sidebar/en/community.js
index d882e00623..2f224ecc1b 100644
--- a/docs/.vuepress/theme/index.js
+++ b/docs/.vuepress/sidebar/en/community.js
@@ -15,7 +15,35 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-module.exports = {
-  extend: "@vuepress/theme-default"
-};
+module.exports =  [
+  "team",
+  "gitter",
+  "subscribe-mail-list",
+  "feedback",
+  {
+    title: "How to Contribute",
+    directoryPath: "how-to-contribute/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "how-to-contribute",
+      "contributor-guide",
+      "how-to-be-a-committer",
+      "commit-format-specification",
+      "pull-request",
+    ],
+  },
+  {
+    title: "Release Process & Verification",
+    directoryPath: "release-and-verify/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "release-prepare",
+      "release-doris-core",
+      "release-doris-connectors",
+      "release-doris-manager",
+      "release-complete",
+      "release-verify",
+    ],
+  },
+  "security",
+]
\ No newline at end of file
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/sidebar/en/developer.js
similarity index 53%
copy from docs/.vuepress/theme/index.js
copy to docs/.vuepress/sidebar/en/developer.js
index d882e00623..3751036569 100644
--- a/docs/.vuepress/theme/index.js
+++ b/docs/.vuepress/sidebar/en/developer.js
@@ -15,7 +15,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-module.exports = {
-  extend: "@vuepress/theme-default"
-};
+module.exports =  [
+  {
+    title: "Design Documents",
+    directoryPath: "design/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "doris_storage_optimization",
+      "grouping_sets_design",
+      "metadata-design",
+    ],
+  }, 
+  {
+    title: "Developer Guide",
+    directoryPath: "developer-guide/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "debug-tool",
+      "docker-dev",
+      "benchmark-tool",
+      "fe-eclipse-dev",
+      "fe-idea-dev",
+      "fe-vscode-dev",
+      "be-vscode-dev",
+      "java-format-code",
+      "cpp-format-code",
+      "cpp-diagnostic-code",
+      "how-to-share-blogs",
+      "minidump",
+      "bitmap-hll-file-format",
+      "github-checks"
+    ],
+  },
+]
\ No newline at end of file
diff --git a/docs/.vuepress/sidebar/en.js b/docs/.vuepress/sidebar/en/docs.js
similarity index 93%
rename from docs/.vuepress/sidebar/en.js
rename to docs/.vuepress/sidebar/en/docs.js
index 30878a1f75..fce54a678b 100644
--- a/docs/.vuepress/sidebar/en.js
+++ b/docs/.vuepress/sidebar/en/docs.js
@@ -17,13 +17,6 @@
  */
 
 module.exports = [
- {
-    title: "Downloads",
-    directoryPath: "downloads/",
-    initialOpenGroupIndex: -1,
-    children: ["downloads"],
-    sidebarDepth: 1,
-  },
   {
     title: "Getting Started",
     directoryPath: "get-starting/",
@@ -1009,81 +1002,5 @@ module.exports = [
     children: [
       "ssb"
     ],
-  },
-  {
-    title: "Design Documents",
-    directoryPath: "design/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "doris_storage_optimization",
-      "grouping_sets_design",
-      "metadata-design",
-    ],
-  },  
-  {
-    title: "Doris User",
-    directoryPath: "case-user/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "case-user",
-    ],
-  },
-  {
-    title: "Developer Guide",
-    directoryPath: "developer-guide/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "debug-tool",
-      "docker-dev",
-      "benchmark-tool",
-      "fe-eclipse-dev",
-      "fe-idea-dev",
-      "fe-vscode-dev",
-      "be-vscode-dev",
-      "java-format-code",
-      "cpp-format-code",
-      "cpp-diagnostic-code",
-      "how-to-share-blogs",
-      "minidump",
-      "bitmap-hll-file-format",
-      "github-checks"
-    ],
-  },
-  {
-    title: "Apache Community",
-    directoryPath: "community/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "team",
-      "gitter",
-      "subscribe-mail-list",
-      "feedback",
-      {
-        title: "How to Contribute",
-        directoryPath: "how-to-contribute/",
-        initialOpenGroupIndex: -1,
-        children: [
-          "how-to-contribute",
-          "contributor-guide",
-          "how-to-be-a-committer",
-          "commit-format-specification",
-          "pull-request",
-        ],
-      },
-      {
-        title: "Release Process & Verification",
-        directoryPath: "release-and-verify/",
-        initialOpenGroupIndex: -1,
-        children: [
-          "release-prepare",
-          "release-doris-core",
-          "release-doris-connectors",
-          "release-doris-manager",
-          "release-complete",
-          "release-verify",
-        ],
-      },
-      "security",
-    ],
-  },
+  }
 ];
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/sidebar/zh-CN/community.js
similarity index 54%
copy from docs/.vuepress/theme/index.js
copy to docs/.vuepress/sidebar/zh-CN/community.js
index d882e00623..b152707119 100644
--- a/docs/.vuepress/theme/index.js
+++ b/docs/.vuepress/sidebar/zh-CN/community.js
@@ -15,7 +15,35 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-module.exports = {
-  extend: "@vuepress/theme-default"
-};
+module.exports =  [
+  "team",
+  "gitter",
+  "subscribe-mail-list",
+  "feedback",
+  {
+    title: "贡献指南",
+    directoryPath: "how-to-contribute/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "how-to-contribute",
+      "contributor-guide",
+      "how-to-be-a-committer",
+      "commit-format-specification",
+      "pull-request",
+    ],
+  },
+  {
+    title: "版本发布与校验",
+    directoryPath: "release-and-verify/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "release-prepare",
+      "release-doris-core",
+      "release-doris-connectors",
+      "release-doris-manager",
+      "release-complete",
+      "release-verify",
+    ],
+  },
+  "security",
+]
\ No newline at end of file
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/sidebar/zh-CN/developer.js
similarity index 51%
copy from docs/.vuepress/theme/index.js
copy to docs/.vuepress/sidebar/zh-CN/developer.js
index d882e00623..26f40cd398 100644
--- a/docs/.vuepress/theme/index.js
+++ b/docs/.vuepress/sidebar/zh-CN/developer.js
@@ -15,7 +15,38 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-module.exports = {
-  extend: "@vuepress/theme-default"
-};
+module.exports =  [
+  {
+    title: "设计文档",
+    directoryPath: "design/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "doris_storage_optimization",
+      "grouping_sets_design",
+      "metadata-design",
+      "spark_load",
+    ],
+  }, 
+  {
+    title: "开发者手册",
+    directoryPath: "developer-guide/",
+    initialOpenGroupIndex: -1,
+    children: [
+      "debug-tool",
+      "benchmark-tool",
+      "docker-dev",
+      "fe-eclipse-dev",
+      "fe-idea-dev",
+      "fe-vscode-dev",
+      "be-vscode-dev",
+      "java-format-code",
+      "cpp-format-code",
+      "cpp-diagnostic-code",
+      "how-to-share-blogs",
+      "minidump",
+      "bitmap-hll-file-format",
+      "regression-testing",
+      "github-checks"
+    ],
+  },    
+]
\ No newline at end of file
diff --git a/docs/.vuepress/sidebar/zh-CN.js b/docs/.vuepress/sidebar/zh-CN/docs.js
similarity index 93%
rename from docs/.vuepress/sidebar/zh-CN.js
rename to docs/.vuepress/sidebar/zh-CN/docs.js
index 9e5500bffc..e70acc8f53 100644
--- a/docs/.vuepress/sidebar/zh-CN.js
+++ b/docs/.vuepress/sidebar/zh-CN/docs.js
@@ -17,13 +17,6 @@
  */
 
 module.exports = [
-  {
-    title: "下载",
-    directoryPath: "downloads/",
-    initialOpenGroupIndex: -1,
-    children: ["downloads"],
-    sidebarDepth: 1,
-  },
   {
     title: "快速开始",
     directoryPath: "get-starting/",
@@ -1009,83 +1002,5 @@ module.exports = [
     children: [
       "ssb"
     ],
-  },
-  {
-    title: "设计文档",
-    directoryPath: "design/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "doris_storage_optimization",
-      "grouping_sets_design",
-      "metadata-design",
-      "spark_load",
-    ],
-  },  
-  {
-    title: "Doris用户",
-    directoryPath: "case-user/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "case-user",
-    ],
-  },
-  {
-    title: "开发者手册",
-    directoryPath: "developer-guide/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "debug-tool",
-      "benchmark-tool",
-      "docker-dev",
-      "fe-eclipse-dev",
-      "fe-idea-dev",
-      "fe-vscode-dev",
-      "be-vscode-dev",
-      "java-format-code",
-      "cpp-format-code",
-      "cpp-diagnostic-code",
-      "how-to-share-blogs",
-      "minidump",
-      "bitmap-hll-file-format",
-      "regression-testing",
-      "github-checks"
-    ],
-  },
-  {
-    title: "Apache 社区",
-    directoryPath: "community/",
-    initialOpenGroupIndex: -1,
-    children: [
-      "team",
-      "gitter",
-      "subscribe-mail-list",
-      "feedback",
-      {
-        title: "贡献指南",
-        directoryPath: "how-to-contribute/",
-        initialOpenGroupIndex: -1,
-        children: [
-          "how-to-contribute",
-          "contributor-guide",
-          "how-to-be-a-committer",
-          "commit-format-specification",
-          "pull-request",
-        ],
-      },
-      {
-        title: "版本发布与校验",
-        directoryPath: "release-and-verify/",
-        initialOpenGroupIndex: -1,
-        children: [
-          "release-prepare",
-          "release-doris-core",
-          "release-doris-connectors",
-          "release-doris-manager",
-          "release-complete",
-          "release-verify",
-        ],
-      },
-      "security",
-    ],
-  },
+  }
 ];
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
new file mode 100644
index 0000000000..5bd5e09dd1
--- /dev/null
+++ b/docs/.vuepress/styles/index.styl
@@ -0,0 +1,2728 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+/* scrollbar css */
+body::-webkit-scrollbar {
+  width: 5px;
+  height: 0px;
+}
+body::-webkit-scrollbar-track {
+  background: #fff;
+}
+body::-webkit-scrollbar-thumb {
+  background: #0c8760;
+}
+::selection {
+    color:#FFFFFF;
+    background-color:#0c8760;
+    text-shadow:none;
+}
+::-moz-selection {
+    color:#FFFFFF;
+    background-color:#0c8760;
+    text-shadow:none;
+}
+.sidebar::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+body{
+    font-family: Arial !important;
+}
+#app.home{
+    padding: 0;
+    max-width: none;  
+}
+div > .navbar {
+    height: 5.625rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    background: #fff;
+    border-bottom: 1px solid #f5f5f5;
+    padding-top: 0;
+    padding-bottom: 0;
+    box-shadow: none;
+}
+.navbar .navbarCenter{
+    max-width: 100%;
+    width :100%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    height: 100%;
+}
+.navbar > .navbarCenter > .haoLinks{
+    position: static;
+    height: 100%;
+}
+.navbar > .navbarCenter > .haoLogo{
+    position: static;
+    display: flex;
+}
+.navbar > .navbarCenter > .haoLogo .logo{
+    border-radius: 0;
+    height: 40px;
+    min-width: auto;
+}
+.nav-links .nav-item:nth-last-child(2){
+    margin-left: 2rem !important;
+    order: 2;
+}
+.nav-links .nav-item .downloads{
+    color: #fff !important;
+    border-radius: 25px;
+    background: #2ca37d;
+    padding: 13px 30px;
+    display: block;  
+}
+.nav-links .nav-item .downloads:hover{
+    background: #0c8760;
+    border-bottom: 5px solid #01583d !important;
+    box-shadow: 0 7px 10px rgba(1,88,4,.4);
+}
+.nav-links .nav-item .downloads.router-link-active {
+    color: #ffffff;
+}
+.nav-links .nav-item i{
+    font-size: 12px;
+}
+.logoBox{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+div .nav-links a:hover,
+div .dropdown-wrapper .nav-dropdown .dropdown-item a:hover{
+    color: #118b64;
+}
+
+div .home-blog .hero {
+    margin: 5.625rem auto 0;
+    background: url(/blog-images/homebannerbg.jpg) no-repeat center;
+    background-size: cover;
+    height: calc(100vh - 89px);
+    position: relative;
+    box-sizing: border-box;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.hero .b{
+    max-width: 1300px;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+}
+.bImg{
+    position: absolute;
+    right: 0;
+    height: 100%;
+    top: 0;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.sum{
+    font-size: 16px;
+    color: rgba(255,255,255,.5);
+    line-height: 1.8;
+    margin: 50px 0 100px;
+    text-align: left;
+}
+.bText{
+    width: 50%;    
+}
+div .home-blog .home-blog-wrapper {
+    display: none;
+}
+.bannerHref{
+    display: flex;
+    justify-content: flex-start;
+}
+.bannerHref a{
+    width: 180px;
+    height: 50px;
+    border-radius: 50px;
+    background: #2ca37d;
+    text-align: center;
+    line-height: 50px;
+    margin-right: 15px;
+    color: #fff;
+    font-size: 14px;
+    vertical-align: middle;
+    transition: all ease .3s;
+    position: relative;
+    border: 5px solid rgba(1,88,61,0);
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+.bannerHref a i{
+    font-size: 22px;
+    margin-right: 7px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 50px;
+}
+.bannerHref a.button1{
+    background: #2ca37d;
+}
+.bannerHref a.button2{
+    background: #333;
+    padding-left: 16px;
+    border-bottom: 5px solid rgba(1,88,61,0);
+}
+.bannerHref a:hover{
+    background: #0c8760;
+    border: 5px solid #01583d;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    transform: translateY(-5px);
+    box-shadow: 0 7px 10px rgba(1,88,4,.4);
+}
+div .content__default:not(.custom) {
+    max-width: 100%;
+    padding: 0px;
+}
+.content__default:not(.custom) > h1:first-child {
+    display: none;
+}
+.newsBox{
+    padding: 100px 15px 130px;
+    max-width: 1300px;
+    width: 100%;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+.newsBox ul{
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    margin-bottom: 2.3rem;
+}
+.newsBox li{
+    background: #f0f3f8;
+    width: 31.3%;
+    border-radius: 25px;
+    padding: 45px 23px 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all ease 0.3s;
+}
+.newsBox.transFroms{
+    transform: translateY(0);
+    opacity: 1;
+}
+.newsboxTitle{
+    margin-bottom: 25px;
+}
+.newsboxTitle .t{
+    color: #333333;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.5;
+    transition: all ease .3s;
+}
+.newsboxTitle .s{
+    color: #666666;
+    font-size: 14px;
+    line-height: 1.8;
+    margin: 22px 0;
+}
+.newsboxTitle i{
+    font-size: 24px;
+    color: #15a9ca;
+    line-height: 1;
+    transition: all ease .3s;
+    display: inline-block;
+}
+.newsboxImg {
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    overflow: hidden;
+    height: 230px;
+}
+.newsboxImg img{
+    transition: all ease .3s;
+    width: 100%;
+    pointer-events: none;
+}
+.newsBox li:hover{
+    box-shadow: 0px 15px 20px rgba(19,29,46,.15);
+    transform: translateY(-10px);
+    transition: all ease .3s;
+}
+.newsBox li:hover .newsboxTitle .t{
+    color: #0c8760;
+}
+.newsBox li:hover .newsboxTitle i{
+    color: #0c8760;
+    transform: translateX(100%);
+}
+.newsBox li:hover .newsboxImg img{
+    transform: scale(1.1);
+}
+div .content__default:not(.custom) a:hover {
+    text-decoration: none;
+}
+.newsdownData {
+    border-radius: 25px;
+    background: url(/blog-images/newdownb.jpg);padding: 90px 50px;
+    position: relative;
+}
+.newsdownData .t{
+    font-size: 32px;
+    line-height: 1.2;
+    font-weight: bold;
+    color: #fff;
+    margin: 0;
+}
+.newsleft{
+    width: 70%;
+}
+.newsleft .s{
+    font-size: 22px;
+    color: #fff;
+    opacity: .65;
+    line-height: 1.6;
+    font-weight: bold;
+    margin: 50px 0;
+}
+.newsleft .fataImg{
+    position: absolute;
+    left: 0;
+    right: 0;
+    transform: translateY(-240px);
+    z-index: 10;
+    height: 291px;
+}
+.newsleft .fataImg img{
+    position: absolute;
+    pointer-events: none;
+}
+.newsleft .fataImg img:nth-child(2){
+    width: 0;
+}
+.newsleft .fataImg .dim{
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    transition: all ease 1.5s .8s;
+    overflow: hidden;
+}
+.newsleft .fataImg .dim img{
+    left: 0;
+    width: 1270px;
+    max-width: none;
+}
+.newsleft .fataImg .dim[data-state="true"]{
+    width: 100%;
+}
+.newsleft .al{
+    margin-top: 150px;
+}
+.newsleft a{
+    margin-top: 0px;
+    display: inline-block;
+    color: #333;
+    background: #fff;
+    padding: 16px 28px;
+    border-radius: 25px;
+    transition: all ease .3s;
+    border-bottom: 5px solid rgba(1, 88, 60, 0);
+}
+.newsleft a:hover{
+    background: #0c8760;
+    border-bottom: 5px solid #01583d;
+    transform: translateY(-5px);
+    box-shadow: 0 7px 10px rgba(13,28,70,.15);
+    color: #fff;
+}
+.apacheDoris{
+    max-width: 1300px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+.appleft,
+.appright {
+    display: flex;
+    justify-content: space-between;
+}
+.apptitle {
+    width: 40%;
+    padding-top: 55px;
+}
+.appimg{
+    width: 55%;
+}
+.appimg img{
+    float: right;
+    pointer-events: none;
+}
+.apptitle .t{
+    font-size: 42px;
+    font-weight: bold;
+    color: #333;
+    line-height: 1;
+    margin-bottom: 35px;
+}
+.apptitle .s{
+    color: #999999;
+    line-height: 2;
+    margin-bottom: 35px;
+}
+.apptitle .al{}
+.apptitle a{
+    width: 180px;
+    height: 50px;
+    border-radius: 50px;
+    background: #2ca37d;
+    text-align: center;
+    line-height: 50px;
+    color: #fff;
+    font-size: 14px;
+    vertical-align: middle;
+    display: inline-block;
+    margin-top: 15px;
+    border-bottom: 5px solid rgba(1,88,60,0);
+    transition: all ease .3s;
+}
+.apptitle a:hover{
+    background: #0c8760;
+    border-bottom: 5px solid #01583d;
+    transform: translateY(-5px);
+    box-shadow: 0 7px 10px rgba(13,28,70,.15);
+    color: #fff;
+}
+.dorissolid1 {
+    margin-top: -64px;
+    position: relative;
+    z-index: -1;
+    display: flex;
+    justify-content: center;
+}
+.appright .apptitle{
+    order: 2;
+    width: 45%;
+    padding-top: 75px;
+}
+.appright .appimg{
+    width: 100%;
+    max-width: 706px;
+    margin-left: -110px;
+}
+.dorissolid2{
+    margin-top: -1px;
+    position: relative;
+    z-index: -1;
+    display: flex;
+    justify-content: center;
+}
+.appright3 .apptitle{
+    width: 42%;
+}
+.appright3 .appimg{
+    margin-top: -27px;
+}
+.icoBox {
+    background: url(/blog-images/icobg.png) no-repeat center #315aaa;
+    text-align: center;
+    padding: 120px 0 50px;
+}
+.icoBoxtitle p{
+    color: #fff;
+    font-weight: bold;
+    font-size: 60px;
+    line-height: 1.1;
+    margin-bottom: 80px;
+    margin-top: 0;
+}
+.icoBoxtitle p span{
+    color: #52caa4;
+}
+.icoBoxico ul{
+    display: flex;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 1070px;
+    width: 100%;
+    padding: 0 15px;
+    margin: 0 auto;
+    list-style: none;
+    position: relative;
+}
+.icoBoxico ul li{
+    width: 33.333%;
+    margin: 0 0px 60px;
+    position: relative;
+    z-index: 1;
+}
+.icotitle{
+    max-width: 225px;
+    width: 100%;
+    margin: 0 auto;
+    margin-top: 30px;
+}
+.icotitle .t{
+    font-size: 26px;
+    line-height: 1.2;
+    color: #fff;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+.icotitle .s{
+    color: #fff;
+    opacity: .6;
+    line-height: 1.8;
+    font-size: 14px;
+}
+.icoBoxico ul:before{
+    content:'';
+    background: url(/blog-images/is1.png) no-repeat center;
+    width: 100%;
+    height: 121px;
+    position: absolute;
+    left: 0px;
+    z-index: 0;
+    right: 0;
+    margin: 0 auto;
+    opacity: 0;
+    transition: all ease .7s .8s;
+}
+.icoBoxico ul:after{
+    content:'';
+    background: url(/blog-images/is2.png) no-repeat center;
+    width: 100%;
+    height: 121px;
+    position: absolute;
+    left: 0px;
+    z-index: 0;
+    right: 0;
+    margin: 0 auto;
+    top: 470px;
+    opacity: 0;
+    transition: all ease .7s .8s;
+}
+.icoBoxico ul li .icoimg img{
+    transition: all ease .5s;
+    border-radius: 100%;
+    border-bottom: 6px solid rgba(1, 88, 60, 0);
+    pointer-events: none;
+}
+.icoBoxico ul li:hover .icoimg img{
+    border-bottom-color: #01583d;
+    transform: translateY(-5px)rotate(15deg);
+    box-shadow: 0 7px 10px rgba(13, 28, 70, .15);
+}
+.core {
+    width: 100%;
+    background: url(/blog-images/corebg.jpg) no-repeat bottom center;
+    padding: 100px 15px;
+    box-sizing: border-box;
+}
+.corebox{
+    max-width: 1300px;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+}
+.coreleft{
+    width: 34%;
+    padding-top: 100px;
+}
+.coreleft .t{
+    color: #333;
+    font-size: 60px;
+    font-weight: bold;
+    line-height: 1;
+    letter-spacing: -3px;
+    margin-bottom: 50px;
+}
+.coreleft .s{
+    color: #666;
+    line-height: 2;
+    margin-bottom: 45px;
+}
+.coreright{
+    width: 61%;
+}
+.coreright ul{
+    list-style: none;
+    padding: 0;
+}
+.coreright ul li{
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 55px;
+}
+.coreimg{
+    max-width: 101px;
+    width: 100%;
+    margin-right: 26px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.coreimg svg{
+    width: 40px;
+    margin: 0 auto;
+    display: block;
+    height: auto;
+}
+li:nth-child(1) .coreimg{
+    background: rgba(20,169,202,.1);
+    border-top-left-radius: 50px;
+    border-top-right-radius: 30px;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 50px;
+}
+li:nth-child(1) .coreimg svg{
+    width: 34pxpx;
+    margin: 0 auto;
+    display: block;
+    height: auto;
+    fill: #14a9ca;
+}
+li:nth-child(2) .coreimg{
+    background: rgba(81, 104, 172, 0.1);
+    border-top-left-radius: 70px;
+    border-top-right-radius: 80px;
+    border-bottom-left-radius: 90px;
+    border-bottom-right-radius: 70px;
+}
+li:nth-child(2) .coreimg svg{
+    width: 34pxpx;
+    margin: 0 auto;
+    display: block;
+    height: auto;
+    fill: #5168ac;
+}
+li:nth-child(3) .coreimg{
+    background: rgba(82, 202, 164, 0.1);
+    border-top-left-radius: 30px;
+    border-top-right-radius: 50px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 30px;
+}
+li:nth-child(3) .coreimg svg{
+    width: 34pxpx;
+    margin: 0 auto;
+    display: block;
+    height: auto;
+    fill: #52caa4;
+}
+li:nth-child(4) .coreimg{
+    background: rgba(20,169,202,.1);
+    border-top-left-radius: 50px;
+    border-top-right-radius: 30px;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 50px;
+}
+li:nth-child(4) .coreimg svg{
+    width: 34pxpx;
+    margin: 0 auto;
+    display: block;
+    height: auto;
+    fill: #14a9ca;
+}
+.coretitle{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.coretitle .t{
+    color: #333333;
+    font-weight: bold;
+    font-size: 20px;
+    margin: 0 0 10px 0;
+    line-height: 1;
+}
+.coretitle .s{
+    color: #b0b0b0;
+    font-size: 15px;
+    line-height: 1.6;
+    margin: 0;
+}
+.coreright ul li:nth-child(2n+0){
+    margin-left: 25%;
+}
+.EventsBlog ul {
+    list-style: none;
+    max-width: 1300px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+.EventsBlog ul li {
+    width: 32%;
+}
+.ebimg {
+    width: 100%;
+    line-height: 1;
+    overflow: hidden;
+}
+.ebimg img {
+    width: 100%;
+    line-height: 1;
+    transition: all ease .3s;
+    pointer-events: none;
+}
+.ebtitle {
+    margin-top: 30px;
+}
+.ebtitle p {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.6;
+    margin: 0;
+    color: #333;
+    transition: all ease .3s;
+}
+.ebtitleH1 {
+    margin: 0px 0 60px;
+    text-align: center;
+    font-size: 40px;
+    color: #333;
+    font-weight: bold;
+    display: block;
+}
+.EventsBlog{
+    margin-top: 100px;
+}
+.EventsBlog ul li:hover .ebimg img{
+    transform: scale(1.1);
+}
+.EventsBlog ul li:hover .ebtitle p{
+    color: #0c8760;
+}
+.footer {
+    background: #2f4994;
+    overflow: hidden;
+}
+.footerCenter {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1300px;
+    padding-top: 100px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.footerleft {
+    display: flex;
+}
+.footerleft .f {
+    margin-right: 80px;
+    display: flex;
+    flex-direction: column;
+}
+.footerleft .t {
+    font-size: 22px;
+    color: #fff;
+    font-weight: bold;
+    line-height: 1;
+    margin: 0 0 30px 0;
+}
+.footerleft .a {
+    margin-bottom: 15px;
+    color: #fff;
+    opacity: .5;
+    transition: all ease .3s;
+}
+.footerleft .a:hover{
+    opacity: 1;
+}
+.footerright .t {
+    font-size: 22px;
+    color: #fff;
+    font-weight: bold;
+    line-height: 1;
+    margin: 0 0 30px 0;
+    text-align: left;
+}
+.footerright ul {
+    list-style: none;
+    display: flex;
+    justify-content: flex-start;
+    padding: 0;
+
+}
+.footerright ul li {
+    margin-right: 14px;
+}
+.footerright ul li a {
+    border-radius: 100%;
+    border: 1px solid #fff;
+    width: 36px;
+    height: 36px;
+    display: inline-block;
+    text-align: center;
+    line-height: 36px;
+    position: relative;
+    align-content: center;
+    transition: all ease .3s;
+}
+.footerright ul li a img {
+    width: auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    height: auto;
+}
+.footerright ul li a:hover{
+    border: 1px solid #3eaf7c;
+    background: #3eaf7c;
+}
+.footerfoot {
+    margin-top: 70px;
+    padding-top: 40px;
+    border-top: 1px solid rgba(255,255,255,.1);
+    text-align: center;
+    color: rgba(255,255,255,.4);
+    line-height: 1;
+    width: 100%;
+    padding-bottom: 25px;
+}
+.footerfoot p {
+    line-height: 1.6;
+}
+.footer-wrapper.footer {
+    display: none;
+}
+aside.sidebar {
+    background-color: #fff;
+    border-right: 1px solid #f5f5f5;
+    top: 89px;
+}
+aside.sidebar ul.sidebar-links > li {
+    background: none;
+}
+aside.sidebar a.sidebar-link.active {
+    color: #333;
+    background: #d8efe5;
+}
+aside.sidebar .sidebar-heading {
+    color: #333;
+    font-weight: bold;
+}
+.sidebar .search-box{
+    padding: 0.25rem 1.5rem 0.25rem 1.25rem;
+    border-radius: 5px;
+    border: 1px solid #eee;
+    box-sizing: border-box;
+    margin: 25px 20px 5px;
+    width: auto;
+    align-content: center;
+}
+.sidebar .search-box i{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    left: 1.2rem;
+}
+.sidebar .search-box .suggestions{
+    width: auto;
+    top: 85px;
+    left: 14.5px;
+    right: 14.5px;
+    border-radius: 5px;
+    background: #fff;
+    z-index: 99;
+    font-size: 13px;
+}
+main.page {
+    padding-top: 2rem;
+}
+main.page .page-title {
+    color: #333;
+    padding-bottom: 0;
+    margin-bottom: -1rem;
+}
+main.page .theme-reco-content{
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 2rem 2.5rem;
+}
+main.page .page-title div {
+    color: #999;
+}
+.page-nav p.inner {
+    border-top: 1px solid #f5f5f5;
+}
+div.custom-block.warning {
+    background-color: #fff4ec;
+    padding-top: 12px;
+}
+div.custom-block.tip {
+    background-color: #effff4;
+    padding-top: 12px;
+}
+ul.sub-sidebar-wrapper a[data-v-5f54e4e2]{
+    color: #666;
+    font-size: 14px;
+}
+.timeline-content{
+    padding-top: 70px;
+    margin: 0;
+    padding-bottom: 30vh;
+}
+div.abstract-item .title a,
+.abstract-item i{
+    transition: all ease .3s;
+}
+div.abstract-item:hover .title a,
+.abstract-item:hover i{
+    color: #fff;
+}
+.back-to-ceiling:hover{
+    transition: all ease .3s;
+}
+.back-to-ceiling:hover{
+    background: #0c8760 !important;
+}
+.appleft3{
+    transform: translateY(-30px);
+}
+.nav-links a .right,
+.nav-links a .down{
+    display: none;
+}
+.dorissolid1::before{
+    content:'';
+    width: 15px;
+    height: 15px;
+    border-radius: 100%;
+    opacity: .8;
+    background: #3eaf7c;
+    position: absolute;
+    right: 82.8%;
+    top: 100%;
+    animation: dorisLA1 10s infinite linear;
+}
+.dorissolid2::before{
+    content:'';
+    width: 15px;
+    height: 15px;
+    border-radius: 100%;
+    opacity: .8;
+    background: #3eaf7c;
+    position: absolute;
+    right: 82.8%;
+    top: 100%;
+    animation: dorisLB1 10s infinite linear;
+}
+.dian1{
+    animation: dian1-1 2s infinite linear;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #2ca37d;
+    border-radius: 100%;
+    left: 29.2%;
+    top: 41.2%;
+    display: inline-block;
+    z-index: 0;
+    transform: translate(-8px,-8px);
+}
+.dian2{
+    animation: dian2-1 2s infinite linear;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #2ca37d;
+    border-radius: 100%;
+    left: 29.2%;
+    top: 41.2%;
+    display: inline-block;
+    z-index: 0;
+    transform: translate(-8px,-8px);
+}
+.dian3{
+    animation: dian3-1 2s infinite linear;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #2ca37d;
+    border-radius: 100%;
+    left: 81.2%;
+    top: 56.2%;
+    display: inline-block;
+    z-index: 0;
+    transform: translate(-8px,-8px);
+}
+.dian4{
+    animation: dian4-1 2s infinite linear;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #2ca37d;
+    border-radius: 100%;
+    left: 68.2%;
+    top: 66.2%;
+    display: inline-block;
+    z-index: 0;
+    transform: translate(-8px,-8px);
+}
+.dian5{
+    animation: dian5-1 2s infinite linear;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #2ca37d;
+    border-radius: 100%;
+    left: 68.2%;
+    top: 66.2%;
+    display: inline-block;
+    z-index: 0;
+    transform: translate(-8px,-8px);
+}
+.sidebar-button .icon.guanbi{
+    display:none;
+}
+.bcenter{
+    position: relative;
+    width: 100%;
+}
+#app.home .bcenter img{
+    max-height: none;
+    margin: 0;
+    max-width: none;
+    pointer-events: none;
+    width: 100%;
+}
+.xbg1{
+    position: absolute;
+    width: 23%;
+    height: 18%;
+    border-radius: 100%;
+    left: 43.2%;
+    top: 28.5%;
+    opacity: .8;
+    background: #2ca37d;
+    z-index: 0;
+    animation: d1 3s infinite ease;  
+}
+.xbg2{
+    position: absolute;
+    width: 23%;
+    height: 18%;
+    border-radius: 100%;
+    left: 43.2%;
+    top: 28.5%;
+    opacity: .5;
+    background: #2ca37d;
+    z-index: 1;
+    animation: d2 2.5s infinite ease;  
+}
+.xbg3{
+    position: absolute;
+    width: 23%;
+    height: 18%;
+    border-radius: 100%;
+    left: 43.2%;
+    top: 28.5%;
+    opacity: .2;
+    background: #2ca37d;
+    z-index: 2;
+    animation: d3 2s infinite ease;  
+}
+.xb{
+    position: absolute;
+    left: 42%;
+    top: 25%;
+    background: url(/blog-images/xbkuanglogo.png) no-repeat center;
+    width: 25.2%;
+    height: 20.7%;
+    animation: xb 3s infinite;  
+    animation-direction:alternate;  
+    z-index: 5;
+    background-size: 100%;
+}
+@keyframes xb {
+    0%{
+        top: 25%;    
+    }
+    100%{
+        top: 28%;
+    }
+}
+@keyframes d1 {
+    0%{
+        transform: scale(1);
+        top: 28.5%;
+    }
+    100%{
+        transform: scale(1.4);
+        top: 31.5%;
+    }
+}
+@keyframes d2 {
+    0%{
+        transform: scale(1);
+        top: 28.5%;
+    }
+    100%{
+        transform: scale(1.3);
+        top: 31.5%;
+    }
+}
+@keyframes d3 {
+    0%{
+        transform: scale(1);
+        top: 28.5%;
+    }
+    100%{
+        transform: scale(1.2);
+        top: 31.5%;
+    }
+}
+.page .page-edit{
+    border-top: 1px solid #f5f5f5;
+    max-width: 860px;
+    margin: 0 auto;
+    width: 100%;
+    padding: 1rem 0 0;
+}
+#app div.tagpage{
+    margin-left: 18rem;
+    padding: 140px 40px 100px;
+    width: auto;
+    box-sizing: border-box;
+}
+#app div.tagpage > div{
+    max-width: 860px;
+    margin: 0 auto;
+}
+#app div.tagpage > div.tags{
+    margin-bottom: 20px;
+    margin-top: 10px;
+}
+#app div.tagpage > div.tags span{width: 60px;
+    height: 28px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    line-height: 27px;
+    text-align: center;
+    font-size: 13px;
+    transform: scale(1);
+    transition: all ease .3s;
+    margin: 0 10px 0 0;
+    border-radius: 2px;
+}
+#app div.tagpage > div.tags span:hover{
+    background: #2ca37d !important;
+}
+.nav-links a:hover, .nav-links a.router-link-active {
+    color: #2ca37d;
+}
+.dropdown-wrapper .nav-dropdown .dropdown-item a {
+    color: #686868 ;
+}
+#app a.sidebar-link{
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box; 
+    -webkit-box-orient: vertical; 
+    -webkit-line-clamp: 1; 
+    overflow: hidden;
+    width: 100%;
+    line-height: 1.6;
+    padding: 0.35rem 1rem 0.35rem 1.25rem;
+}
+#app a.sidebar-link.active{
+    border: 0;
+    border-right: 3px solid #3eaf7c;
+}
+.tishi{
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    background: #fff;
+    padding: 30px 50px;
+    box-shadow: 0 0 6px rgba(0,0,0,.1);
+    line-height: 1;
+    color: #333;
+    border-radius: 4px;
+    text-align: center;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.tishi p{
+    font-size: 15px;
+    margin: 0 0 30px 0;
+    line-height: 1;
+}
+.guanbi{
+    background: #2ca37d;
+    border-radius: 25px;
+    color: #fff;
+    padding: 11px;
+    font-size: 12px;
+    max-width: 100px;
+    margin: 0 auto;
+    width: 100%;
+    cursor: pointer;
+}
+.tishi h3{
+    color: #333;
+    font-weight: bold;
+    margin: 0 0 20px;
+    line-height: 1;
+    font-size: 22px;
+}
+#app.home .blogxiangqing{
+    display: none;
+}
+#app.home .theme-reco-content{
+    padding: 0;
+    max-width: none;
+}
+#app.home main.page {
+    padding: 0px;
+}
+div .home-blog .hero h1 {
+    text-align: left;
+    font-size: 4.2rem;
+    color: #fff;
+    font-weight: 700;
+    letter-spacing: -2px;
+    line-height: 1;
+    margin: 0;
+    display: block;
+}
+div .home-blog .hero .description{
+    text-align: left;
+    font-size: 4rem;
+    color: #52caa4;
+    max-width: none;
+    display: block;
+    font-weight: 700;
+    letter-spacing: -2px;
+    margin: 0;
+    line-height: 1;
+}
+#app.home .page-edit,
+#app.home .comments-wrapper{
+    display: none;
+}
+.navbar .search-box{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: fixed;
+    top: calc(5.625rem + 0px);
+    left: 0;
+    margin: 0;
+    width: 258px;
+    background: #fff;
+    padding: 16px 14.5px;
+}
+.navbar > a{
+    position: absolute;
+    left: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+}
+header.navbar > .links{
+    padding: 0;
+    background: none;
+    position: static;
+    width: 100%;
+    max-width: none !important;
+    display: flex;
+    justify-content: flex-end;
+}
+.navbar > .links nav{
+    padding: 0;
+    right: 1.5rem;
+    background: none;
+    line-height: 1;
+    font-size: 16px;
+    color: #333;
+    font-weight: 700;
+    height: 5.625rem;
+    display: flex;
+    justify-content: flex-end;
+}
+.navbar > a img.logo{
+    height: auto;
+    min-width: auto;
+    max-width: 46px;
+    margin: 0 10px 0 0;
+    vertical-align: middle;
+    border-radius: 0;
+}
+.navbar > a .site-name{
+    line-height: 1;
+    vertical-align: sub;
+}
+.navbar > .links .title,
+.navbar > .links .nav-link{
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 1;
+    border: 0 !important;
+    margin: 0 !important;
+    transition: all ease .15s;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+}
+.navbar > .links .nav-item{
+    margin-left: 2.3rem;
+    height: 100%;
+    line-height: 0;
+    font-size: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.navbar > .links .nav-item .dropdown-wrapper{
+    height: 100%;
+}
+.navbar > .links .nav-item .dropdown-wrapper .arrow{
+    font-family: "doris" !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 12px;
+    border: 0;
+    margin: 0;
+    width: 15px;
+    height: 100%;
+    margin-left: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.navbar > .links .nav-item .dropdown-wrapper .arrow:before {
+    content: "\e62a";
+}
+.navbar > .links .nav-item .dropdown-wrapper .dropdown-title{
+    display: flex;
+    height: 100%;
+}
+.navbar > .links .nav-item .dropdown-wrapper .nav-dropdown{
+    display: block !important;
+    max-height: none;
+    min-width: 100px;
+    border-radius: 2px;
+    background: #fefefe;
+    border: 1px solid #f1f1f1;
+    padding: 15px 0;
+    width: fit-content;
+    top: calc(100% - 2px);
+    left: 50%;
+    transition: all ease 0.3s;
+    transform: translateY(20px) translateX(-50%);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    box-shadow: none;
+}
+.navbar > .links .nav-item .dropdown-wrapper .nav-dropdown a{
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 2.2;
+    padding: 0 13px;
+}
+.navbar > .links .nav-item .dropdown-wrapper .nav-dropdown a:hover,
+.navbar > .links .dropdown-title:hover span{
+    color: #0c8760 !important;
+}
+.navbar > .links .nav-item .dropdown-wrapper:hover .nav-dropdown{
+    transform: translateY(0px) translateX(-50%);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+main.page > .theme-default-content{
+    max-width: 860px;
+    padding-top: 140px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+main.page > .page-nav{
+    max-width: 860px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+main.page > .theme-default-content span.badge{
+    margin: 0;
+}
+.page-nav p.inner{
+    font-size: 0;
+}
+.page-nav p.inner > span a{
+    font-size: 14px;
+}
+.home main.page > .theme-default-content{
+    max-width: 100%;
+    padding: 0px;
+}
+.theme-default-content:not(.custom) > h1, .theme-default-content:not(.custom) > h2, .theme-default-content:not(.custom) > h3, .theme-default-content:not(.custom) > h4, .theme-default-content:not(.custom) > h5, .theme-default-content:not(.custom) > h6 {
+    margin-top: -5.1rem;
+    padding-top: 6.6rem;
+    margin-bottom: 0;
+}
+.timebox{
+    font-size: 14px;
+    color: #999;
+    margin: 0;
+    line-height: 1; 
+}
+.time-nomar{
+    margin: 0 0 40px 0 !important;
+}
+#frontmatter-title{
+    border-bottom: 1px solid #f5f5f5;
+    padding-bottom: 15px;
+    padding-top: 1.5rem;
+}
+#app .sidebar-sub-headers a{
+    background: none;  
+}
+#app .sidebar-sub-headers a.active{
+    color: #3eaf7c; 
+    border: 0;
+    font-weight: bold; 
+}
+#app .sidebar-sub-headers a{
+    color: #7e7e7e;
+}
+.navbar .search-box .suggestions{
+    background: #fff;
+    top: 44px;
+    left: 14.5px;
+    right: 14.5px;
+    width: 500px;
+    border: 1px solid #f4f4f4;
+    box-sizing: border-box;
+    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
+}
+#app .search-box .suggestion {
+    padding: 0.6rem 0.6rem;
+}
+.search-box .suggestion a .page-title {
+    color: #333333;
+}
+.back-to-ceiling{
+    bottom: 1rem !important;  
+}
+.back-to-ceiling:hover .icon{
+    fill: #fff !important;
+}
+header.navbar > .links .color-picker {
+    display: none;
+}
+header.navbar > .links .search-box .iconfont {
+    top: -1px;
+    height: 40px;
+    left: 29px;
+    line-height: 40px;
+}
+.navbar > .links nav .title i{
+    display: none;    
+}
+.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
+    display: none;
+}
+.footerfoot img{
+    pointer-events: none;
+}
+main.page .page-title .title{
+    font-size: 36px;
+    font-weight: bold;
+    border-bottom: 1px solid #f5f5f5;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+}
+main.page .page-title div > i:nth-child(1){
+    display: none;
+}
+main.page .page-title div > i {
+    font-size: 13px;
+    color: #999;
+}
+main.page .page-title div > i span {
+    font-family: arial;
+}
+main.page .page-title div > i::before {
+    font-size: 14px;
+    color: #c5c5c5;
+}
+#app .timeline-wrapper {
+    padding-top: 0;
+}
+#app .timeline-wrapper .timeline-content{
+    padding-top: 8rem;
+    padding-left: 45px;
+}
+#app .timeline-wrapper .timeline-content > li:nth-child(1) {
+    display: none;
+}
+#app .timeline-wrapper .timeline-content .year{
+    font-size: 40px; 
+    margin-bottom: 20px;
+}
+#app .timeline-wrapper .timeline-content .year-wrapper li{
+    padding: 10px 0 10px;
+    border-bottom: 1px dashed #eee;
+}
+#app .timeline-wrapper .timeline-content .year-wrapper li .date{
+    color: #b3b3b3;
+    font-size: 14px;
+}
+#app .timeline-wrapper .timeline-content .year-wrapper li .title{
+    color: #606060;
+    margin-left: 15px;
+}
+#app .timeline-wrapper .timeline-content .year::before{
+    left: -46px;
+}
+#app .timeline-wrapper .timeline-content .year-wrapper li .date::before{
+    top: 50%;
+    transform: translateY(-50%);
+    left: -45px;
+}
+#app .timeline-wrapper .timeline-content .year-wrapper li:hover span{
+    color: #3eaf7c;
+}
+#app .pagation .pagation-list span.jump{
+    padding: 8px 12px;
+    border-radius: 17px;
+    cursor: pointer;
+    margin-left: 5px;
+    box-shadow: none;
+    border: 1px solid #ebebeb !important;
+    font-weight: 500;
+    font-size: 12px;
+    color: #666;
+}
+#app .pagation .pagation-list span.bgprimary,
+#app .pagation .pagation-list span:hover{
+    background: #3eaf7c;
+    border: 1px solid #3eaf7c !important;
+    color: #fff;
+}
+#app .pagation .pagation-list span.jumpinp input{
+    box-shadow: none;
+}
+#app .pagation .pagation-list span.jumppoint,
+#app .pagation .pagation-list span.jumpinp,
+#app .pagation .pagation-list span.gobtn{
+    display: none;
+}
+#app .abstract-wrapper.list{
+    padding-bottom: 100px;    
+}
+#app .theme-container{
+    max-width: none;
+    padding: 5.625rem 0 0;
+}
+#app .category-wrapper{
+    max-width: 288px;
+    position: fixed;
+    left: 0;
+    top: 5.625rem;
+    bottom: 0;
+    background-color: #fff;
+    border-right: 1px solid #f5f5f5;
+    margin: 0;
+    transform: translate(0px, 0px) !important;
+    opacity: 1 !important;
+    padding: 4.5rem 0 1.5rem;
+    width: 100%;
+}
+#app .abstract-wrapper{
+    margin-left: 288px;
+    width: auto;
+    padding: 60px 15px 100px;
+}
+#app .abstract-wrapper > div{
+    max-width: 860px;
+    margin: 0 auto 20px;
+    background: #f5f5f5;
+    box-shadow: none;
+    padding: 25px 30px;
+}
+#app .category-wrapper li{
+    width: 100%;
+    margin: 0;
+    box-shadow: none;
+    border-radius: 0;
+    background: none;
+}
+#app .category-wrapper li a{
+    padding: 12px 15px;
+    line-height: 1;
+    font-size: 13px;
+    position: relative;
+    background: rgba(62, 175, 124, 0);
+}
+#app .category-wrapper li a::after{
+    content:'';
+    position: absolute;
+    right: 0;
+    width: 3px;
+    height: 100%;
+    background: #3eaf7c;
+    opacity: 0;
+}
+#app .category-wrapper li a:hover span:first-child{
+    color: #3eaf7c;
+}
+#app .category-wrapper li.active a{
+    background: rgba(62, 175, 124, .1);
+}
+#app .category-wrapper li.active a::after{
+    opacity: 1;
+}
+#app .category-wrapper li.active a span:first-child{
+    color: #3eaf7c;
+}
+#app .abstract-wrapper > div:hover{
+    background: #2ca37d;
+}
+#app .abstract-wrapper > div .title{
+    font-size: 18px;
+    line-height: 1;
+    border-bottom: 1px solid #e3e3e3;
+    width: 100%;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+}
+#app .abstract-wrapper > div .title a{
+    color: #333;
+}
+#app .abstract-wrapper > div:hover a{
+    color: #fff;
+}
+#app .abstract-wrapper > div div:last-child{
+    pointer-events: none;
+}
+#app .abstract-wrapper > div div:last-child i{
+    line-height: 1;
+    color: #b9b9b9;
+}
+#app .abstract-wrapper > div div.pagation-list{
+    pointer-events: auto;
+}
+#app .abstract-wrapper > div:hover div:last-child i{
+    color: #fff;
+}
+#app .abstract-wrapper > div .title::after{
+    display: none;
+}
+#app .abstract-wrapper > div:last-child{
+    background: none;
+    padding: 0;
+}
+main.page .page-title div > i.tags{
+    display: none;
+}
+.content__default:not(.custom) > h1, 
+.content__default:not(.custom) > h2, 
+.content__default:not(.custom) > h3, 
+.content__default:not(.custom) > h4, 
+.content__default:not(.custom) > h5, 
+.content__default:not(.custom) > h6 {
+    font-weight: bold;
+}
+
+#app .page .theme-reco-content h2 {
+    padding-left: 0;
+}
+
+#app .page .theme-reco-content h2::before {
+    display: none;
+}
+.nav-links .nav-item .downloads{
+    height: auto;    
+}
+.home main.page .page-title{
+    display:none;    
+}
+// .home .home-blog {
+//     padding: 5.625rem 0 0 0;
+// }
+.navbar .links .search-box input{
+    width: 100%;
+    background: #fff;
+    box-sizing: border-box;
+    border: 1px solid var(--border-color);
+    height: 40px;
+}
+.sidebar-group > .sidebar-group-items {
+    padding-left: 0.5em;
+}
+
+.sidebar-group.is-sub-group {
+    padding-left: 0.5em;
+}
+.no-sidebar .navbar .search-box{
+    display: none;
+}
+.category .no-sidebar .navbar .search-box{
+    display: block;    
+}
+.categories-wrapper.no-sidebar .navbar .search-box{
+    display: block;
+}
+.navbar > .links nav .nav-item:last-child ul li{
+    line-height: 0;    
+}
+.navbar > .links nav .nav-item:last-child ul li:nth-child(1) a,
+.navbar > .links nav .nav-item:last-child ul li:nth-child(2) a{
+    font-size: 0px;
+}
+.navbar > .links nav .nav-item:last-child ul li:nth-child(1) a i,
+.navbar > .links nav .nav-item:last-child ul li:nth-child(2) a i{
+    display: none;   
+}
+.navbar > .links nav .nav-item:last-child ul li:nth-child(1) a::after{
+    content: 'English';
+    display: block;
+    font-size: 14px;
+    position: static;
+    border: 0;
+    width: auto;
+    height: auto;
+}
+.navbar > .links nav .nav-item:last-child ul li:nth-child(2) a::after{
+    content: '简体中文';
+    display: block;
+    font-size: 14px;
+    position: static;
+    border: 0;
+    width: auto;
+    height: auto;
+}
+
+#app .sidebar-group.is-sub-group > .sidebar-heading {
+    padding-left: 1.25rem;
+}
+.nopage h1{
+    font-size: 100px;
+    line-height: 1;
+    font-weight: bold;
+    font-family: arial;
+    margin-bottom: 20px;
+}
+.nopage blockquote{
+    font-size: 20px;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    border-bottom: 1px solid #f5f5f5;
+    padding-bottom: 25px;
+    margin-bottom: 25px;
+}
+.nopage a{}
+
+
+
+@media screen and (min-width:768px) {
+    .theme-container.no-sidebar .sidebar.showme ul li a .post-num{
+        padding: 1px 3px;
+        border-radius: 2px;
+        color: #fff;
+        font-size: 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-weight: 500;
+        height: 15px;
+        line-height: 15px;
+        margin-top: 5px;
+    }
+    .sidebar > ul.sidebar-links {
+        padding: 5rem 0 1.5rem;
+    }
+    .theme-container.no-sidebar .sidebar.showme{
+        display: block;
+        top: 160px;
+        background-color: #fff;
+        border-right: 1px solid #f5f5f5;
+        transform: translateY(0px) !important;
+        opacity: 1 !important;
+    }
+    .theme-container.no-sidebar .sidebar.showme ul li{
+        background: none;
+        margin: 0;
+    }
+    .theme-container.no-sidebar .sidebar.showme ul li a{
+        font-size: 15.2px;
+        font-weight: 400;
+        display: flex;
+        padding: 0.35rem 1rem 0.35rem 1.25rem;
+        line-height: 1.7;
+        box-sizing: border-box;
+        color: #333;
+        justify-content: space-between;
+        border-right: 3px solid #ffffff;
+    }
+    .theme-container.no-sidebar .sidebar.showme ul li a:hover{
+        color: #3eaf7c;
+    }
+    .theme-container.no-sidebar .sidebar.showme ul li.active a{
+        border-right: 3px solid #3eaf7c;
+        color: #333;
+        background: #d8efe5;
+        font-weight: bold;
+    }
+    .abstract-wrapper.bokeliebiao,
+    .youde .no-sidebar .page{
+        margin-left: 18rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 140px 0px 100px;
+        box-sizing: border-box;
+        width: auto !important;
+    }
+    .youde .no-sidebar .page{
+        margin-left: 18rem !important;
+        padding-right: 14rem !important;
+    }
+    .abstract-wrapper.bokeliebiao > div{
+        max-width: 860px;
+        margin: 0 auto 20px;
+    }
+    .youde #app .sidebar.blogliebiao{
+        display: block;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links{
+        padding: 2rem 0 1.5rem;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item{
+        display: none;
+        padding: 0;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item:nth-child(1){
+        display: block;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item:nth-child(1) .dropdown-wrapper > a{
+        pointer-events: none;
+        line-height: 2.2;
+        padding: 0.35rem 1.5rem 0.35rem 1.25rem;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item .dropdown-wrapper{
+        height: auto;    
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item .nav-dropdown{
+        position: static;
+        opacity: 1;
+        max-height: none;
+        border-radius: 0;
+        transform: translate(0,0);
+        border: 0;
+        background: none;  
+        padding: 0;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item:nth-child(1) .dropdown-wrapper > a i{
+        display: none;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item .nav-dropdown a{
+        padding: 0.35rem 1rem 0.35rem 2.25rem;
+        font-size: 15px;
+        font-weight: 400;
+        transition: none;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item .nav-dropdown .active a{
+        color: #333;
+        background: #d8efe5;
+        border-right: 3px solid #3eaf7c;
+        font-weight: bold;
+    }
+    .pagation .pagation-list span.jump:hover {
+        background: #3eaf7c;
+        border: 1px solid #3eaf7c;
+        color: #fff;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@media screen and (max-width:1300px) {
+    .newsleft .fataImg .dim img {
+        width: 100%;
+    }
+    .newsleft .fataImg .dim{
+        width: 100%;
+    }
+    .navbar > .links nav .nav-item{
+         margin-left: 1rem;   
+    }
+    .navbar > .links nav .nav-item:first-child{
+         margin-left: 0;   
+    }
+    .navbar > .links .document.nav-item {
+        margin-right: 1rem;
+    }
+}
+@media screen and (max-width:1200px) {
+    div .nav-links .nav-item{
+        margin-left: 1.5rem;
+    }
+    .navbar > .links .document.nav-item {
+        a {
+            font-size: 15px;
+        }
+    }
+    .nav-links a.dropdown-title,
+    .nav-links a.nav-link{
+        font-weight: 500;
+        font-size: 15px;
+    }
+    .nav-links .nav-item .downloads {
+        padding: 12px 22px;
+    }
+    div .home-blog .hero h1{
+        font-size: 2.8rem;
+    }
+    div .home-blog .hero .description{
+        font-size: 2.5rem;
+    }
+    .sum {
+        font-size: 15px;
+        line-height: 1.5;
+        margin: 30px 0 60px;
+    }
+    .bannerHref a {
+        width: 160px;
+        height: 39px;
+        line-height: 39px;
+        margin-right: 12px;
+        font-size: 14px;
+        padding-top: 3px;
+    }
+    div .home-blog .hero {
+        height: 64vh;
+    }
+    .bImg {
+        width: 60%;
+    }
+    .bText {
+        width: 40%;
+    }
+    .newsboxTitle .t {
+        font-size: 15px;
+        line-height: 1.3;
+    }
+    .newsboxTitle .s {
+        font-size: 13px;
+        line-height: 1.4;
+        margin: 15px 0;
+    }
+    .newsboxImg {
+        height: 180px;
+    }
+    .newsBox li {
+        padding: 35px 23px 0;
+    }
+    .newsBox {
+        padding: 70px 15px 70px;
+    }
+    .newsdownData .t {
+        font-size: 22px;
+    }
+    .newsleft .s {
+        font-size: 16px;
+    }
+    .newsleft .fataImg {
+        transform: translateY(-170px);
+        height: 240px;
+    }
+    .newsleft .fataImg .dim img{
+        display: none;
+    }
+    .newsleft .fataImg .dim {
+        background: url(/blog-images/data-1.png) no-repeat left top;
+        background-size: 100%;
+    }
+    .newsleft .al {
+        margin-top: 140px;
+    }
+    .newsdownData {
+        padding: 60px 40px;
+    }
+    .apptitle .t {
+        font-size: 35px;
+        margin-bottom: 30px;
+    }
+    .apptitle .s {
+        line-height: 1.7;
+        font-size: 14px;
+        margin-bottom: 20px;
+        word-break: break-word;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+    }
+    .apptitle .al {
+        margin-top: 30px;
+    }
+    .appimg {
+        width: 53%;
+    }
+    .apptitle {
+        padding-top: 15px;
+    }
+    .apptitle a {
+        width: 160px;
+        height: 40px;
+        line-height: 40px;
+        padding-top: 5px;
+    }
+    .dorissolid1 {
+        max-width: 660px;
+        margin: -64px auto 0;
+    }
+    .dorissolid1 img{
+        width :100%;
+    }
+    .appright .appimg {
+        max-width: 450px;
+        margin-left: -90px;
+    }
+    .appright .apptitle {
+        padding-top: 10px;
+        width: 40%;
+        margin-right: 3%;
+    }
+    .dorissolid2{
+        max-width: 620px;
+        margin: -23px auto 0;
+    }
+    .dorissolid2 img{
+        width :100%;
+    }
+    .apacheDoris {
+        max-width: 880px;
+    }
+    .appleft, .appright {
+        padding-bottom: 23px;
+    }
+    .icoBox {
+        padding: 60px 0 10px;
+    }
+    .icoBoxtitle p {
+        font-size: 40px;
+        margin-bottom: 80px;
+        margin-bottom: 50px;
+    }
+    .icotitle .t {
+        font-size: 20px;
+        margin-bottom: 14px;
+    }
+    .icotitle .s {
+        line-height: 1.5;
+        font-size: 13px;
+    }
+    .icotitle {
+        margin-top: 13px;
+    }
+    .icoBoxico ul li .icoimg img {
+        max-width: 90px;
+    }
+    .icoBoxico ul {
+        max-width: 900px;
+    }
+    .icoBoxico ul:before {
+        height: 90px;
+        max-width: 600px;
+        background-size: 500px;
+    }
+    .icoBoxico ul li {
+        margin: 0 0px 40px;
+    }
+    .icoBoxico ul:after{
+        height: 90px;
+        max-width: 600px;
+        background-size: 500px;
+        top: 340px;
+    }
+    .coreleft .t {
+        font-size: 40px;
+        margin-bottom: 30px;
+    }
+    .coreleft .s {
+        line-height: 1.8;
+        margin-bottom: 25px;
+        font-size: 14px;
+    }
+    .coretitle .t {
+        font-size: 16px;
+    }
+    .coretitle .s {
+        font-size: 13px;
+        line-height: 1.3;
+    }
+    .coreright ul li {
+        margin-bottom: 35px;
+    }
+    .coreleft {
+        padding-top: 20px;
+    }
+    .corebox {
+        max-width: 880px;
+    }
+    .ebtitleH1 {
+        font-size: 36px;
+        letter-spacing: -3px;
+        margin: 0px 0 40px;
+    }
+    .ebtitle p {
+        font-size: 15px;
+        line-height: 1.4;
+    }
+    .ebtitle {
+        margin-top: 20px;
+    }
+    .EventsBlog {
+        margin-top: 40px;
+    }
+    .core {
+        padding: 85px 15px;
+    }
+    .EventsBlog ul {
+        max-width: 910px;
+    }
+    .footerCenter {
+        padding-top: 70px;
+        max-width: 880px;
+    }
+    .footerleft .t {
+        font-size: 16px;
+        margin: 0 0 20px 0;
+    }
+    .footerleft .a {
+        margin-bottom: 10px;
+        font-size: 14px;
+    }
+    .footerright .t {
+        font-size: 16px;
+        margin: 0 0 20px 0;
+    }
+    .footerright ul li {
+        margin-right: 10px;
+    }
+    .footerright ul li a {
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+    }
+    .footerright ul li a img {
+        width: 13px;
+    }
+    .footerfoot p {
+        line-height: 1.3;
+        font-size: 12px;
+    }
+    .footerfoot {
+        margin-top: 40px;
+    }
+    .sidebar .search-box {
+        display: block;
+    }
+    .dorissolid1::before{
+        animation: dorisLA2 10s infinite linear;
+    }
+    .dorissolid2::before{
+        animation: dorisLB2 10s infinite linear;
+    }
+    .abstract-wrapper.bokeliebiao{
+        padding: 140px 40px 100px;
+    }
+    .navbar > .links nav .nav-item{
+         margin-left: 1.4rem;   
+    }
+    .navbar > .links nav .title, .navbar > .links nav .nav-link {
+        font-size: 14px;
+    }
+}
+@media screen and (max-width: 1100px) {
+    .navbar > .links nav .title, .navbar > .links nav .nav-link {
+        font-size: 13px;
+    }
+    .navbar > .links nav .nav-item {
+        margin-left: 12px;
+    }
+}
+@media screen and (max-width:959px) {
+    .abstract-wrapper.bokeliebiao,
+    .youde .no-sidebar main.page {
+        margin-left: 14.76rem;
+    }
+    .youde .no-sidebar main.page {
+        padding: 140px 14rem 0 0rem !important;
+        margin-left: 14rem !important;
+    }
+    #app div.tagpage {
+        padding: 140px 40px 100px;
+        margin-left: 14rem;
+    }
+    .navbar > .links nav .nav-item{
+        margin-left: .9rem;   
+    }
+    .navbar > .links .document.nav-item {
+        display: none;
+    }
+    .navbar .dropdown-box {
+        left: 14rem !important;
+        .dropdown-wrapper.open .dropdown-title {
+            margin-bottom: 0;
+        }
+        .nav-dropdown {
+            padding: 0;
+            margin: 0;
+            background-color: #ffffff;
+            border: 1px solid #f1f1f1;
+        }
+    }
+}
+@media screen and (max-width:768px) {
+    .navbar .links nav.can-hide {
+        display: none;
+    }
+    .navbar .home-link {
+        left: 10px;
+    }
+    div > .navbar{
+        padding: 0 15px;
+        height: 4rem;
+    }
+    div .sidebar-button {
+        position: absolute;
+        right: 15px;
+        left: auto;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 0;
+    }
+    div .home-blog .hero {
+        margin: 4rem auto 0;
+        height: auto;
+        align-content: flex-start;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding-bottom: 350px;
+    }
+    .hero .b {
+        flex-direction: column;
+        padding-top: 60px;
+    }
+    .bText {
+        width: 100%;
+    }
+    .home-blog .hero .hero-img {
+        max-height: none;
+    }
+    .bImg {
+        width: 100%;
+        top: auto;
+        bottom: 0;
+        height: auto;
+        max-width: 500px;
+    }
+    div .home-blog .hero h1 {
+        font-size: 2rem;
+        margin: 0;
+    }
+    div .home-blog .hero .description {
+        font-size: 2rem;
+    }
+    .sum {
+        margin: 20px 0 30px;
+    }
+    aside.sidebar {
+        top: 4rem;
+        padding: 0;
+    }
+    div .sidebar .personal-info-wrapper {
+        display: none;
+    }
+    div .sidebar .search-box{
+        display: block;
+        margin: 25px 15px 5px;
+    }
+    div .nav-links .nav-item {      
+        margin-left: 0rem;
+    }
+    .nav-links .nav-item:nth-last-child(2) {
+        margin-left: 0rem;
+    }
+    div .sidebar .nav-links .nav-item{
+        padding: 0px;
+    }
+    .newsBox ul {
+        flex-direction: column;
+    }
+    .newsBox li {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+    .newsdownData {
+        padding: 50px 30px;
+        background-position: right center;
+        background-size: 100%;
+    }
+    .newsleft {
+        width: 100%;
+    }
+    .newsdownData .t {
+        font-size: 18px;
+    }
+    .newsleft .s {
+        font-size: 14px;
+        margin: 20px 0;
+    }
+    .newsleft .fataImg {
+        transform: translateY(0px);
+        height: 150px;
+    }
+    .newsleft .fataImg .dim {
+        background-size: 100%;
+        width: 100%;
+    }
+    .newsleft a {
+        padding: 17px 24px 12px;
+    }
+    .appleft, .appright {
+        flex-direction: column;
+    }
+    .apptitle {
+        width: 100%;
+    }
+    .appimg {
+        width: 100%;
+        margin: 40px 0 50px;
+    }
+    .dorissolid1,
+    .dorissolid2{
+        display:none;    
+    }
+    .appright .apptitle {
+        order: -2;
+        width: 100%;
+    }
+    .appright .appimg {
+        width: 100%;
+        margin: 40px 0 60px;
+        max-width: 100%;
+    }
+    .icoBoxtitle p {
+        font-size: 26px;
+    }
+    .icotitle .s {
+        display: none;
+    }
+    .icotitle .t {
+        font-size: 15px;
+        margin-bottom: 0;
+    }
+    .icoBoxico ul:before,
+    .icoBoxico ul:after{
+        display: none;
+    }
+    .icoBoxico ul li .icoimg img {
+        max-width: 75px;
+    }
+    .icotitle {
+        margin-top: 10px;
+    }
+    .corebox {
+        flex-direction: column;
+    }
+    .coreleft {
+        width: 100%;
+        padding-top: 0;
+    }
+    .core {
+        padding: 55px 15px;
+    }
+    .coreright {
+        width: 100%;
+    }
+    .coreright ul li:nth-child(2n+0) {
+        margin-left: 0%;
+    }
+    .EventsBlog ul {
+        flex-direction: column;
+    }
+    .EventsBlog ul li {
+        width: 100%;
+        margin-bottom: 40px;
+    }
+    .footerCenter {
+        padding: 70px 15px 0;
+        box-sizing: border-box;
+    }
+    .footerleft .f {
+        margin-right: 0;
+        margin-bottom: 50px;
+    }
+    .footerleft {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+    #app div.categories-wrapper ul.category-wrapper{
+        margin: 30px 0;
+        display: none;
+    }
+    #app div.categories-wrapper ul.category-wrapper li{
+        width: 100%;
+        margin: 0 0 5px 0;
+    }
+    #app .abstract-wrapper{
+        margin-left: 0;
+        padding: 0px 0px 40px;
+    }
+    div.abstract-item .title a{
+        font-size: 15px;
+    }
+    main.page {
+        padding-top: 0px;
+    }
+    .page-title .title{
+        font-size: 20px;
+    }
+    main.page .page-title div {
+        color: #999;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+    }
+    main.page .theme-reco-content {
+        padding: 1rem 15px;
+        box-sizing: border-box;
+    }
+    main.page .page-title {
+        padding: 1rem 15px;
+    }
+    main.page .page-title .title{
+        font-size: 22px;
+    }
+    .page footer.page-edit {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        padding-top: 20px;
+        margin-top: 20px;
+        padding: 1rem 0px;
+        margin: 0 15px;
+    }
+    .content__default div[class*="language-"] {
+        margin: 0.85rem 0rem !important;
+    }
+    div.page-nav {
+        padding: 1rem 15px 0;
+    }
+    #app .timeline-wrapper {
+        padding: 4rem 0 0;
+    }
+    #app .timeline-wrapper .timeline-content .desc, 
+    #app .timeline-wrapper .timeline-content .year {
+        font-size: 24px;
+    }
+    .newsleft .al {
+        margin-top: 200px;
+    }
+    .bannerHref a i {
+        left: 40px;
+    }
+    .sidebar-open .sidebar-button .icon.guanbi{
+        display:block;
+    }
+    .abstract-wrapper.bokeliebiao {
+        margin-left: 0;
+        padding: 0px !important;
+    }
+    .abstract-wrapper.bokeliebiao > div {
+        padding: 15px;
+    }
+    #app .abstract-item .title {
+        line-height: 1;
+        padding-bottom: 20px;
+    }
+    .youde .no-sidebar main.page{
+        padding: 0px !important;
+        margin-left: 0rem;
+        margin-top: 93px;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item{
+        display: block;    
+        padding: 10px 15px;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item .dropdown-wrapper > a,
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item > a {
+        line-height: 1 !important;
+        padding: 0px !important;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links {
+        padding: 0.5rem 0 0.75rem 0;
+    }
+    .youde #app .sidebar.blogliebiao .nav-links .nav-item:nth-last-child(2) > a{
+        padding: 15px 15px !important;
+    }
+    .categories-wrapper[data-v-0838f247] {
+        padding: 5.6rem 1rem 0 !important;
+    }
+    .sidebar.showme{
+        position: static;
+        padding: 0;
+        width: 100%;
+        border: 0;
+        padding: 0;
+    }
+    div.sidebar ul.sidebar-links {
+        display: flex;
+    }
+    div.sidebar ul.sidebar-links > li {
+        background: #f5f5f5;
+        margin: 0 15px 0 0 !important;
+        padding: 5px 15px;
+        border-radius: 5px;
+    }
+    div.sidebar ul.sidebar-links > li.active {
+        background: #3eaf7c;
+    }
+    div.sidebar ul.sidebar-links > li a {
+        color: #646464;
+        font-size: 13px;
+    }
+    div.sidebar ul.sidebar-links > li.active a {
+        color: #fff;
+    }
+    div.sidebar ul.sidebar-links > li a .post-num{
+        color: #fff;
+        font-size: 12px;
+        border-radius: 2px;
+        padding: 3px 4px;
+        line-height: 1;
+    }
+    .youde .no-sidebar main.page {
+        padding: 0px 0rem 0 0rem !important;
+        margin-left: 0rem !important;
+    }
+    #app div.tagpage {
+        padding: 0px;
+        margin-left: 0rem;
+    }
+    #app .tag-wrapper div.tagpage > div.tags span {
+        margin: 0 5px 5px 0;
+    }
+    .nav-links .nav-item .downloads{
+        background: none;
+        color: #333 !important;
+        text-align: left;
+        padding: 0;
+        border: 0;
+    }
+    .nav-links .nav-item:nth-last-child(2) {
+        margin-left: 0rem !important;
+    }
+    .nav-links .nav-item{
+        width: 100%;
+        display: block;
+        border-bottom: 1px solid #f5f5f5;
+    }
+    .nav-links .nav-item .dropdown-wrapper > a,
+    .nav-links .nav-item > a,
+    .nav-links .nav-item .downloads{
+        padding: 14px 15px;
+        margin: 0;
+    }
+    div .sidebar .nav-links .nav-item:last-child{
+        display :none;
+    }
+    .nav-links .nav-item .downloads:hover {
+        background: none;
+        border-bottom: 0px solid #01583d !important;
+        box-shadow: none;
+    }
+    .nav-links .nav-item .dropdown-wrapper > a > span.title,
+    .nav-links .nav-item > a span.title,
+    .nav-links .nav-item .downloads span.title{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        font-size: 16px;
+        font-weight: 500;
+    }
+    .nav-links .nav-item .dropdown-wrapper > a > span.title i,
+    .nav-links .nav-item > a span.title i,
+    .nav-links .nav-item .downloads span.title i{
+        order: 2;
+    }
+    .sidebar .nav-links .nav-item > a{
+        font-size: 16px;
+        font-weight: 500;
+    }
+    .sidebar .nav-links{
+        border-bottom: 0 !important;    
+    }
+    div .sidebar .nav-links .nav-item .nav-dropdown{
+        padding-bottom: 20px;
+    }
+    div .sidebar .nav-links .nav-item .nav-dropdown a{
+        font-size: 13px;
+        line-height: 1.7;
+        color: #999 !important;
+    }
+    // .home .home-blog{
+    //     padding: 4rem 0 0 0;  
+    // }
+    #app .timeline-wrapper .timeline-content{
+        padding-top: 1px;
+    }
+    .search-box{
+        display: none !important;    
+    }
+    #app .theme-container {
+        padding: 4rem 0 0;
+    }
+    #app .footer-wapper {
+        margin-left: 0;
+    }
+   
+}
+@keyframes dorisLA1{
+    0%{right: 16%;top: 0%;}
+    20%{right: 16%;top: 45%;}  
+    80%{right: 82.8%;top: 45%;}  
+    100%{right: 82.8%;top: 100%;}
+}
+@keyframes dorisLA2{
+    0%{right: 0%;top: 0%;}
+    20%{right: 0%;top: 43%;}  
+    80%{right: 97.5%;top: 43%;}  
+    100%{right: 97.5%;top: 100%;}
+}
+@keyframes dorisLB1{
+    0%{left: 16.3%;top: 0%;}
+    20%{left: 16.3%;top: 37%;}  
+    80%{left: 82.3%;top: 37%;}  
+    100%{left: 82.3%;top: 100%;}
+}
+@keyframes dorisLB2{
+    0%{left: 0.8%;top: 0%;}
+    20%{left: 0.8%;top: 35%;}  
+    80%{left: 96.8%;top: 35%;}  
+    100%{left: 96.8%;top: 100%;}
+}
+@keyframes dian1-1{
+    0%{left: 41.2%;top: 45.2%;}
+    70%{left: 32.2%;top: 38.2%;}
+    100%{left: 30.2%;top: 40.2%;}
+}
+@keyframes dian2-1{
+    0%{left: 79.6%;top: 43.2%;}
+    100%{left: 74.6%;top: 47.2%;}
+}
+@keyframes dian3-1{
+    0%{left: 81.2%;top: 56.2%;}
+    100%{left: 76.2%;top: 53.2%;}
+}
+@keyframes dian4-1{
+    0%{left: 68.2%;top: 66.2%;}
+    100%{left: 64.2%;top: 62.2%;}
+}
+@keyframes dian5-1{
+    0%{left: 43.2%;top: 61.2%;}
+    100%{left: 36.2%;top: 66.2%;}
+}
+
+
+@-webkit-keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0,100px,0);
+        transform: translate3d(0,100px,0)
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none
+    }
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0,100px,0);
+        transform: translate3d(0,100px,0)
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none
+    }
+}
+
+.fadeInUp {
+    -webkit-animation-name: fadeInUp;
+    animation-name: fadeInUp
+}
+
+.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
+    opacity: 1 !important;
+}
\ No newline at end of file
diff --git a/docs/en/admin-manual/http-actions/fe/logout-action.md b/docs/.vuepress/styles/palette.styl
similarity index 67%
copy from docs/en/admin-manual/http-actions/fe/logout-action.md
copy to docs/.vuepress/styles/palette.styl
index e1d155f0b6..c869a74391 100644
--- a/docs/en/admin-manual/http-actions/fe/logout-action.md
+++ b/docs/.vuepress/styles/palette.styl
@@ -1,59 +1,25 @@
----
-{
-    "title": "Logout Action",
-    "language": "en"
-}
----
-
-<!-- 
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-# Logout Action
-
-
-## Request
-
-```
-POST /rest/v1/logout
-```
-
-## Description
-
-Logout Action is used to log out of the current login.
-    
-## Path parameters
-
-None
-
-## Query parameters
-
-None
-
-## Request body
-
-None
-
-### Response
-
-```
-{
-	"msg": "OK",
-	"code": 0
-}
-```
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+// 默认值
+$accentColor = #3eaf7c                      // 主题颜色
+$textColor = #2c3e50                        // 文本颜色
+$borderColor = #eaecef                      // 边框线颜色
+$codeBgColor = #282c34                      // 代码块背景色
+$backgroundColor = #ffffff                  // 悬浮块背景色
\ No newline at end of file
diff --git a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
new file mode 100644
index 0000000000..bad9f95aa7
--- /dev/null
+++ b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
@@ -0,0 +1,194 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <form
+    id="search-form"
+    class="algolia-search-wrapper search-box"
+    role="search"
+  >
+    <reco-icon icon="reco-search" />
+    <input
+      id="algolia-search-input"
+      class="search-query"
+      :placeholder="placeholder"
+    >
+  </form>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { RecoIcon },
+
+  props: ['options'],
+
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const placeholder = ref(undefined)
+
+    const initialize = (userOptions, lang) => {
+      Promise.all([
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
+      ]).then(([docsearch]) => {
+        docsearch = docsearch.default
+        const { algoliaOptions = {} } = userOptions
+        docsearch(Object.assign(
+          {},
+          userOptions,
+          {
+            inputSelector: '#algolia-search-input',
+            // #697 Make docsearch work well at i18n mode.
+            algoliaOptions: Object.assign({
+              'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
+            }, algoliaOptions),
+            handleSelected: (input, event, suggestion) => {
+              const { pathname, hash } = new URL(suggestion.url)
+              this.$router.push(`${pathname}${hash}`)
+            }
+          }
+        ))
+      })
+    }
+
+    const update = (options, lang) => {
+      instance.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
+      instance.initialize(options, lang)
+    }
+
+    onMounted(() => {
+      initialize(props.options, instance.$lang)
+      placeholder.value = instance.$site.themeConfig.searchPlaceholder || ''
+    })
+
+    return { placeholder, initialize, update }
+  },
+
+  watch: {
+    $lang (newValue) {
+      this.update(this.options, newValue)
+    },
+
+    options (newValue) {
+      this.update(newValue, this.$lang)
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.algolia-search-wrapper
+  & > span
+    vertical-align middle
+  .algolia-autocomplete
+    line-height normal
+    .ds-dropdown-menu
+      background-color var(--background-color)
+      border-radius $borderRadius
+      font-size 15px
+      margin 6px 0 0
+      padding 4px
+      text-align left
+      box-shadow var(--box-shadow)
+      &:before
+        display none
+      [class*=ds-dataset-]
+        background-color var(--background-color)
+        border none
+        padding 0
+      .ds-suggestions
+        margin-top 0
+      .ds-suggestion
+        border-bottom 1px solid var(--border-color)
+    .algolia-docsearch-suggestion--highlight
+      color $accentColor
+    .algolia-docsearch-suggestion
+      border-color var(--border-color)
+      padding 0
+      .algolia-docsearch-suggestion--category-header
+        padding 5px 10px
+        margin-top 0
+        background $accentColor
+        color #fff
+        font-weight 600
+        .algolia-docsearch-suggestion--highlight
+          background rgba(255, 255, 255, 0.6)
+      .algolia-docsearch-suggestion--wrapper
+        background var(--background-color)
+        padding 0
+      .algolia-docsearch-suggestion--title
+        font-weight 600
+        margin-bottom 0
+        color var(--text-color)
+      .algolia-docsearch-suggestion--subcategory-column
+        vertical-align top
+        padding 5px 7px 5px 5px
+        border-color var(--border-color)
+        background var(--background-color)
+        &:after
+          display none
+      .algolia-docsearch-suggestion--subcategory-column-text
+        color var(--text-color)
+    .algolia-docsearch-footer
+      border-color var(--border-color)
+      background var(--background-color)
+    .ds-cursor .algolia-docsearch-suggestion--content
+      background-color #e7edf3 !important
+      color $textColor
+
+@media (min-width: $MQMobile)
+  .algolia-search-wrapper
+    .algolia-autocomplete
+      .algolia-docsearch-suggestion
+        .algolia-docsearch-suggestion--subcategory-column
+          float none
+          width 150px
+          min-width 150px
+          display table-cell
+        .algolia-docsearch-suggestion--content
+          float none
+          display table-cell
+          width 100%
+          vertical-align top
+        .ds-dropdown-menu
+          min-width 515px !important
+
+@media (max-width: $MQMobile)
+  .algolia-search-wrapper
+    .ds-dropdown-menu
+      min-width calc(100vw - 4rem) !important
+      max-width calc(100vw - 4rem) !important
+    .algolia-docsearch-suggestion--wrapper
+      padding 5px 7px 5px 5px !important
+    .algolia-docsearch-suggestion--subcategory-column
+      padding 0 !important
+      background var(--border-color) !important
+    .algolia-docsearch-suggestion--subcategory-column-text:after
+      content " > "
+      font-size 10px
+      line-height 14.4px
+      display inline-block
+      width 5px
+      margin -3px 3px 0
+      vertical-align middle
+
+</style>
diff --git a/docs/.vuepress/theme/components/Common.vue b/docs/.vuepress/theme/components/Common.vue
new file mode 100644
index 0000000000..12f11c316d
--- /dev/null
+++ b/docs/.vuepress/theme/components/Common.vue
@@ -0,0 +1,240 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="theme-container" :class="pageClasses">
+    <div v-if="!absoluteEncryption">
+      <transition name="fade">
+        <LoadingPage v-show="firstLoad" class="loading-wrapper" />
+      </transition>
+
+      <transition name="fade">
+        <Password v-show="!firstLoad && !isHasKey" class="password-wrapper-out" key="out" />
+      </transition>
+
+      <div :class="{ 'hide': firstLoad || !isHasKey }">
+        <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
+
+        <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
+
+        <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+          <PersonalInfo slot="top" />
+          <slot name="sidebar-bottom" slot="bottom"></slot>
+        </Sidebar>
+
+        <Password v-show="!isHasPageKey" :isPage="true" class="password-wrapper-in" key="in"></Password>
+        <div :class="{ 'hide': !isHasPageKey }">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <transition name="fade">
+        <LoadingPage v-if="firstLoad" />
+        <Password v-else-if="!isHasKey" />
+        <div v-else>
+          <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
+
+          <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
+
+          <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+            <PersonalInfo slot="top" />
+            <slot name="sidebar-bottom" slot="bottom"/>
+          </Sidebar>
+
+          <Password v-if="!isHasPageKey" :isPage="true"></Password>
+          <slot v-else></slot>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, ref, onMounted, toRefs } from 'vue-demi'
+import Navbar from '@theme/components/Navbar'
+import Sidebar from '@theme/components/Sidebar'
+import PersonalInfo from '@theme/components/PersonalInfo'
+import Password from '@theme/components/Password'
+import { setTimeout } from 'timers'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { Sidebar, Navbar, Password, PersonalInfo },
+
+  props: {
+    sidebar: {
+      type: Boolean,
+      default: true
+    },
+    sidebarItems: {
+      type: Array,
+      default: () => []
+    },
+    showModule: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const isSidebarOpen = ref(false)
+    const isHasKey = ref(true)
+    const isHasPageKey = ref(true)
+    const firstLoad = ref(true)
+
+    const shouldShowSidebar = computed(() => props.sidebarItems.length > 0)
+    const absoluteEncryption = computed(() => {
+      return instance.$themeConfig.keyPage && instance.$themeConfig.keyPage.absoluteEncryption === true
+    })
+    const shouldShowNavbar = computed(() => {
+      const { themeConfig } = instance.$site
+      const { frontmatter } = instance.$page
+
+      if (
+        frontmatter.navbar === false ||
+        themeConfig.navbar === false
+      ) return false
+
+      return (
+        instance.$title ||
+        themeConfig.logo ||
+        themeConfig.repo ||
+        themeConfig.nav ||
+        instance.$themeLocaleConfig.nav
+      )
+    })
+
+    const pageClasses = computed(() => {
+      const classValue = {
+        'no-navbar': !shouldShowNavbar.value,
+        'sidebar-open': isSidebarOpen.value,
+        'no-sidebar': !shouldShowSidebar.value
+      }
+
+      const { pageClass: userPageClass } = instance.$frontmatter || {}
+      if (userPageClass) classValue[userPageClass] = true
+
+      return classValue
+    })
+
+    const hasKey = () => {
+      const { keyPage } = instance.$themeConfig
+      if (!keyPage || !keyPage.keys || keyPage.keys.length === 0) {
+        isHasKey.value = true
+        return
+      }
+
+      let { keys } = keyPage
+      keys = keys.map(item => item.toLowerCase())
+      isHasKey.value = keys && keys.indexOf(sessionStorage.getItem('key')) > -1
+    }
+    const initRouterHandler = () => {
+      instance.$router.afterEach(() => {
+        isSidebarOpen.value = false
+      })
+    }
+    const hasPageKey = () => {
+      let pageKeys = instance.$frontmatter.keys
+      if (!pageKeys || pageKeys.length === 0) {
+        isHasPageKey.value = true
+        return
+      }
+
+      pageKeys = pageKeys.map(item => item.toLowerCase())
+
+      isHasPageKey.value = pageKeys.indexOf(sessionStorage.getItem(`pageKey${window.location.pathname}`)) > -1
+    }
+    const toggleSidebar = (to) => {
+      isSidebarOpen.value = typeof to === 'boolean' ? to : !isSidebarOpen.value
+    }
+    const handleLoading = () => {
+      const time = instance.$frontmatter.home && sessionStorage.getItem('firstLoad') == undefined ? 1000 : 0
+      setTimeout(() => {
+        firstLoad.value = false
+        if (sessionStorage.getItem('firstLoad') == undefined) sessionStorage.setItem('firstLoad', false)
+      }, time)
+    }
+
+    // 首次渲染时,recoShowModule 直接为 true,否则锚点失效
+    const { showModule } = toRefs(props)
+    const recoShowModule = computed(() => {
+      if (firstLoad.value) {
+        return true
+      } else {
+        return showModule.value
+      }
+    })
+
+    onMounted(() => {
+      initRouterHandler()
+      hasKey()
+      hasPageKey()
+      handleLoading()
+    })
+
+    return { isSidebarOpen, absoluteEncryption, shouldShowNavbar, shouldShowSidebar, pageClasses, hasKey, hasPageKey, isHasKey, isHasPageKey, toggleSidebar, firstLoad, recoShowModule }
+  },
+
+  watch: {
+    $frontmatter (newVal, oldVal) {
+      this.hasKey()
+      this.hasPageKey()
+    }
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.theme-container
+  .loading-wrapper
+    position absolute
+    z-index 22
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+  .password-wrapper-out
+    position absolute
+    z-index 21
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+  .password-wrapper-in
+    position absolute
+    z-index 8
+    top 0
+    bottom 0
+    left 0
+    right 0
+  .hide
+    height 100vh
+    overflow hidden
+    opacity 0
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s ease-in-out .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>
diff --git a/docs/.vuepress/theme/components/Dropdown.vue b/docs/.vuepress/theme/components/Dropdown.vue
new file mode 100644
index 0000000000..9410ca417e
--- /dev/null
+++ b/docs/.vuepress/theme/components/Dropdown.vue
@@ -0,0 +1,268 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="dropdown-wrapper" :class="{ open }">
+    <a class="dropdown-title" @click="toggle" v-if="versions">
+      <span class="title">
+        {{ currentItem.text }}
+        <reco-icon :icon="`${versions.icon}`" />
+      </span>
+    </a>
+
+    <DropdownTransition>
+      <ul class="nav-dropdown" v-show="open">
+        <li
+          class="dropdown-item"
+          :key="subItem.link || index"
+          v-for="(subItem, index) in subItems"
+        >
+          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+
+          <ul
+            class="dropdown-subitem-wrapper"
+            v-if="subItem.type === 'links'"
+          >
+            <li
+              class="dropdown-subitem"
+              :key="childSubItem.link"
+              v-for="childSubItem in subItem.items"
+            ><NavLink :item="childSubItem"/></li>
+          </ul>
+          <a class="nav-link" :class="{'router-link-active': subItem.active}" @click="handleClick(subItem)" v-else>{{subItem.text}}</a>
+        </li>
+      </ul>
+    </DropdownTransition>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, reactive, ref, watch } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import NavLink from '@theme/components/NavLink'
+import DropdownTransition from '@theme/components/DropdownTransition'
+import { useInstance } from '@theme/helpers/composable'
+import axios from "axios"
+
+
+export default defineComponent({
+  components: { NavLink, DropdownTransition, RecoIcon },
+
+  data () {
+    return {
+      subItems: [],
+      currentItem: {}
+    }
+  },
+  computed: {
+    versions() {
+      return this.$themeLocaleConfig.versions;
+    },
+  },
+  watch: {
+    versions: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.init(val)
+      },
+    },
+    currentItem: {
+      immediate: true,
+      handler (val) {
+        this.updateVersion(val)
+      }
+    }
+  },
+  methods: {
+    init(val) {
+      if (!val) return
+      this.subItems = val.items.map((item) => ({ ...item, active: false }));
+      let currentVersion = "master";
+      if (!this.currentItem.text) {
+        const versionKeys = this.$themeLocaleConfig.versions.items.map(
+          (v) => v.text
+        );
+        const matchVersion = versionKeys.find(
+          (v) => this.$route.path.indexOf(v) > -1
+        );
+        currentVersion = matchVersion || versionKeys[0];
+      } else {
+        currentVersion = this.currentItem.text;
+      }
+      const index = this.subItems.findIndex(
+        (item) => item.text === currentVersion
+      );
+      if (index > -1) {
+        this.currentItem = this.subItems[index];
+        this.currentItem && (this.subItems[index].active = true);
+      }
+    },
+    handleClick (item) {
+      this.subItems.forEach(v => { v.active = item.text === v.text })
+      this.currentItem = item
+      this.$router.push(item.link)
+    },
+    async fetchData () {
+      const res = await axios.get('/versions.json')
+      if (!res || !res.data) return
+      const locales = this.$site.themeConfig.locales
+      Object.keys(locales).forEach(k => {
+        const versionItems = res.data[k.replace(/\//gi, "")] || []
+        this.$site.themeConfig.locales[k].versions.items = versionItems
+      })
+      this.init(this.$themeLocaleConfig.versions)
+    },
+    updateVersion(val) {
+      const versionsValue = this.versions;
+      if (!versionsValue) return;
+      const version = versionsValue.items.find(
+        (item) => item.text === val.text
+      );
+      const documentNav = this.$themeLocaleConfig.nav.find(
+        (item) => item.name === "document"
+      );
+      if (version && version.link) {
+        documentNav.link = version.link;
+      }
+    },
+  },
+  mounted() {
+    this.fetchData();
+  },
+
+  setup (props, ctx) {
+    const instance = useInstance()
+    const open = ref(false)
+    
+    const toggle = () => {
+      open.value = !open.value
+    }
+
+    return { open, toggle }
+  }
+})
+</script>
+
+<style lang="stylus">
+.dropdown-wrapper
+  cursor pointer
+  height 100%
+  .dropdown-title
+    display block
+    height 100%
+    color #333
+    display flex
+    align-items center
+    font-size 16px
+    font-weight bold
+    &:hover
+      border-color transparent
+    .arrow
+      vertical-align middle
+      margin-top -1px
+      margin-left 0.4rem
+  .doris-xiala
+    font-size 12px
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid var(--border-color)
+        padding 0.45rem 1.5rem 0 1.25rem
+      .dropdown-subitem-wrapper
+        padding 0
+        list-style none
+        .dropdown-subitem
+          font-size 0.9em
+      a
+        display block
+        line-height 1.7rem
+        position relative
+        border-bottom none
+        font-weight 400
+        margin-bottom 0
+        padding 0 1.5rem 0 1.25rem
+        &:hover
+          color $accentColor
+        &.router-link-active
+          color $accentColor
+          &::after
+            content ""
+            width 0
+            height 0
+            border-left 5px solid $accentColor
+            border-top 3px solid transparent
+            border-bottom 3px solid transparent
+            position absolute
+            top calc(50% - 2px)
+            left 9px
+      &:first-child h4
+        margin-top 0
+        padding-top 0
+        border-top 0
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    &.open .dropdown-title
+      margin-bottom 0.5rem
+    .nav-dropdown
+      transition height .1s ease-out
+      overflow hidden
+      .dropdown-item
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        h4, & > a
+          font-size 15px
+          line-height 2rem
+        .dropdown-subitem
+          font-size 14px
+          padding-left 1rem
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    &:hover .nav-dropdown
+      // override the inline style.
+      display block !important
+    .dropdown-title .arrow
+      // make the arrow always down at desktop
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 6px solid var(--text-color-sub)
+      border-bottom 0
+    .nav-dropdown
+      display none
+      // Avoid height shaked by clicking
+      height auto !important
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color var(--background-color)
+      padding 0.6rem 0
+      box-shadow: var(--box-shadow);
+      text-align left
+      border-radius $borderRadius
+      white-space nowrap
+      margin 0
+</style>
diff --git a/docs/.vuepress/theme/components/DropdownLink.vue b/docs/.vuepress/theme/components/DropdownLink.vue
new file mode 100644
index 0000000000..5d6eaf9bac
--- /dev/null
+++ b/docs/.vuepress/theme/components/DropdownLink.vue
@@ -0,0 +1,181 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="dropdown-wrapper" :class="{ open }">
+    <a class="dropdown-title" @click="toggle">
+      <span class="title">
+        <reco-icon :icon="`${item.icon}`" />
+        {{ item.text }}
+      </span>
+      <span class="arrow" :class="open ? 'down' : 'right'"></span>
+    </a>
+
+    <DropdownTransition>
+      <ul class="nav-dropdown" v-show="open">
+        <li
+          class="dropdown-item"
+          :key="subItem.link || index"
+          v-for="(subItem, index) in item.items"
+        >
+          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+
+          <ul
+            class="dropdown-subitem-wrapper"
+            v-if="subItem.type === 'links'"
+          >
+            <li
+              class="dropdown-subitem"
+              :key="childSubItem.link"
+              v-for="childSubItem in subItem.items"
+            ><NavLink :item="childSubItem"/></li>
+          </ul>
+
+          <NavLink v-else :item="subItem" />
+        </li>
+      </ul>
+    </DropdownTransition>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import NavLink from '@theme/components/NavLink'
+import DropdownTransition from '@theme/components/DropdownTransition'
+
+export default defineComponent({
+  components: { NavLink, DropdownTransition, RecoIcon },
+
+  props: {
+    item: {
+      required: true
+    }
+  },
+
+  setup (props, ctx) {
+    const open = ref(false)
+
+    const toggle = () => {
+      open.value = !open.value
+    }
+
+    return { open, toggle }
+  }
+})
+</script>
+
+<style lang="stylus">
+.dropdown-wrapper
+  cursor pointer
+  .dropdown-title
+    display block
+    &:hover
+      border-color transparent
+    .arrow
+      vertical-align middle
+      margin-top -1px
+      margin-left 0.4rem
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid var(--border-color)
+        padding 0.45rem 1.5rem 0 1.25rem
+      .dropdown-subitem-wrapper
+        padding 0
+        list-style none
+        .dropdown-subitem
+          font-size 0.9em
+      a
+        display block
+        line-height 1.7rem
+        position relative
+        border-bottom none
+        font-weight 400
+        margin-bottom 0
+        padding 0 1.5rem 0 1.25rem
+        &:hover
+          color $accentColor
+        &.router-link-active
+          color $accentColor
+          &::after
+            content ""
+            width 0
+            height 0
+            border-left 5px solid $accentColor
+            border-top 3px solid transparent
+            border-bottom 3px solid transparent
+            position absolute
+            top calc(50% - 2px)
+            left 9px
+      &:first-child h4
+        margin-top 0
+        padding-top 0
+        border-top 0
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    &.open .dropdown-title
+      margin-bottom 0.5rem
+    .nav-dropdown
+      transition height .1s ease-out
+      overflow hidden
+      .dropdown-item
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        h4, & > a
+          font-size 15px
+          line-height 2rem
+        .dropdown-subitem
+          font-size 14px
+          padding-left 1rem
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    height 1.8rem
+    &:hover .nav-dropdown
+      // override the inline style.
+      display block !important
+    .dropdown-title .arrow
+      // make the arrow always down at desktop
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 6px solid var(--text-color-sub)
+      border-bottom 0
+    .nav-dropdown
+      display none
+      // Avoid height shaked by clicking
+      height auto !important
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color var(--background-color)
+      padding 0.6rem 0
+      box-shadow: var(--box-shadow);
+      text-align left
+      border-radius $borderRadius
+      white-space nowrap
+      margin 0
+</style>
diff --git a/docs/en/sql-manual/sql-reference/Show-Statements/SHOW-DELETE.md b/docs/.vuepress/theme/components/DropdownTransition.vue
similarity index 52%
copy from docs/en/sql-manual/sql-reference/Show-Statements/SHOW-DELETE.md
copy to docs/.vuepress/theme/components/DropdownTransition.vue
index 334d5104b7..f1db9a48f7 100644
--- a/docs/en/sql-manual/sql-reference/Show-Statements/SHOW-DELETE.md
+++ b/docs/.vuepress/theme/components/DropdownTransition.vue
@@ -1,12 +1,4 @@
----
-{
-    "title": "SHOW-DELETE",
-    "language": "en"
-}
----
-
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
+<!-- Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
@@ -23,34 +15,38 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
-## SHOW-DELETE
-
-### Name
-
-SHOW DELETE
-
-### Description
-
-This statement is used to display the historical delete tasks that have been successfully executed
-
-grammar:
-
-```sql
-SHOW DELETE [FROM db_name]
-````
-
-### Example
-
-  1. Display all historical delete tasks of database database
-
-      ```sql
-      SHOW DELETE FROM database;
-      ````
-
-### Keywords
-
-    SHOW, DELETE
-
-### Best Practice
-
+<template>
+  <transition
+    name="dropdown"
+    @enter="setHeight"
+    @after-enter="unsetHeight"
+    @before-leave="setHeight"
+  >
+    <slot/>
+  </transition>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+export default defineComponent({
+  name: 'DropdownTransition',
+
+  setup (props, ctx) {
+    const setHeight = (items) => {
+      items.style.height = items.scrollHeight + 'px'
+    }
+
+    const unsetHeight = (items) => {
+      items.style.height = ''
+    }
+
+    return { setHeight, unsetHeight }
+  }
+})
+</script>
+
+<style lang="stylus">
+.dropdown-enter, .dropdown-leave-to
+  height 0 !important
+
+</style>
diff --git a/docs/.vuepress/theme/components/Footer.vue b/docs/.vuepress/theme/components/Footer.vue
index 54d1f14109..dda8821abc 100644
--- a/docs/.vuepress/theme/components/Footer.vue
+++ b/docs/.vuepress/theme/components/Footer.vue
@@ -1,5 +1,4 @@
-<!-- 
-Licensed to the Apache Software Foundation (ASF) under one
+<!-- Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
@@ -16,75 +15,98 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
 <template>
   <div class="footer-wrapper">
-    <p class="apache-info">
-      <a href="https://www.apache.org/">Foundation</a> |
-      <a href="https://www.apache.org/licenses/">License</a> | 
-      <a href="https://www.apache.org/events/current-event">Events</a> | 
-      <a href="https://www.apache.org/security/">Security</a> | 
-       <a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a> |
-      <a href="https://www.apache.org/foundation/policies/privacy.html">Privacy</a> |
-      <a href="https://www.apache.org/foundation/thanks.html">Thanks</a>
-    </p>
-    <p>
-      <br />
-      <span class="footer-text">
-        Copyright © {{ thisYear }} The Apache Software Foundation. Licensed under the Apache License, Version 2.0.
-        Apache Doris(Incubating), Apache Incubator, Apache, the Apache feather logo, the Apache Doris(Incubating) logo
-        and the Apache Incubator project logo are trademarks of The Apache Software Foundation.
-      </span>
-      <br />
-      <span class="footer-text">
-        Apache Doris(incubating) is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored
-        by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates
-        that the infrastructure, communications, and decision making process have stabilized in a manner consistent with
-        other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or
-        stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.
-      </span>
+    <span>
+      <reco-icon icon="reco-theme" />
+      <a target="blank" href="https://vuepress-theme-reco.recoluan.com">{{`vuepress-theme-reco@${version}`}}</a>
+    </span>
+    <span v-if="$themeConfig.record">
+      <reco-icon icon="reco-beian" />
+      <a :href="$themeConfig.recordLink || '#'">{{ $themeConfig.record }}</a>
+    </span>
+    <span>
+      <reco-icon icon="reco-copyright" />
+      <a>
+        <span v-if="$themeConfig.author">{{ $themeConfig.author }}</span>
+        &nbsp;&nbsp;
+        <span v-if="$themeConfig.startYear && $themeConfig.startYear != (new Date().getFullYear())">{{ $themeConfig.startYear }} - </span>
+        {{ new Date().getFullYear() }}
+      </a>
+    </span>
+    <span v-show="showAccessNumber">
+      <reco-icon icon="reco-eye" />
+      <AccessNumber idVal="/" />
+    </span>
+    <p class="cyber-security" v-if="$themeConfig.cyberSecurityRecord">
+      <img src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" alt="">
+      <a :href="$themeConfig.cyberSecurityLink || '#'">{{ $themeConfig.cyberSecurityRecord }}</a>
     </p>
+    <Comments :isShowComments="false"/>
   </div>
 </template>
+
 <script>
-export default {
-  computed: {
-    thisYear: () => new Date().getFullYear()
+import { defineComponent, computed } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import { version } from '../package.json'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { RecoIcon },
+  setup (props, ctx) {
+    const instance = useInstance()
+    const showAccessNumber = computed(() => {
+      const {
+        $themeConfig: { valineConfig },
+        $themeLocaleConfig: { valineConfig: valineLocalConfig }
+      } = instance
+
+      const vc = valineLocalConfig || valineConfig
+
+      return vc && vc.visitor != false
+    })
+    return { version, showAccessNumber }
   }
-}
+})
 </script>
-<style lang="stylus">
-.footer-wrapper
-  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-  max-width $contentWidth
-  text-align center
-  margin 0 auto
-  color rgb(93, 93, 93)
-  font-weight: 240
-  a
-    color #3E8EFF
-  .apache-info
-    display flex
-    flex-direction row
-    justify-content space-between
-    align-items center
-    margin-bottom 1rem
-    width 100%
-    font-size .75em
-    border-collapse collapse
-    overflow-x auto
-  .footer-text
-    display inline-block
-    line-height 1.2em
 
-@media (min-width: $MQMobile)
-  .footer-wrapper 
-    padding 1rem 0rem
-    .footer-text
-      font-size .9rem
-@media (max-width: $MQMobile)
-  .footer-wrapper 
-    padding 1.5rem
-    .footer-text
-      font-size 12px
+<style lang="stylus" scoped>
+  .footer-wrapper {
+    padding: 1.5rem 2.5rem;
+    border-top: 1px solid var(--border-color);
+    text-align: center;
+    color: lighten($textColor, 25%);
+    a {
+      font-size 14px
+    }
+    > span {
+      margin-left 1rem
+      > i {
+        margin-right .5rem
+      }
+    }
+    .cyber-security {
+      img {
+        margin-right .5rem
+        width 20px
+        height 20px
+        vertical-align middle
+      }
+      a {
+        vertical-align middle
+      }
+    }
+  }
+
+@media (max-width: $MQMobile) {
+  .footer {
+    text-align: left!important;
+    > span {
+      display block
+      margin-left 0
+      line-height 2rem
+    }
+  }
+}
 </style>
diff --git a/docs/.vuepress/theme/components/FriendLink.vue b/docs/.vuepress/theme/components/FriendLink.vue
new file mode 100644
index 0000000000..88976d582e
--- /dev/null
+++ b/docs/.vuepress/theme/components/FriendLink.vue
@@ -0,0 +1,240 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="friend-link-wrapper">
+    <div
+      class="friend-link-item"
+      v-for="(item, index) in dataAddColor"
+      :key="index"
+      @mouseenter="showDetail($event)"
+      @mouseleave="hideDetail($event)"
+      target="_blank">
+      <span
+        class="list-style"
+        :style="{ 'backgroundColor': item.color }">
+      </span>
+      {{item.title}}
+      <transition name="fade">
+        <div class="popup-window-wrapper">
+          <div
+            class="popup-window"
+            :style="popupWindowStyle"
+            ref="popupWindow">
+            <div class="logo">
+              <img :src="getImgUrl(item)" />
+            </div>
+            <div class="info">
+              <div class="title">
+                <h4>{{ item.title }}</h4>
+                <a
+                  class="btn-go"
+                  :style="{ 'backgroundColor': item.color }"
+                  :href="item.link"
+                  target="_blank">GO</a>
+              </div>
+              <p v-if="item.desc">{{ item.desc }}</p>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, computed, ref, onMounted } from 'vue-demi'
+import md5 from 'md5'
+import { getOneColor } from '@theme/helpers/other'
+import { useInstance } from '@theme/helpers/composable'
+
+const useDetail = () => {
+  const instance = useInstance()
+  const isPC = ref(true)
+
+  const popupWindowStyle = reactive({
+    left: 0,
+    top: 0
+  })
+
+  const adjustPosition = (dom) => {
+    const { offsetWidth } = document.body
+    const { x, width } = dom.getBoundingClientRect()
+    const distanceToRight = offsetWidth - (x + width)
+
+    if (distanceToRight < 0) {
+      const { offsetLeft } = dom
+      popupWindowStyle.left = offsetLeft + distanceToRight + 'px'
+    }
+  }
+
+  const showDetail = (e) => {
+    const currentDom = e.target
+    const popupWindowWrapper = currentDom.querySelector('.popup-window-wrapper')
+    popupWindowWrapper.style.display = 'block'
+    const popupWindow = currentDom.querySelector('.popup-window')
+    const infoWrapper = document.querySelector('.info-wrapper')
+    const { clientWidth } = currentDom
+    const { clientWidth: windowWidth, clientHeight: windowHeight } = popupWindow
+
+    if (isPC) {
+      popupWindowStyle.left = (clientWidth - windowWidth) / 2 + 'px'
+      popupWindowStyle.top = -windowHeight + 'px'
+
+      infoWrapper.style.overflow = 'visible'
+
+      instance.$nextTick(() => {
+        adjustPosition(popupWindow)
+      })
+    } else {
+      const getPosition = function (element) {
+        const dc = document
+        const rec = element.getBoundingClientRect()
+        let _x = rec.left
+        let _y = rec.top
+        _x += dc.documentElement.scrollLeft || dc.body.scrollLeft
+        _y += dc.documentElement.scrollTop || dc.body.scrollTop
+        return { left: _x, top: _y }
+      }
+
+      infoWrapper.style.overflow = 'hidden'
+      const left = getPosition(currentDom).left - getPosition(infoWrapper).left
+
+      popupWindowStyle.left = (-left + (infoWrapper.clientWidth - popupWindow.clientWidth) / 2) + 'px'
+      popupWindowStyle.top = -windowHeight + 'px'
+    }
+  }
+
+  const hideDetail = (e) => {
+    const currentDom = e.target.querySelector('.popup-window-wrapper')
+    currentDom.style.display = 'none'
+  }
+
+  onMounted(() => {
+    isPC.value = !/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
+  })
+
+  return { popupWindowStyle, showDetail, hideDetail }
+}
+
+export default defineComponent({
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const { popupWindowStyle, showDetail, hideDetail } = useDetail()
+
+    const dataAddColor = computed(() => {
+      const { friendLink = [] } = instance && instance.$themeConfig
+      return friendLink.map(item => {
+        item.color = getOneColor()
+        return item
+      })
+    })
+
+    const getImgUrl = (info) => {
+      const { logo = '', email = '' } = info
+      if (logo && /^http/.test(logo)) return logo
+      if (logo && !/^http/.test(logo)) return instance.$withBase(logo)
+      return `//1.gravatar.com/avatar/${md5(email || '')}?s=50&amp;d=mm&amp;r=x`
+    }
+
+    return { dataAddColor, popupWindowStyle, showDetail, hideDetail, getImgUrl }
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.friend-link-wrapper
+  position relative
+  margin 30px 0
+  .friend-link-item
+    position relative
+    vertical-align: middle;
+    margin: 4px 4px 10px;
+    padding: 4px 8px 4px 20px;
+    line-height 20px
+    display: inline-block;
+    cursor: default;
+    border-radius: $borderRadius
+    font-size: 13px;
+    box-shadow var(--box-shadow)
+    transition: all .5s
+    .list-style
+      position absolute
+      left .4rem
+      top 0
+      bottom 0
+      margin auto
+      display block
+      width .4rem
+      height .4rem
+      border-radius .1rem
+      background $accentColor
+      content ''
+    .popup-window-wrapper
+      display none
+      .popup-window
+        position absolute
+        display flex
+        background var(--background-color)
+        box-shadow var(--box-shadow)
+        border-radius $borderRadius
+        box-sizing border-box
+        padding .8rem 1rem
+        width 280px
+        .logo
+          margin-right .4rem
+          width 2rem
+          height 2rem
+          flex 0 0 2rem
+          border-radius $borderRadius
+          overflow hidden
+          img
+            width 2rem
+            height 2rem
+        .info
+          flex 0 0 85%
+          width 85%
+          .title
+            display flex
+            align-items center
+            justify-content space-between
+            height 2rem
+            h4
+              margin .2rem 0
+              flex 0 0 86%
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            .btn-go
+              width 1.4rem
+              height 1.2rem
+              border-radius $borderRadius
+              font-size 12px
+              color #ffffff
+              text-align center
+              line-height 1.2rem
+              cursor pointer
+              transition all .5s
+              &:hover
+                transform scale(1.1)
+
+.fade-enter-active, .fade-leave-active
+  transition opacity .5s
+.fade-enter, .fade-leave-to
+  opacity 0
+</style>
diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue
index 54945dc81c..e6f3f52f41 100644
--- a/docs/.vuepress/theme/components/Home.vue
+++ b/docs/.vuepress/theme/components/Home.vue
@@ -1,5 +1,4 @@
-<!-- 
-Licensed to the Apache Software Foundation (ASF) under one
+<!-- Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
@@ -16,439 +15,194 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
 <template>
-  <main
-    class="home"
-    aria-labelledby="main-title"
-  >
-    <header class="hero">
-      <div id="scene-bg">
-        <img 
-          :src="$withBase(data.heroBgImage)"
-          data-hover-only="true"
-          data-depth="-0.2"
-          data-relative-input="true"
-        >
-      </div>
-      <div class="intro">
-        <div class="text">
-          <div
-            v-for="item in data.heroText"
-            :key="item"
-            class="title"
-          >
-            {{ item || $title }}
-          </div>
-          <div
-            v-if="data.tagline !== null"
-            class="description"
-          >
-            {{ data.tagline || $description }}
-          </div>
-          <p
-            v-if="data.actionText && data.actionLink"
-            class="action"
-          >
-            <NavLink
-              class="action-button"
-              :item="actionLink"
-            />
-            <span class="link-wrap">
-              <NavLink
-                class="action-button article-button"
-                :item="articleLink"
-              />
-              <img class="link-icon" :src="$withBase('/images/home/new.svg')" alt="last news">
-            </span>
-          </p>
-        </div>
-        <div
-          id="scene"
-          class="image"
-        >
-          <img
-            :src="$withBase(data.heroImage)"
-            data-hover-only="true"
-            data-depth="0.3"
-            data-relative-input="true"
-          >
-        </div>
-      </div>
-    </header>
-
-    <div class="structure wrapper">
-      <div v-html="$page.excerpt"></div>
-      <div class="image">
+  <div class="home">
+    <div class="hero">
+      <ModuleTransition>
         <img
-          v-if="data.structure.image"
-          :src="$withBase(data.structure.image)"
-          alt="structure"
+          v-if="recoShowModule && $frontmatter.heroImage"
+          :style="heroImageStyle || {}"
+          :src="$withBase($frontmatter.heroImage)"
+          alt="hero">
+      </ModuleTransition>
+      <ModuleTransition delay="0.04">
+        <h1
+          v-if="recoShowModule && $frontmatter.heroText !== null"
+          :style="{ marginTop: $frontmatter.heroImage ? '0px' : '140px'}"
         >
-      </div>
-      <div class="text">
-        <div class="title">
-          {{ data.structure.title }}
-        </div>
-        <div class="sub-title">
-          {{ data.structure.subTitle }}
-        </div>
-        <div 
-          v-for="item in data.structure.descriptions"
-          :key="item"
-          class="description"
-        >
-          {{ item }}
-        </div>
-        <NavLink
-          class="action-button"
-          :item="moreActionLink"
-        />
-      </div>
-    </div>
-    <div 
-      v-if="data.features"
-      class="features"
-    >
-      <div class="wrapper">
-        <div class="title">
-          {{ data.features.title }}
-        </div>
-        <div class="sub-title">
-          {{ data.features.subTitle }}
-        </div>
-        <div class="list">
-          <div
-            v-for="(feature, index) in data.features.list"
-            :key="index"
-            class="feature"
-          >
-            <div class="icon-card">
-              <img
-                v-if="feature.icon"
-                :src="$withBase(feature.icon)"
-                alt="feature"
-              >
-            </div>
-            <div class="label">
-              {{ feature.title }}
-            </div>
-          </div>
-        </div>
-      </div>
+          {{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
+        </h1>
+      </ModuleTransition>
+      <ModuleTransition delay="0.08">
+        <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
+          {{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
+        </p>
+      </ModuleTransition>
+      <ModuleTransition delay="0.16">
+        <p class="action" v-if="recoShowModule && $frontmatter.actionText && $frontmatter.actionLink">
+          <NavLink class="action-button" :item="actionLink"/>
+        </p>
+      </ModuleTransition>
     </div>
 
-    <!-- <div
-      v-if="data.cases"
-      class="wrapper cases"
-    >
-      <div class="title">
-        {{ data.cases.title }}
-      </div>
-      <div class="sub-title">
-        {{ data.cases.subTitle }}
-      </div>
-      <div class="list">
-        <div
-          v-for="(cese, index) in data.cases.list"
-          :key="index"
-          class="case"
-        >
-          <img
-            v-if="cese.logo"
-            :src="$withBase(cese.logo)"
-            :alt="cese.alt"
-          >
+    <ModuleTransition delay="0.24">
+      <div class="features" v-if="recoShowModule && $frontmatter.features && $frontmatter.features.length">
+        <div v-for="(feature, index) in $frontmatter.features" :key="index" class="feature">
+          <h2>{{ feature.title }}</h2>
+          <p>{{ feature.details }}</p>
         </div>
       </div>
-    </div> -->
-
-    <footer class="footer">
-      <CustomFooter />
-    </footer>
-  </main>
+    </ModuleTransition>
+    <ModuleTransition delay="0.32">
+      <Content class="home-center" v-show="recoShowModule" custom/>
+    </ModuleTransition>
+  </div>
 </template>
 
 <script>
-import NavLink from '@parent-theme/components/NavLink.vue'
-import CustomFooter from '@theme/components/Footer.vue'
-import Parallax from 'parallax-js'
+import { defineComponent, computed } from 'vue-demi'
+import NavLink from '@theme/components/NavLink'
+import { ModuleTransition } from '@vuepress-reco/core/lib/components'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { NavLink, ModuleTransition },
+
+  setup (props, ctx) {
+    const instance = useInstance()
+    const recoShowModule = computed(() => instance && instance.$parent.recoShowModule)
+    const actionLink = computed(() => instance && {
+      link: instance.$frontmatter.actionLink,
+      text: instance.$frontmatter.actionText
+    })
+    const heroImageStyle = computed(() => instance.$frontmatter.heroImageStyle || {
+      maxHeight: '200px',
+      margin: '6rem auto 1.5rem'
+    })
+
+    return { recoShowModule, actionLink, heroImageStyle }
+  }
+})
+</script>
+
+<style lang="stylus">
+.home {
+  padding: $navbarHeight 2rem 0;
+  max-width: 960px;
+  margin: 0px auto;
+
+  .hero {
+    text-align: center;
+    h1 {
+      display: block;
+      font-size: 2.5rem;
+      color: var(--text-color);
+    }
+
+    h1, .description, .action {
+      margin: 1.8rem auto;
+    }
 
-export default {
-  name: 'Home',
-  components: { NavLink, CustomFooter },
-  mounted() {
-    ['scene', 'scene-bg'].forEach(id => new Parallax(document.getElementById(id)))
-  },
-  computed: {
-    data() {
-      return this.$page.frontmatter
-    },
-    actionLink() {
-      return {
-        link: this.data.actionLink,
-        text: this.data.actionText
+    .description {
+      font-size: 1.6rem;
+      line-height: 1.3;
+      color: var(--text-color);
+    }
+
+    .action-button {
+      display: inline-block;
+      font-size: 1.2rem;
+      color: #fff;
+      background-color: $accentColor;
+      padding: 0.2rem 1.2rem;
+      border-radius: $borderRadius
+      transition: background-color 0.1s ease;
+      box-sizing: border-box;
+      load-start()
+
+      &:hover {
+        background-color: lighten($accentColor, 10%);
+      }
+    }
+  }
+
+  .features {
+    border-top: 1px solid var(--border-color);;
+    padding: 1.2rem 0;
+    margin-top: 2.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: stretch;
+    justify-content: space-between;
+  }
+
+  .feature {
+    flex-grow: 1;
+    flex-basis: 30%;
+    max-width: 30%;
+    transition: all .5s
+    color: var(--text-color);
+    h2 {
+      font-size: 1.6rem;
+      font-weight: 500;
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    &:hover {
+      transform scale(1.05)
+    }
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .home {
+    .features {
+      flex-direction: column;
+    }
+
+    .feature {
+      max-width: 100%;
+      padding: 0 2.5rem;
+    }
+  }
+}
+
+@media (max-width: $MQMobileNarrow) {
+  .home {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    .hero {
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
       }
-    },
-    moreActionLink() {
-      return {
-        link: this.data.structure.actionLink,
-        text: this.data.structure.actionText
+
+      h1 {
+        font-size: 2rem;
+      }
+
+      h1, .description, .action {
+        margin: 1.2rem auto;
       }
-    },
-    articleLink() {
-      return {
-        link: this.data.articleLink,
-        text: this.data.articleText
+
+      .description {
+        font-size: 1.2rem;
+      }
+
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+
+    .feature {
+      h2 {
+        font-size: 1.25rem;
       }
     }
   }
 }
-</script>
-
-<style lang="stylus">
-.home
-  overflow-x hidden
-  padding 0 0
-  width 100%
-  margin 0 auto
-  display block
-  font-family PingFangSC-Regular
-  .hero
-    background-color #5A77F3
-    width 100%
-    height 760px
-    display flex
-    flex-direction row
-    justify-content center
-    position relative
-    #scene-bg
-      height 100%
-      position absolute
-      img
-        height 100%
-    .intro
-      display flex
-      flex-direction row
-      align-items center
-      justify-content space-between
-      width 1280px
-      z-index 1
-      .text
-        .title
-          font-family PingFangSC-Semibold
-          font-size 3.1rem
-          color white
-          letter-spacing 0
-        .description
-          font-size 1.3rem
-          font-family PingFangSC-Light
-          padding 1.5rem 0rem 3rem
-          opacity 0.85
-          color #FFFFFF
-          letter-spacing 0.33px
-        .action-button
-          display inline-block
-          font-size 1.2rem
-          color white
-          border 1px solid #FFFFFF
-          padding 0.4rem 2.6rem
-          transition background-color .1s ease
-          &:hover
-            color #5A77F3
-            background-color white
-        .link-wrap
-          display inline-block
-          margin-left 10px
-          position relative
-          .link-icon
-            display block
-            width 30px
-            height 30px
-            position absolute
-            right 6px
-            top 0px
-          &:before
-            content ''
-            display block
-            width 24px
-            height 9px
-            position absolute
-            right 9px
-            top 10px
-            background-color #ffffff
-      .image
-        position relative
-        flex-basis 50%
-        img
-          width 530px
-  .wrapper
-    box-sizing border-box
-    max-width 1280px
-    padding 2em 2em 2em 2em
-    margin-left auto
-    margin-right auto
-    width 100%
-    .title
-      font-size 1.9rem
-      text-align center
-      color #595959
-      font-family PingFangSC-Medium
-    .sub-title
-      text-align center
-      font-family PingFangSC-Light
-      font-size 1.3rem
-      color #999999
-      padding-top 1rem
-  .structure
-    padding 8rem 0rem 5rem
-    display flex
-    flex-direction row
-    align-items flex-start
-    justify-content center
-    .text
-      padding 3rem 4rem 0rem
-      flex-basis 32%
-      .title
-        color #595959
-        text-align left
-        font-size 1.9rem
-        font-family PingFangSC-Medium
-      .sub-title
-        text-align left
-        font-family PingFangSC-Light
-        font-size 1.3rem
-        color #999999
-        padding 0rem
-        line-height 1.8rem
-      .description
-        padding 1.3rem 0rem 0rem 0rem
-        font-size 0.9rem
-        line-height 1.6rem
-        color #595959
-      .action-button
-        margin-top 2rem
-        display inline-block
-        font-size 1rem
-        color #5169AC
-        border 1px solid #5169AC
-        padding 0.4rem 2.8rem
-        transition background-color .1s ease
-        box-sizing border-box
-        &:hover
-          color white
-          background-color #5169AC
-    .image
-      flex-basis 68%
-      img
-        width 100%
-  .features
-    padding 5rem 0rem
-    background-color #F9FCFE
-    .list
-      padding-top 0.5rem
-      margin-top 2.5rem
-      display flex
-      flex-wrap wrap
-      align-items flex-end
-      align-content stretch
-      justify-content space-between
-      .feature
-        flex-grow 1
-        flex-basis 18%
-        max-width 18%
-        padding 1rem
-        .icon-card
-          width 8rem
-          height 8rem
-          margin 0 auto
-          img
-            height 4rem
-            padding 2rem
-        .label
-          font-size 1rem
-          color #595959
-          height 4rem
-          margin 0 auto
-          text-align center
-          color #595959
-  .cases
-    padding 5rem 0rem
-    .list
-      padding 0.5rem 0
-      margin-top 2.5rem
-      display flex
-      flex-wrap wrap
-      justify-content flex-start
-      .case
-        flex-grow 1
-        flex-basis 25%
-        max-width 25%
-        padding: 1rem 0rem
-        text-align center
-        img 
-          width 80%
-          margin 0 auto
-  .footer
-    background #F9F9F9
-    text-align center
-    color lighten($textColor, 25%)
-    padding 1rem 0rem 1rem
-@media (max-width: $MQMobile)
-  .home
-    .hero
-      height 960px
-      .intro
-        display flex
-        flex-direction column
-        align-items center
-        justify-content flex-start
-        .text
-          padding 7rem 0rem 0rem
-          text-align center
-          .title
-            font-size 2rem
-          .description
-            width 90%
-            margin 0 auto
-            font-size 1.4rem
-            color white
-            opacity 0.6
-        .image
-          position relative
-          flex-basis 100%
-          width 100%
-    .wrapper
-      title
-        font-size 1.6rem
-      .sub-title
-        font-size 1.6rem
-    .structure
-      flex-direction column
-      align-items center
-      justify-content flex-start
-      .text
-        order 1
-        flex-basis 100%
-        text-align center
-        .title
-          text-align center
-        .sub-title
-          text-align center
-        .description
-          padding 1.3rem 0rem 0rem 0rem
-      .image
-        order 0
-        flex-basis 100%
-    .features
-      .list
-        .feature 
-          flex-basis 40%
-          max-width 40%
-    .cases
-      .list
-        justify-content space-between
-        .case
-          flex-basis 50%
-          max-width 50%
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/en/admin-manual/optimization.md b/docs/.vuepress/theme/components/HomeBlog/hock.js
similarity index 80%
copy from docs/en/admin-manual/optimization.md
copy to docs/.vuepress/theme/components/HomeBlog/hock.js
index 62d09dc51c..c6e9ecee90 100644
--- a/docs/en/admin-manual/optimization.md
+++ b/docs/.vuepress/theme/components/HomeBlog/hock.js
@@ -1,11 +1,4 @@
----
-{
-    "title": "performance optimization",
-    "language": "en"
-}
----
-
-<!-- 
+/*
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
@@ -22,6 +15,12 @@ software distributed under the License is distributed on an
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
--->
+*/
+// import { ref, reactive, toRefs, getCurrentInstance } from 'vue-demi'
+
+// const useBlog = () => {
+//   const currentPage = ref(1)
+//   return {}
+// }
 
-# Performance optimization
\ No newline at end of file
+// export { useBlog }
diff --git a/docs/.vuepress/theme/components/HomeBlog/index.vue b/docs/.vuepress/theme/components/HomeBlog/index.vue
new file mode 100644
index 0000000000..cbf496930b
--- /dev/null
+++ b/docs/.vuepress/theme/components/HomeBlog/index.vue
@@ -0,0 +1,323 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="home-blog">
+    <div class="hero" :style="{ ...bgImageStyle }">
+      <div>
+        <ModuleTransition>
+          <img
+            class="hero-img"
+            v-if="recoShowModule && $frontmatter.heroImage"
+            :style="heroImageStyle || {}"
+            :src="$withBase($frontmatter.heroImage)"
+            alt="hero"
+          />
+        </ModuleTransition>
+
+        <ModuleTransition delay="0.04">
+          <h1 v-if="recoShowModule && $frontmatter.heroText !== null">
+            {{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
+          </h1>
+        </ModuleTransition>
+
+        <ModuleTransition delay="0.08">
+          <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
+            {{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
+          </p>
+        </ModuleTransition>
+      </div>
+    </div>
+
+    <ModuleTransition delay="0.16">
+      <div v-show="recoShowModule" class="home-blog-wrapper">
+        <div class="blog-list">
+          <!-- 博客列表 -->
+          <note-abstract :data="$recoPosts" @paginationChange="paginationChange" />
+        </div>
+        <div class="info-wrapper">
+          <PersonalInfo/>
+          <h4><reco-icon icon="reco-category" /> {{$recoLocales.category}}</h4>
+          <ul class="category-wrapper">
+            <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
+              <router-link :to="item.path">
+                <span class="category-name">{{ item.name }}</span>
+                <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
+              </router-link>
+            </li>
+          </ul>
+          <hr>
+          <h4 v-if="$tags.list.length !== 0"><reco-icon icon="reco-tag" /> {{$recoLocales.tag}}</h4>
+          <TagList @getCurrentTag="getPagesByTags" />
+          <h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><reco-icon icon="reco-friend" /> {{$recoLocales.friendLink}}</h4>
+          <FriendLink />
+        </div>
+      </div>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.24">
+      <Content v-show="recoShowModule" class="home-center" custom/>
+    </ModuleTransition>
+  </div>
+</template>
+
+<script>
+import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue-demi'
+import TagList from '@theme/components/TagList'
+import FriendLink from '@theme/components/FriendLink'
+import NoteAbstract from '@theme/components/NoteAbstract'
+import { ModuleTransition, RecoIcon } from '@vuepress-reco/core/lib/components'
+import PersonalInfo from '@theme/components/PersonalInfo'
+import { getOneColor } from '@theme/helpers/other'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo, RecoIcon },
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const state = reactive({
+      recoShow: false,
+      heroHeight: 0
+    })
+
+    const recoShowModule = computed(() => instance && instance.$parent.recoShowModule)
+
+    const heroImageStyle = computed(() => instance.$frontmatter.heroImageStyle || {})
+
+    const bgImageStyle = computed(() => {
+      const url = instance.$frontmatter.bgImage
+        ? instance.$withBase(instance.$frontmatter.bgImage)
+        : require('../../images/bg.svg')
+
+      const initBgImageStyle = {
+        textAlign: 'center',
+        overflow: 'hidden',
+        background: `url(${url}) center/cover no-repeat`
+      }
+
+      const { bgImageStyle } = instance.$frontmatter
+
+      return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
+    })
+
+    onMounted(() => {
+      state.heroHeight = document.querySelector('.hero').clientHeight
+      state.recoShow = true
+    })
+
+    return { recoShowModule, heroImageStyle, bgImageStyle, ...toRefs(state), getOneColor }
+  },
+  methods: {
+    paginationChange (page) {
+      setTimeout(() => {
+        window.scrollTo(0, this.heroHeight)
+      }, 100)
+    },
+    getPagesByTags (tagInfo) {
+      this.$router.push({ path: tagInfo.path })
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.home-blog {
+  padding: 0;
+  margin: 0px auto;
+  .hero {
+    margin $navbarHeight auto 0
+    position relative
+    box-sizing border-box
+    padding 0 20px
+    height 100vh
+    display flex
+    align-items center
+    justify-content center
+    .hero-img {
+      max-width: 300px;
+      margin: 0 auto 1.5rem
+    }
+
+    h1 {
+      display: block;
+      margin:0 auto 1.8rem;
+      font-size: 2.5rem;
+    }
+
+    .description {
+      margin: 1.8rem auto;
+      font-size: 1.6rem;
+      line-height: 1.3;
+    }
+  }
+  .home-blog-wrapper {
+    display flex
+    align-items: flex-start;
+    margin 20px auto 0
+    padding 0 20px
+    max-width $homePageWidth
+    .blog-list {
+      flex auto
+      width 0
+      .abstract-wrapper {
+        .abstract-item:last-child {
+          margin-bottom: 0px;
+        }
+      }
+    }
+    .info-wrapper {
+      position -webkit-sticky;
+      position sticky;
+      top 70px
+      overflow hidden
+      transition all .3s
+      margin-left 15px
+      flex 0 0 300px
+      height auto
+      box-shadow var(--box-shadow)
+      border-radius $borderRadius
+      box-sizing border-box
+      padding 0 15px
+      background var(--background-color)
+      &:hover {
+        box-shadow var(--box-shadow-hover)
+      }
+      h4 {
+        color var(--text-color)
+      }
+      .category-wrapper {
+        list-style none
+        padding-left 0
+        .category-item {
+          margin-bottom .4rem
+          padding: .4rem .8rem;
+          transition: all .5s
+          border-radius $borderRadius
+          box-shadow var(--box-shadow)
+          background-color var(--background-color)
+          &:hover {
+            transform scale(1.04)
+            a {
+              color $accentColor
+            }
+          }
+          a {
+            display flex
+            justify-content: space-between
+            align-items: center
+            color var(--text-color)
+            .post-num {
+              width 1.6rem;
+              height 1.6rem
+              text-align center
+              line-height 1.6rem
+              border-radius $borderRadius
+              background #eee
+              font-size 13px
+              color #fff
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .home-blog {
+    .hero {
+      height 450px
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
+      }
+
+      h1 {
+        margin: 0 auto 1.8rem ;
+        font-size: 2rem;
+      }
+
+      .description {
+        font-size: 1.2rem;
+      }
+
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+    .home-blog-wrapper {
+      display block!important
+      .blog-list {
+        width auto
+      }
+      .info-wrapper {
+        // display none!important
+        margin-left 0
+        .personal-info-wrapper {
+          display none
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $MQMobileNarrow) {
+  .home-blog {
+    .hero {
+      height 450px
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
+      }
+
+      h1 {
+        margin: 0 auto 1.8rem ;
+        font-size: 2rem;
+      }
+
+      h1, .description, .action {
+        // margin: 1.2rem auto;
+      }
+
+      .description {
+        font-size: 1.2rem;
+      }
+
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+
+    .home-blog-wrapper {
+      display block!important
+      .blog-list {
+        width auto
+      }
+      .info-wrapper {
+        // display none!important
+        margin-left 0
+        .personal-info-wrapper {
+          display none
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/docs/.vuepress/theme/components/MobShare.vue b/docs/.vuepress/theme/components/MobShare.vue
new file mode 100644
index 0000000000..561890ac43
--- /dev/null
+++ b/docs/.vuepress/theme/components/MobShare.vue
@@ -0,0 +1,48 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div>
+    <div class="-mob-share-ui-button -mob-share-open">分享</div>
+      <div class="-mob-share-ui" style="display: none">
+        <ul class="-mob-share-list">
+            <li class="-mob-share-weibo"><p>新浪微博</p></li>
+            <li class="-mob-share-qzone"><p>QQ空间</p></li>
+            <li class="-mob-share-qq"><p>QQ好友</p></li>
+            <li class="-mob-share-douban"><p>豆瓣</p></li>
+            <li class="-mob-share-facebook"><p>Facebook</p></li>
+            <li class="-mob-share-twitter"><p>Twitter</p></li>
+        </ul>
+        <div class="-mob-share-close">取消</div>
+      </div>
+      <div class="-mob-share-ui-bg"></div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+export default defineComponent({
+  setup (props, ctx) {
+    const script = document.createElement('script')
+    script.src = 'http://f1.webshare.mob.com/code/mob-share.js?appkey=2d1a37832f835'
+    script.id = '-mob-share'
+
+    document.body.append(script)
+  }
+})
+</script>
+
diff --git a/docs/.vuepress/theme/components/Mode/ModePicker.vue b/docs/.vuepress/theme/components/Mode/ModePicker.vue
new file mode 100644
index 0000000000..654aee2eae
--- /dev/null
+++ b/docs/.vuepress/theme/components/Mode/ModePicker.vue
@@ -0,0 +1,118 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="mode-options">
+    <h4 class="title">Choose mode</h4>
+    <ul class="color-mode-options">
+      <li
+        v-for="(mode, index) in modeOptions"
+        :key="index"
+        :class="getClass(mode.mode)"
+        @click="selectMode(mode.mode)"
+      >{{ mode.title }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import applyMode from './applyMode'
+export default {
+  name: 'ModeOptions',
+
+  data () {
+    return {
+      modeOptions: [
+        { mode: 'dark', title: 'dark' },
+        { mode: 'auto', title: 'auto' },
+        { mode: 'light', title: 'light' }
+      ],
+      currentMode: 'auto'
+    }
+  },
+
+  mounted () {
+    // modePicker 开启时默认使用用户主动设置的模式
+    this.currentMode = localStorage.getItem('mode') || this.$themeConfig.mode || 'auto'
+
+    // Dark and Light autoswitches
+    // 为了避免在 server-side 被执行,故在 Vue 组件中设置监听器
+    var that = this
+    window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+      that.$data.currentMode === 'auto' && applyMode(that.$data.currentMode)
+    })
+    window.matchMedia('(prefers-color-scheme: light)').addListener(() => {
+      that.$data.currentMode === 'auto' && applyMode(that.$data.currentMode)
+    })
+
+    applyMode(this.currentMode)
+  },
+
+  methods: {
+    selectMode (mode) {
+      if (mode !== this.currentMode) {
+        this.currentMode = mode
+        applyMode(mode)
+        localStorage.setItem('mode', mode)
+      }
+    },
+    getClass (mode) {
+      return mode !== this.currentMode ? mode : `${mode} active`
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.mode-options
+  background-color var(--background-color)
+  min-width: 125px;
+  margin: 0;
+  padding: 1em;
+  box-shadow var(--box-shadow);
+  border-radius: $borderRadius;
+  .title
+    margin-top 0
+    margin-bottom .6rem
+    font-weight bold
+    color var(--text-color)
+  .color-mode-options
+    display: flex;
+    flex-wrap wrap
+    li
+      flex: 1;
+      text-align: center;
+      font-size 12px
+      color var(--text-color)
+      line-height 18px
+      padding 3px 6px
+      border-top 1px solid #666
+      border-bottom 1px solid #666
+      background-color var(--background-color)
+      cursor pointer
+      &.dark
+        border-radius: $borderRadius 0 0 $borderRadius
+        border-left 1px solid #666
+      &.light
+        border-radius: 0 $borderRadius $borderRadius 0
+        border-right 1px solid #666
+      &.active
+        background-color: $accentColor;
+        color #fff
+      &:not(.active)
+        border-right 1px solid #666
+</style>
diff --git a/docs/.vuepress/theme/components/Mode/applyMode.js b/docs/.vuepress/theme/components/Mode/applyMode.js
new file mode 100644
index 0000000000..5589d14ddc
--- /dev/null
+++ b/docs/.vuepress/theme/components/Mode/applyMode.js
@@ -0,0 +1,57 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import modeOptions from './modeOptions'
+
+function render (mode) {
+  const rootElement = document.querySelector(':root')
+  const options = modeOptions[mode]
+  const opposite = mode === 'dark' ? 'light' : 'dark'
+
+  for (const k in options) {
+    rootElement.style.setProperty(k, options[k])
+  }
+
+  rootElement.classList.remove(opposite)
+  rootElement.classList.add(mode)
+}
+
+/**
+ * Sets a color scheme for the website.
+ * If browser supports "prefers-color-scheme", 'auto' mode will respect the setting for light or dark mode
+ * otherwise it will set a dark theme during night time
+ */
+export default function applyMode (mode) {
+  if (mode !== 'auto') {
+    render(mode)
+    return
+  }
+
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+
+  if (isDarkMode) render('dark')
+  if (isLightMode) render('light')
+
+  if (!isDarkMode && !isLightMode) {
+    console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.')
+    const hour = new Date().getHours()
+    if (hour < 6 || hour >= 18) render('dark')
+    else render('light')
+  }
+}
diff --git a/docs/.vuepress/theme/components/Mode/index.vue b/docs/.vuepress/theme/components/Mode/index.vue
new file mode 100644
index 0000000000..72ee991dc9
--- /dev/null
+++ b/docs/.vuepress/theme/components/Mode/index.vue
@@ -0,0 +1,122 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+	<div v-click-outside="hideMenu" class="color-picker" v-if="$themeConfig.modePicker !== false" >
+		<a class="color-button" @click.prevent="showMenu = !showMenu">
+      <reco-icon icon="reco-color" />
+		</a>
+		<ModuleTransition :transform=" ['translate(-50%, 0)', 'translate(-50%, -10px)']">
+			<div v-show="showMenu" class="color-picker-menu">
+				<ModePicker />
+			</div>
+		</ModuleTransition>
+	</div>
+</template>
+
+<script>
+import { RecoIcon, ModuleTransition } from '@vuepress-reco/core/lib/components'
+import ClickOutside from 'vue-click-outside'
+import ModePicker from './ModePicker'
+import applyMode from './applyMode'
+
+export default {
+  name: 'UserSettings',
+
+  directives: {
+    'click-outside': ClickOutside
+  },
+
+  components: {
+    ModePicker,
+    RecoIcon,
+    ModuleTransition
+  },
+
+  data () {
+    return {
+      showMenu: false
+    }
+  },
+
+  // 为了在保证 modePicker 在 SSR 中正确开关,并实现管理,Mode 组件将负责 modePicker 关闭的情况
+  mounted () {
+    // modePicker 关闭时默认使用主题设置的模式
+    const themeMode = this.$themeConfig.mode || 'auto'
+    const { modePicker } = this.$themeConfig
+    if (modePicker === false) {
+      // 为 'auto' 模式设置监听器
+      if (themeMode === 'auto') {
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+          applyMode(themeMode)
+        })
+        window.matchMedia('(prefers-color-scheme: light)').addListener(() => {
+          applyMode(themeMode)
+        })
+      }
+      applyMode(themeMode)
+    }
+  },
+
+  methods: {
+    hideMenu () {
+      this.showMenu = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.color-picker {
+	position: relative;
+	margin-right: 1em;
+  cursor pointer;
+	.color-button {
+		align-items: center;
+		height: 100%;
+		.iconfont {
+			font-size 1.4rem
+			color: $accentColor
+		}
+	}
+
+	.color-picker-menu {
+		position: absolute;
+		top: 40px;
+		left: 50%;
+		z-index: 150;
+
+		ul {
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+		}
+	}
+}
+
+@media (max-width: $MQMobile) {
+	.color-picker {
+		margin-right: 1rem;
+		.color-picker-menu {
+			left: calc(50% - 35px);
+			&::before {
+				left: calc(50% + 35px);
+			}
+		}
+	}
+}
+</style>
diff --git a/docs/.vuepress/theme/components/Mode/modeOptions.js b/docs/.vuepress/theme/components/Mode/modeOptions.js
new file mode 100644
index 0000000000..8392573bb1
--- /dev/null
+++ b/docs/.vuepress/theme/components/Mode/modeOptions.js
@@ -0,0 +1,62 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+const modeOptions = {
+  light: {
+    '--default-color-10': 'rgba(255, 255, 255, 1)',
+    '--default-color-9': 'rgba(255, 255, 255, .9)',
+    '--default-color-8': 'rgba(255, 255, 255, .8)',
+    '--default-color-7': 'rgba(255, 255, 255, .7)',
+    '--default-color-6': 'rgba(255, 255, 255, .6)',
+    '--default-color-5': 'rgba(255, 255, 255, .5)',
+    '--default-color-4': 'rgba(255, 255, 255, .4)',
+    '--default-color-3': 'rgba(255, 255, 255, .3)',
+    '--default-color-2': 'rgba(255, 255, 255, .2)',
+    '--default-color-1': 'rgba(255, 255, 255, .1)',
+    '--background-color': '#fff',
+    '--box-shadow': '0 1px 8px 0 rgba(0, 0, 0, 0.1)',
+    '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
+    '--text-color': '#242424',
+    '--text-color-sub': '#7F7F7F',
+    '--border-color': '#eaecef',
+    '--code-color': 'rgba(27, 31, 35, 0.05)',
+    '--mask-color': '#888'
+  },
+  dark: {
+    '--default-color-10': 'rgba(0, 0, 0, 1)',
+    '--default-color-9': 'rgba(0, 0, 0, .9)',
+    '--default-color-8': 'rgba(0, 0, 0, .8)',
+    '--default-color-7': 'rgba(0, 0, 0, .7)',
+    '--default-color-6': 'rgba(0, 0, 0, .6)',
+    '--default-color-5': 'rgba(0, 0, 0, .5)',
+    '--default-color-4': 'rgba(0, 0, 0, .4)',
+    '--default-color-3': 'rgba(0, 0, 0, .3)',
+    '--default-color-2': 'rgba(0, 0, 0, .2)',
+    '--default-color-1': 'rgba(0, 0, 0, .1)',
+    '--background-color': '#181818',
+    '--box-shadow': '0 1px 8px 0 rgba(0, 0, 0, .6)',
+    '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, .7)',
+    '--text-color': 'rgba(255, 255, 255, .8)',
+    '--text-color-sub': '#8B8B8B',
+    '--border-color': 'rgba(0, 0, 0, .3)',
+    '--code-color': 'rgba(0, 0, 0, .3)',
+    '--mask-color': '#000'
+  }
+}
+
+export default modeOptions
diff --git a/docs/.vuepress/theme/components/NavLink.vue b/docs/.vuepress/theme/components/NavLink.vue
new file mode 100644
index 0000000000..1ba419da85
--- /dev/null
+++ b/docs/.vuepress/theme/components/NavLink.vue
@@ -0,0 +1,85 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <RouterLink
+    class="nav-link"
+    :class="[item.className]"
+    :to="link"
+    v-if="!isExternal(link)"
+    :exact="exact"
+  >
+    <reco-icon :icon="`${item.icon}`" />
+    {{ item.text }}
+  </RouterLink>
+  <a
+    v-else
+    :href="link"
+    class="nav-link external"
+    :target="isMailto(link) || isTel(link) ? null : '_blank'"
+    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
+  >
+    <reco-icon :icon="`${item.icon}`" />
+    {{ item.text }}
+    <OutboundLink />
+  </a>
+</template>
+
+<script>
+import { defineComponent, computed, toRefs } from "vue-demi";
+import { isExternal, isMailto, isTel, ensureExt } from "@theme/helpers/utils";
+import { RecoIcon } from "@vuepress-reco/core/lib/components";
+import { useInstance } from "@theme/helpers/composable";
+
+export default defineComponent({
+  components: { RecoIcon },
+
+  props: {
+    item: {
+      required: true,
+    },
+  },
+  methods: {
+    isVersionLink(link) {
+      return link.indexOf("branch") > -1;
+    },
+    go(link) {
+      const url = window.location.origin + link;
+      location.href = url;
+    },
+  },
+
+  setup(props, ctx) {
+    const instance = useInstance();
+
+    const { item } = toRefs(props);
+
+    const link = computed(() => ensureExt(item.value.link));
+
+    const exact = computed(() => {
+      if (instance.$site.locales) {
+        return Object.keys(instance.$site.locales).some(
+          (rootLink) => rootLink === link.value
+        );
+      }
+      return link.value === "/";
+    });
+
+    return { link, exact, isExternal, isMailto, isTel };
+  },
+});
+</script>
diff --git a/docs/.vuepress/theme/components/NavLinks.vue b/docs/.vuepress/theme/components/NavLinks.vue
new file mode 100644
index 0000000000..5c32e98700
--- /dev/null
+++ b/docs/.vuepress/theme/components/NavLinks.vue
@@ -0,0 +1,211 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <nav class="nav-links" v-if="userLinks.length || repoLink">
+    <!-- user links -->
+    <div
+      class="nav-item"
+      v-for="item in userLinks"
+      :key="item.link"
+    >
+      <DropdownLink v-if="item.type === 'links'" :item="item" />
+      <NavLink v-else :item="item" />
+    </div>
+
+    <!-- repo link -->
+    <a
+      v-if="repoLink"
+      :href="repoLink"
+      class="repo-link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <reco-icon :icon="`reco-${repoLabel.toLowerCase()}`" />
+      {{ repoLabel }}
+      <OutboundLink/>
+    </a>
+  </nav>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import DropdownLink from '@theme/components/DropdownLink'
+import { resolveNavLinkItem } from '@theme/helpers/utils'
+import NavLink from '@theme/components/NavLink'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { NavLink, DropdownLink, RecoIcon },
+
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const userNav = computed(() => {
+      return instance.$themeLocaleConfig.nav || instance.$themeConfig.nav || []
+    })
+
+    const nav = computed(() => {
+      const locales = instance.$site.locales || {}
+
+      if (locales && Object.keys(locales).length > 1) {
+        const currentLink = instance.$page.path
+        const routes = instance.$router.options.routes
+        const themeLocales = instance.$themeConfig.locales || {}
+        const languageDropdown = {
+          text: instance.$themeLocaleConfig.selectText || 'Languages',
+          items: Object.keys(locales).map(path => {
+            const locale = locales[path]
+            const text = themeLocales[path] && themeLocales[path].label || locale.lang
+            let link
+            // Stay on the current page
+            if (locale.lang === instance.$lang) {
+              link = currentLink
+            } else {
+              // Try to stay on the same page
+              link = currentLink.replace(instance.$localeConfig.path, path)
+              // fallback to homepage
+              if (!routes.some(route => route.path === link)) {
+                link = path
+              }
+            }
+            return { text, link }
+          })
+        }
+
+        return [...userNav.value, languageDropdown]
+      }
+
+      // blogConfig 的处理,根绝配置自动添加分类和标签
+      const blogConfig = instance.$themeConfig.blogConfig || {}
+      const isHasCategory = userNav.value.some(item => {
+        if (blogConfig.category) {
+          return item.text === (blogConfig.category.text || '分类')
+        } else {
+          return true
+        }
+      })
+      const isHasTag = userNav.value.some(item => {
+        if (blogConfig.tag) {
+          return item.text === (blogConfig.tag.text || '标签')
+        } else {
+          return true
+        }
+      })
+
+      if (!isHasCategory && Object.hasOwnProperty.call(blogConfig, 'category')) {
+        const category = blogConfig.category
+        const $categories = instance.$categories
+        userNav.value.splice(parseInt(category.location || 2) - 1, 0, {
+          items: $categories.list.map(item => {
+            item.link = item.path
+            item.text = item.name
+            return item
+          }),
+          text: category.text || instance.$recoLocales.category,
+          type: 'links',
+          icon: 'reco-category'
+        })
+      }
+
+      if (!isHasTag && Object.hasOwnProperty.call(blogConfig, 'tag')) {
+        const tag = blogConfig.tag
+        userNav.value.splice(parseInt(tag.location || 3) - 1, 0, {
+          link: '/tag/',
+          text: tag.text || instance.$recoLocales.tag,
+          type: 'links',
+          icon: 'reco-tag'
+        })
+      }
+
+      return userNav.value
+    })
+
+    const userLinks = computed(() => {
+      return (instance.nav || []).map(link => {
+        return Object.assign(resolveNavLinkItem(link), {
+          items: (link.items || []).map(resolveNavLinkItem)
+        })
+      })
+    })
+
+    const repoLink = computed(() => {
+      const { repo } = instance.$themeConfig
+
+      if (repo) {
+        return /^https?:/.test(repo)
+          ? repo
+          : `https://github.com/${repo}`
+      }
+
+      return ''
+    })
+
+    const repoLabel = computed(() => {
+      if (!instance.repoLink) return ''
+      if (instance.$themeConfig.repoLabel) {
+        return instance.$themeConfig.repoLabel
+      }
+
+      const repoHost = instance.repoLink.match(/^https?:\/\/[^/]+/)[0]
+      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
+      for (let i = 0; i < platforms.length; i++) {
+        const platform = platforms[i]
+        if (new RegExp(platform, 'i').test(repoHost)) {
+          return platform
+        }
+      }
+
+      return 'Source'
+    })
+
+    return { userNav, nav, userLinks, repoLink, repoLabel }
+  }
+})
+</script>
+
+<style lang="stylus">
+.nav-links
+  display inline-block
+  a
+    line-height 1.4rem
+    color var(--text-color)
+    &:hover, &.router-link-active
+      color $accentColor
+      .iconfont
+        color $accentColor
+  .nav-item
+    position relative
+    display inline-block
+    margin-left 1.5rem
+    line-height 2rem
+    &:first-child
+      margin-left 0
+  .repo-link
+    margin-left 1.5rem
+
+@media (max-width: $MQMobile)
+  .nav-links
+    .nav-item, .repo-link
+      margin-left 0
+
+@media (min-width: $MQMobile)
+  .nav-item > a:not(.external)
+    &:hover, &.router-link-active
+      margin-bottom -2px
+</style>
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
new file mode 100644
index 0000000000..f8ec0ceaa6
--- /dev/null
+++ b/docs/.vuepress/theme/components/Navbar.vue
@@ -0,0 +1,187 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <header class="navbar">
+    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
+
+    <router-link
+      :to="$localePath"
+      class="home-link">
+      <img
+        class="logo"
+        v-if="$themeConfig.logo"
+        :src="$withBase($themeConfig.logo)"
+        :alt="$siteTitle">
+      <span
+        ref="siteName"
+        class="site-name"
+        v-if="$siteTitle">{{ $siteTitle }}</span>
+    </router-link>
+
+    <div class="dropdown-box" v-show="showVersionNav()">
+      <Dropdown />
+    </div>
+
+    <div
+      class="links"
+      :style="linksWrapMaxWidth ? {
+        'max-width': linksWrapMaxWidth + 'px'
+      } : {}">
+
+      <Mode />
+      <AlgoliaSearchBox
+        v-if="isAlgoliaSearch"
+        :options="algolia"/>
+      <SearchBox v-else-if="$themeConfig.search !== false && $frontmatter.search !== false"/>
+      <NavLinks class="can-hide"/>
+    </div>
+  </header>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, computed, reactive } from 'vue-demi'
+import AlgoliaSearchBox from '@AlgoliaSearchBox'
+import SearchBox from '@SearchBox'
+import SidebarButton from '@theme/components/SidebarButton'
+import NavLinks from '@theme/components/NavLinks'
+import Mode from '@theme/components/Mode'
+import { useInstance } from '@theme/helpers/composable'
+import Dropdown from '@theme/components/Dropdown'
+import NavLink from './NavLink.vue'
+
+export default defineComponent({
+  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Mode, Dropdown, NavLink },
+  methods: {
+    showVersionNav () {
+      const versions = this.$themeLocaleConfig.versions
+      if (!versions) return false
+      const versionKeys = versions.items.map(v => v.text === 'master' ? 'docs' : v.text)
+      return versionKeys.some(v => this.$route.path.indexOf(v) > -1)
+    }
+  },
+  setup (props, ctx) {
+    const instance = useInstance()
+    const linksWrapMaxWidth = ref(null)
+
+    const algolia = computed(() => {
+      return instance.$themeLocaleConfig.algolia || instance.$themeConfig.algolia || {}
+    })
+
+    const isAlgoliaSearch = computed(() => {
+      return algolia.value && algolia.value.apiKey && algolia.value.indexName
+    })
+
+    function css (el, property) {
+      // NOTE: Known bug, will return 'auto' if style value is 'auto'
+      const win = el.ownerDocument.defaultView
+      // null means not to return pseudo styles
+      return win.getComputedStyle(el, null)[property]
+    }
+
+    onMounted(() => {
+
+      const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+      const NAVBAR_VERTICAL_PADDING =
+        parseInt(css(instance.$el, 'paddingLeft')) +
+        parseInt(css(instance.$el, 'paddingRight'))
+
+      const handleLinksWrapWidth = () => {
+        if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+          linksWrapMaxWidth.value = null
+        } else {
+          linksWrapMaxWidth.value =
+            instance.$el.offsetWidth -
+            NAVBAR_VERTICAL_PADDING -
+            (instance.$refs.siteName && instance.$refs.siteName.offsetWidth || 0)
+        }
+      }
+
+      handleLinksWrapWidth()
+      window.addEventListener('resize', handleLinksWrapWidth, false)
+    })
+
+    return { linksWrapMaxWidth, algolia, isAlgoliaSearch, css }
+  }
+})
+</script>
+
+<style lang="stylus">
+$navbar-vertical-padding = 0.7rem
+$navbar-horizontal-padding = 1.5rem
+
+.navbar
+  padding $navbar-vertical-padding $navbar-horizontal-padding
+  line-height $navbarHeight - 1.4rem
+  box-shadow var(--box-shadow)
+  background var(--background-color)
+  a, span, img
+    display inline-block
+  .logo
+    height $navbarHeight - 1.4rem
+    min-width $navbarHeight - 1.4rem
+    margin-right 0.8rem
+    vertical-align top
+    border-radius 50%
+  .site-name
+    font-size 1.2rem
+    font-weight 600
+    color var(--text-color)
+    position relative
+  .links
+    padding-left 1.5rem
+    box-sizing border-box
+    white-space nowrap
+    font-size 0.9rem
+    position absolute
+    right $navbar-horizontal-padding
+    top $navbar-vertical-padding
+    display flex
+    background-color var(--background-color)
+    .search-box
+      flex: 0 0 auto
+      vertical-align top
+  .dropdown-box 
+    position absolute
+    left 14rem
+    top 50%
+    transform translateY(-50%)
+    height 100%
+    z-index 1
+    .dropdown-wrapper
+      min-width 80px
+    .dropdown-title
+      font-weight normal
+      position relative
+      top 2px
+  .document.nav-item
+    margin-left 0
+    margin-right 2.3rem
+  .nav-item .nav-link
+    color #242424
+  .nav-item .nav-link.router-link-active
+    color #2ca37d
+
+@media (max-width: $MQMobile)
+  .navbar
+    padding-left 4rem
+    .can-hide
+      display none
+    .links
+      padding-left .2rem
+
+</style>
diff --git a/docs/.vuepress/theme/components/NoteAbstract.vue b/docs/.vuepress/theme/components/NoteAbstract.vue
new file mode 100644
index 0000000000..88861bfba8
--- /dev/null
+++ b/docs/.vuepress/theme/components/NoteAbstract.vue
@@ -0,0 +1,84 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="abstract-wrapper">
+    <NoteAbstractItem
+      v-for="(item) in currentPageData"
+      :key="item.path"
+      :item="item"
+      :currentPage="currentPage"
+      :currentTag="currentTag"
+    />
+    <pagation
+      class="pagation"
+      :total="data.length"
+      :currentPage="currentPage"
+      @getCurrentPage="getCurrentPage"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, toRefs, computed, onMounted } from 'vue-demi'
+import pagination from '@theme/mixins/pagination'
+import NoteAbstractItem from './NoteAbstractItem'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  mixins: [pagination],
+  components: { NoteAbstractItem },
+  props: ['data', 'currentTag'],
+
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const { data } = toRefs(props)
+
+    const currentPage = ref(1)
+
+    const currentPageData = computed(() => {
+      const start = (currentPage.value - 1) * instance.$perPage
+      const end = currentPage.value * instance.$perPage
+
+      return data.value.slice(start, end)
+    })
+
+    const getCurrentPage = (page) => {
+      currentPage.value = page
+      instance._setStoragePage(page)
+      ctx.emit('paginationChange', page)
+    }
+
+    onMounted(() => {
+      currentPage.value = instance._getStoragePage() || 1
+    })
+
+    return { currentPage, currentPageData, getCurrentPage }
+  },
+  watch: {
+    $route () {
+      this.currentPage = this._getStoragePage() || 1
+    }
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.abstract-wrapper
+  width 100%
+</style>
diff --git a/docs/.vuepress/theme/components/NoteAbstractItem.vue b/docs/.vuepress/theme/components/NoteAbstractItem.vue
new file mode 100644
index 0000000000..2737ae4501
--- /dev/null
+++ b/docs/.vuepress/theme/components/NoteAbstractItem.vue
@@ -0,0 +1,109 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div
+    class="abstract-item"
+    @click="$router.push(item.path)">
+    <reco-icon v-if="item.frontmatter.sticky" icon="reco-sticky" />
+    <div class="title">
+      <reco-icon v-if="item.frontmatter.keys" icon="reco-lock" />
+      <router-link :to="item.path">{{item.title}}</router-link>
+    </div>
+    <div class="abstract" v-html="item.excerpt"></div>
+    <PageInfo
+      :pageInfo="item"
+      :currentTag="currentTag">
+    </PageInfo>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import PageInfo from './PageInfo'
+export default defineComponent({
+  components: { PageInfo, RecoIcon },
+  props: ['item', 'currentPage', 'currentTag']
+})
+</script>
+
+<style lang="stylus" scoped>
+.abstract-item
+  position relative
+  margin: 0 auto 20px;
+  padding: 16px 20px;
+  width 100%
+  overflow: hidden;
+  border-radius: $borderRadius
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  transition all .3s
+  background-color var(--background-color)
+  cursor: pointer;
+  > * {
+    pointer-events: auto;
+  }
+  .reco-sticky
+    position absolute
+    top 0
+    left 0
+    display inline-block
+    color $accentColor
+    font-size 2.4rem
+  &:hover
+    box-shadow: var(--box-shadow-hover)
+  .title
+    position: relative;
+    font-size: 1.28rem;
+    line-height: 46px;
+    display: inline-block;
+    a
+      color: var(--text-color);
+    .reco-lock
+      font-size 1.28rem
+      color $accentColor
+    &:after
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background-color: $accentColor;
+      visibility: hidden;
+      -webkit-transform: scaleX(0);
+      transform: scaleX(0);
+      transition: .3s ease-in-out;
+    &:hover a
+      color $accentColor
+    &:hover:after
+      visibility visible
+      -webkit-transform: scaleX(1);
+      transform: scaleX(1);
+  .tags
+    .tag-item
+      &.active
+        color $accentColor
+      &:hover
+        color $accentColor
+@media (max-width: $MQMobile)
+  .tags
+    display block
+    margin-top 1rem;
+    margin-left: 0!important;
+</style>
diff --git a/docs/.vuepress/theme/components/Page.vue b/docs/.vuepress/theme/components/Page.vue
new file mode 100644
index 0000000000..4f84111a12
--- /dev/null
+++ b/docs/.vuepress/theme/components/Page.vue
@@ -0,0 +1,346 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <main class="page" :style="pageStyle">
+    <ModuleTransition delay="0.08">
+      <section v-show="recoShowModule">
+        <div class="page-title">
+          <h1 class="title">{{$page.title}}</h1>
+          <PageInfo :pageInfo="$page" :showAccessNumber="showAccessNumber"></PageInfo>
+        </div>
+        <!-- 这里使用 v-show,否则影响 SSR -->
+        <Content class="theme-reco-content" />
+      </section>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.16">
+      <footer v-if="recoShowModule" class="page-edit">
+        <div class="edit-link" v-if="editLink">
+          <a
+            :href="editLink"
+            target="_blank"
+            rel="noopener noreferrer"
+          >{{ editLinkText }}</a>
+          <OutboundLink/>
+        </div>
+
+        <div
+          class="last-updated"
+          v-if="lastUpdated"
+        >
+          <span class="prefix">{{ lastUpdatedText }}: </span>
+          <span class="time">{{ lastUpdated }}</span>
+        </div>
+      </footer>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.24">
+      <div class="page-nav" v-if="recoShowModule && (prev || next)">
+        <p class="inner">
+          <span v-if="prev" class="prev">
+            <router-link v-if="prev" class="prev" :to="prev.path">
+              {{ prev.title || prev.path }}
+            </router-link>
+          </span>
+          <span v-if="next" class="next">
+            <router-link v-if="next" :to="next.path">
+              {{ next.title || next.path }}
+            </router-link>
+          </span>
+        </p>
+      </div>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.32">
+      <Comments v-if="recoShowModule" :isShowComments="shouldShowComments"/>
+    </ModuleTransition>
+
+    <ModuleTransition>
+      <SubSidebar v-if="recoShowModule" class="side-bar" />
+    </ModuleTransition>
+
+    <ModuleTransition>
+      <PageFooter v-if="$frontmatter.page !== 'home'" />
+    </ModuleTransition>
+  </main>
+</template>
+
+<script>
+import { defineComponent, computed, toRefs } from 'vue-demi'
+import PageInfo from '@theme/components/PageInfo'
+import { resolvePage, outboundRE, endingSlashRE } from '@theme/helpers/utils'
+import { ModuleTransition } from '@vuepress-reco/core/lib/components'
+import SubSidebar from '@theme/components/SubSidebar'
+import { useInstance } from '@theme/helpers/composable'
+import PageFooter from '@theme/components/PageFooter'
+
+export default defineComponent({
+  components: { PageInfo, ModuleTransition, SubSidebar, PageFooter },
+
+  props: ['sidebarItems'],
+
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const { sidebarItems } = toRefs(props)
+
+    const recoShowModule = computed(() => instance.$parent.recoShowModule)
+
+    // 是否显示评论
+    const shouldShowComments = computed(() => {
+      const { isShowComments } = instance.$frontmatter
+      const { showComment } = instance.$themeConfig.valineConfig || { showComment: true }
+      return (showComment !== false && isShowComments !== false) || (showComment === false && isShowComments === true)
+    })
+
+    const showAccessNumber = computed(() => {
+      const {
+        $themeConfig: { valineConfig },
+        $themeLocaleConfig: { valineConfig: valineLocalConfig }
+      } = instance || {}
+
+      const vc = valineLocalConfig || valineConfig
+
+      return vc && vc.visitor != false
+    })
+
+    const lastUpdated = computed(() => {
+      if (instance.$themeConfig.lastUpdated === false) return false
+      return instance.$page.lastUpdated
+    })
+
+    const lastUpdatedText = computed(() => {
+      if (typeof instance.$themeLocaleConfig.lastUpdated === 'string') {
+        return instance.$themeLocaleConfig.lastUpdated
+      }
+      if (typeof instance.$themeConfig.lastUpdated === 'string') {
+        return instance.$themeConfig.lastUpdated
+      }
+      return 'Last Updated'
+    })
+
+    const prev = computed(() => {
+      const frontmatterPrev = instance.$frontmatter.prev
+      if (frontmatterPrev === false) {
+        return
+      } else if (frontmatterPrev) {
+        return resolvePage(instance.$site.pages, frontmatterPrev, instance.$route.path)
+      } else {
+        return resolvePrev(instance.$page, sidebarItems.value)
+      }
+    })
+
+    const next = computed(() => {
+      const frontmatterNext = instance.$frontmatter.next
+      if (next === false) {
+        return
+      } else if (frontmatterNext) {
+        return resolvePage(instance.$site.pages, frontmatterNext, instance.$route.path)
+      } else {
+        return resolveNext(instance.$page, sidebarItems.value)
+      }
+    })
+
+    const editLink = computed(() => {
+      if (instance.$frontmatter.editLink === false) {
+        return false
+      }
+      const {
+        repo,
+        editLinks,
+        docsDir = '',
+        docsBranch = 'master',
+        docsRepo = repo
+      } = instance.$themeConfig
+
+      if (docsRepo && editLinks && instance.$page.relativePath) {
+        return createEditLink(repo, docsRepo, docsDir, docsBranch, instance.$page.relativePath)
+      }
+      return ''
+    })
+
+    const editLinkText = computed(() => {
+      return (
+        instance.$themeLocaleConfig.editLinkText || instance.$themeConfig.editLinkText || `Edit this page`
+      )
+    })
+
+    const pageStyle = computed(() => {
+      return instance.$showSubSideBar ? {} : { paddingRight: '0' }
+    })
+
+    return {
+      recoShowModule,
+      shouldShowComments,
+      showAccessNumber,
+      lastUpdated,
+      lastUpdatedText,
+      prev,
+      next,
+      editLink,
+      editLinkText,
+      pageStyle
+    }
+  }
+})
+
+function createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
+  const bitbucket = /bitbucket.org/
+  if (bitbucket.test(repo)) {
+    const base = outboundRE.test(docsRepo)
+      ? docsRepo
+      : repo
+    return (
+      base.replace(endingSlashRE, '') +
+        `/src` +
+        `/${docsBranch}/` +
+        (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+        path +
+        `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+    )
+  }
+
+  const base = outboundRE.test(docsRepo)
+    ? docsRepo
+    : `https://github.com/${docsRepo}`
+
+  return (
+    base.replace(endingSlashRE, '') +
+    `/edit` +
+    `/${docsBranch}/` +
+    (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+    path
+  )
+}
+
+function resolvePrev (page, items) {
+  return find(page, items, -1)
+}
+
+function resolveNext (page, items) {
+  return find(page, items, 1)
+}
+
+function find (page, items, offset) {
+  const res = []
+  flatten(items, res)
+  for (let i = 0; i < res.length; i++) {
+    const cur = res[i]
+    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
+      return res[i + offset]
+    }
+  }
+}
+
+function flatten (items, res) {
+  for (let i = 0, l = items.length; i < l; i++) {
+    if (items[i].type === 'group') {
+      flatten(items[i].children || [], res)
+    } else {
+      res.push(items[i])
+    }
+  }
+}
+
+</script>
+
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page
+  position relative
+  padding-top 5rem
+  padding-bottom 2rem
+  padding-right 14rem
+  display block
+  .side-bar
+    position fixed
+    top 10rem
+    bottom 10rem
+    right 2rem
+    overflow-y scroll
+    &::-webkit-scrollbar
+      width: 0
+      height: 0
+  .page-title
+    max-width: $contentWidth;
+    margin: 0 auto;
+    padding: 1rem 2.5rem;
+    color var(--text-color)
+  .theme-reco-content h2
+    position relative
+    padding-left 0.8rem
+    &::before
+      position absolute
+      left 0
+      top 3.5rem
+      display block
+      height 1.8rem
+      content ''
+      border-left 5px solid $accentColor
+  .page-edit
+    @extend $wrapper
+    padding-top 1rem
+    padding-bottom 1rem
+    overflow auto
+    .edit-link
+      display inline-block
+      a
+        color $accentColor
+        margin-right 0.25rem
+    .last-updated
+      float right
+      font-size 0.9em
+      .prefix
+        font-weight 500
+        color $accentColor
+      .time
+        font-weight 400
+        color #aaa
+  .comments-wrapper
+    @extend $wrapper
+
+.page-nav
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 0
+  .inner
+    min-height 2rem
+    margin-top 0
+    border-top 1px solid var(--border-color)
+    padding-top 1rem
+    overflow auto // clear float
+  .next
+    float right
+
+@media (max-width: $MQMobile)
+  .page
+    padding-right 0
+    .side-bar
+      display none
+    .page-title
+      padding: 0 1rem;
+    .page-edit
+      .edit-link
+        margin-bottom .5rem
+      .last-updated
+        font-size .8em
+        float none
+        text-align left
+
+</style>
diff --git a/docs/.vuepress/theme/components/PageFooter.vue b/docs/.vuepress/theme/components/PageFooter.vue
new file mode 100644
index 0000000000..219816a2ef
--- /dev/null
+++ b/docs/.vuepress/theme/components/PageFooter.vue
@@ -0,0 +1,87 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="page-footer">
+    <ul class="apache-list" v-if="asfList">
+      <li class="apache-item" v-for="asfItem in asfList" :key="asfItem.link">
+        <a :href="asfItem.link" target="_blank">{{ asfItem.text }}</a>
+      </li>
+    </ul>
+    <div class="footer-copyright">
+      <p class="wow fadeInUp">Copyright © 2022 The Apache Software Foundation. Licensed under the Apache License, Version 2.0. Apache <br/> Doris(Incubating), Apache Incubator, Apache, the Apache feather logo, the Apache Doris(Incubating) logo and the <br/>Apache Incubator project logo are trademarks of The Apache Software Foundation.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from "vue-demi";
+import { useInstance } from "@theme/helpers/composable";
+
+export default defineComponent({
+  setup(props, ctx) {
+    const instance = useInstance();
+    const asfList = computed(() => {
+      const { $themeLocaleConfig } = instance;
+      const navs = $themeLocaleConfig.nav;
+      if (!navs) return
+      const asf = navs.find((nav) => nav.text === "ASF");
+      return asf.items;
+    });
+
+    return { asfList };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.apache-list {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    .apache-item {
+        list-style none;
+        padding: 0 20px;
+        a {
+            font-weight: normal;
+            font-size: 14px;
+            color: #3eaf7c !important;
+            &:hover {
+                color: #3eaf7c !important;
+            }
+        }
+    }
+}
+.footer-copyright {
+    color: #888888;
+    text-align: center;
+    font-size: 14px;
+    p {
+        line-height: 1.6;
+        margin: 0 0 10px 0;
+    }
+}
+@media (max-width: $MQMobile) {
+    .apache-list {
+        justify-content: flex-start;
+    }
+    .footer-copyright {
+        padding: 0 12px;
+        text-align: center;
+    }
+}
+</style>
diff --git a/docs/.vuepress/theme/components/PageInfo.vue b/docs/.vuepress/theme/components/PageInfo.vue
new file mode 100644
index 0000000000..29e1622c4c
--- /dev/null
+++ b/docs/.vuepress/theme/components/PageInfo.vue
@@ -0,0 +1,122 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div>
+    <reco-icon
+      v-if="pageInfo.frontmatter.author || $themeConfig.author"
+      icon="reco-account"
+    >
+      <span>{{ pageInfo.frontmatter.author || $themeConfig.author }}</span>
+    </reco-icon>
+    <reco-icon
+      v-if="pageInfo.frontmatter.date"
+      icon="reco-date"
+    >
+      <span>{{ formatDateValue(pageInfo.frontmatter.date) }}</span>
+    </reco-icon>
+    <reco-icon
+      v-if="showAccessNumber === true"
+      icon="reco-eye"
+    >
+      <AccessNumber :idVal="pageInfo.path" :numStyle="numStyle" />
+    </reco-icon>
+    <reco-icon
+      v-if="pageInfo.frontmatter.tags"
+      icon="reco-tag"
+      class="tags"
+    >
+      <span
+        v-for="(subItem, subIndex) in pageInfo.frontmatter.tags"
+        :key="subIndex"
+        class="tag-item"
+        :class="{ 'active': currentTag == subItem }"
+        @click.stop="goTags(subItem)"
+      >{{subItem}}</span>
+    </reco-icon>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { RecoIcon },
+  props: {
+    pageInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    currentTag: {
+      type: String,
+      default: ''
+    },
+    showAccessNumber: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const numStyle = {
+      fontSize: '.9rem',
+      fontWeight: 'normal',
+      color: '#999'
+    }
+
+    const goTags = (tag) => {
+      if (instance.$route.path !== `/tag/${tag}/`) {
+        instance.$router.push({ path: `/tag/${tag}/` })
+      }
+    }
+
+    const formatDateValue = (value) => {
+      return new Intl.DateTimeFormat(instance.$lang).format(new Date(value))
+    }
+
+    return { numStyle, goTags, formatDateValue }
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.iconfont
+  display inline-block
+  line-height 1.5rem
+  &:not(:last-child)
+    margin-right 1rem
+  span
+    margin-left 0.5rem
+.tags
+  .tag-item
+    font-family Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
+    cursor pointer
+    &.active
+      color $accentColor
+    &:hover
+      color $accentColor
+@media (max-width: $MQMobile)
+  .tags
+    display block
+    margin-left 0 !important
+</style>
diff --git a/docs/.vuepress/theme/components/Password.vue b/docs/.vuepress/theme/components/Password.vue
new file mode 100644
index 0000000000..5fed65c0b0
--- /dev/null
+++ b/docs/.vuepress/theme/components/Password.vue
@@ -0,0 +1,339 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+  <div class="password-shadow">
+    <ModuleTransition>
+      <h3 v-show="recoShowModule" class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.08">
+      <p class="description" v-if="recoShowModule && !isPage">{{$site.description || $localeConfig.description}}</p>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.16">
+      <label v-show="recoShowModule" class="inputBox" id="box">
+        <input
+          v-model="key"
+          type="password"
+          @keyup.enter="inter"
+          @focus="inputFocus"
+          @blur="inputBlur">
+        <span>{{warningText}}</span>
+        <button ref="passwordBtn" @click="inter">OK</button>
+      </label>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.24">
+      <div v-show="recoShowModule" class="footer">
+        <span>
+          <reco-icon icon="reco-theme" />
+          <a target="blank" href="https://vuepress-theme-reco.recoluan.com">vuePress-theme-reco</a>
+        </span>
+        <span>
+          <reco-icon icon="reco-copyright" />
+          <a>
+            <span v-if="$themeConfig.author">{{ $themeConfig.author }}</span>
+            &nbsp;&nbsp;
+            <span v-if="$themeConfig.startYear && $themeConfig.startYear != year">{{ $themeConfig.startYear }} - </span>
+            {{ year }}
+          </a>
+        </span>
+      </div>
+    </ModuleTransition>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, toRefs, computed } from 'vue-demi'
+import md5 from 'md5'
+import { ModuleTransition, RecoIcon } from '@vuepress-reco/core/lib/components'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  name: 'Password',
+  components: { ModuleTransition, RecoIcon },
+  props: {
+    isPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props, ctx) {
+    const instance = useInstance()
+
+    const year = new Date().getFullYear()
+
+    const key = ref('')
+    const warningText = ref('Konck! Knock!')
+    const recoShowModule = computed(() => instance?.$parent?.recoShowModule)
+    const { isPage } = toRefs(props)
+
+    const isHasKey = () => {
+      let { keys } = instance.$themeConfig.keyPage
+      keys = keys.map(item => item.toLowerCase())
+      return keys.indexOf(sessionStorage.getItem('key')) > -1
+    }
+    const isHasPageKey = () => {
+      const pageKeys = instance.$frontmatter.keys.map(item => item.toLowerCase())
+      const pageKey = `pageKey${window.location.pathname}`
+
+      return pageKeys && pageKeys.indexOf(sessionStorage.getItem(pageKey)) > -1
+    }
+
+    const inter = () => {
+      const keyVal = md5(key.value.trim())
+      const pageKey = `pageKey${window.location.pathname}`
+      const keyName = isPage.value ? pageKey : 'key'
+      sessionStorage.setItem(keyName, keyVal)
+      const isKeyTrue = isPage.value ? isHasPageKey() : isHasKey()
+      if (!isKeyTrue) {
+        warningText.value = 'Key Error'
+        return
+      }
+
+      warningText.value = 'Key Success'
+
+      const width = document.getElementById('box').style.width
+
+      instance.$refs.passwordBtn.style.width = `${width - 2}px`
+      instance.$refs.passwordBtn.style.opacity = 1
+
+      setTimeout(() => {
+        window.location.reload()
+      }, 800)
+    }
+
+    const inputFocus = () => {
+      warningText.value = 'Input Your Key'
+    }
+
+    const inputBlur = () => {
+      warningText.value = 'Konck! Knock!'
+    }
+
+    return { warningText, year, key, recoShowModule, inter, inputFocus, inputBlur }
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.password-shadow {
+  overflow hidden
+  position relative
+  background #fff
+  background var(--background-color)
+  box-sizing border-box
+  .title {
+    margin 8rem auto 2rem
+    width 100%
+    text-align center
+    font-size 30px
+    box-sizing: border-box;
+    text-shadow $textShadow
+    color $textColor
+    color var(--text-color)
+  }
+  .description {
+    margin 0 auto 6rem
+    text-align center
+    color $textColor
+    color var(--text-color)
+    font-size 22px
+    box-sizing: border-box;
+    padding: 0 10px;
+    text-shadow $textShadow
+  }
+  .inputBox{
+    position absolute
+    top 40%
+    left 0
+    right 0
+    margin auto
+    display block
+    max-width:700px;
+    height: 100px;
+    background: $accentColor;
+    border-radius: $borderRadius
+    padding-left 20px
+    box-sizing border-box
+    opacity 0.9
+    input{
+      width:570px;
+      height:100%;
+      border:none;
+      padding:0;
+      padding-left:5px;
+      color: #fff;
+      background: none;
+      outline: none;
+      position: absolute;
+      bottom:0;
+      left 20px
+      opacity 0
+      font-size 50px
+      &:focus {
+        opacity 1
+      }
+      &:focus~span{
+        transform: translateY(-80px);
+        color $accentColor
+        font-size 30px
+        opacity:0.8;
+      }
+      &:focus~button{
+        opacity:1;
+        width:100px;
+      }
+    }
+    span{
+      width:200px;
+      height: 100%;
+      display: block;
+      position: absolute;
+      line-height:100px;
+      top:0;
+      left:20px;
+      color: #fff;
+      cursor: text;
+      transition: 0.5s;
+      transform-origin: left top;
+      font-size 30px
+    }
+    button{
+      overflow hidden
+      width:0px;
+      height:98px;
+      border-radius: $borderRadius
+      position: absolute;
+      border 1px solid $accentColor
+      background var(--background-color)
+      right:1px;
+      top 1px
+      border:0;
+      padding:0;
+      color: $accentColor;
+      font-size:18px;
+      outline:none;
+      cursor: pointer;
+      opacity:0;
+      transition: 0.5s;
+      z-index: 1;
+    }
+  }
+  .footer {
+    position: absolute;
+    left 0
+    right 0
+    bottom 10%
+    padding: 2.5rem;
+    text-align: center;
+    color: lighten($textColor, 25%);
+    > span {
+      margin-left 1rem
+      > i {
+        margin-right .5rem
+      }
+    }
+  }
+  @media (max-width: $MQMobile) {
+    .inputBox{
+      max-width:700px;
+      height: 60px;
+      background: $accentColor;
+      border-radius: $borderRadius
+      position: absolute;
+      left 0
+      right 0
+      top 43%
+      margin auto 20px
+      padding-left 0
+      box-sizing border-box
+      opacity 0.9
+      input{
+        width: 60%;
+        height:100%;
+        border:none;
+        padding:0;
+        padding-left:5px;
+        color: #fff;
+        background: none;
+        outline: none;
+        position: absolute;
+        bottom:0;
+        opacity 0
+        font-size 30px
+        &:focus {
+          opacity 1
+        }
+        &:focus~span{
+          transform: translateY(-60px);
+          color $accentColor
+          font-size 20px
+          opacity:0.8;
+        }
+        &:focus~button{
+          opacity:1;
+          width:60px;
+        }
+      }
+      span{
+        width:200px;
+        height: 100%;
+        display: block;
+        position: absolute;
+        line-height:60px;
+        top:0;
+        left:20px;
+        color: #fff;
+        cursor: text;
+        transition: 0.5s;
+        transform-origin: left top;
+        font-size 20px
+      }
+      button{
+        width:0px;
+        height:58px;
+        border-radius: $borderRadius
+        position: absolute;
+        border 1px solid $accentColor
+        right:1px;
+        top 1px
+        border:0;
+        padding:0;
+        background: #fff;
+        color: $accentColor;
+        font-size:18px;
+        outline:none;
+        cursor: pointer;
+        opacity:0;
+        transition: 0.5s;
+        z-index: 1;
+      }
+    }
+    .footer {
+      margin-left 0
+
+    }
+  }
+  @media (max-width: $MQNarrow) {
+    .footer {
+      margin-left 0
+    }
+  }
+}
+</style>
diff --git a/docs/.vuepress/theme/components/PersonalInfo.vue b/docs/.vuepress/theme/components/PersonalInfo.vue
new file mode 100644
index 0000000000..92144a9632
--- /dev/null
+++ b/docs/.vuepress/theme/components/PersonalInfo.vue
@@ -0,0 +1,133 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<template>
+<div class="personal-info-wrapper">
+  <img
+    class="personal-img"
+    v-if="$themeConfig.authorAvatar"
+    :src="$withBase($themeConfig.authorAvatar)"
+    alt="author-avatar"
+  >
+  <h3
+    class="name"
+    v-if="$themeConfig.author"
+  >
+    {{ $themeConfig.author }}
+  </h3>
+  <div class="num">
+    <div>
+      <h3>{{$recoPosts.length}}</h3>
+      <h6>{{$recoLocales.article}}</h6>
+    </div>
+    <div>
+      <h3>{{$tags.list.length}}</h3>
+      <h6>{{$recoLocales.tag}}</h6>
+    </div>
+  </div>
+  <ul class="social-links">
+    <li
+      class="social-item"
+      v-for="(item, index) in socialLinks"
+      :key="index"
+    >
+      <reco-icon :icon="item.icon" :link="item.link" :style="{ color: item.color }" />
+    </li>
+  </ul>
+  <hr>
+</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue-demi'
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import { getOneColor } from '@theme/helpers/other'
+import { useInstance } from '@theme/helpers/composable'
+
+export default defineComponent({
+  components: { RecoIcon },
+  setup (props, ctx) {
+    const instance = useInstance()
+    const socialLinks = computed(() => (instance.$themeConfig.blogConfig && instance.$themeConfig.blogConfig.socialLinks || []).map(item => {
+      if (!item.color) item.color = getOneColor()
+      return item
+    }))
+
+    return { socialLinks }
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.personal-info-wrapper {
+  .personal-img {
+    display block
+    margin 2rem auto 1rem
+    width 6rem
+    height 6rem
+    border-radius 50%
... 11112 lines suppressed ...


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@doris.apache.org
For additional commands, e-mail: commits-help@doris.apache.org