refactor: styles and i18n for documents site

2025-05-11 02:15:48 +02:00 · 2023-05-05 23:08:03 +08:00 · 2023-05-05 23:08:03 +08:00 · a2fe98e1a2
commit a2fe98e1a2
parent 5b34f0f052
14 changed files with 493 additions and 107 deletions
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@ -1,103 +0,0 @@
-import {defineConfig} from 'vitepress'
-
-// https://vitepress.dev/reference/site-config
-
-function thisYear() {
-    return new Date().getFullYear()
-}
-
-export default defineConfig({
-    lang: 'en-US',
-    title: 'Nginx UI',
-    description: 'Yet another Nginx Web UI',
-
-    lastUpdated: true,
-
-    locales: {
-        root: {
-            label: 'English',
-            lang: 'en'
-        },
-        zh_CN: {
-            label: '简体中文',
-            lang: 'zh_CN'
-        }
-    },
-
-    themeConfig: {
-        // https://vitepress.dev/reference/default-theme-config
-        nav: [
-            {text: 'Home', link: '/'},
-            {text: 'Guide', link: '/guide/about'},
-            {text: 'Demo', link: 'https://demo.nginxui.com'}
-        ],
-
-        sidebar: sidebar(),
-
-        editLink: {
-            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/frontend/docs/:path'
-        },
-
-        search: {
-            provider: 'local'
-        },
-
-        footer: {
-            message: 'Released under the AGPL-3.0 License.',
-            copyright: 'Copyright © 2021-' + thisYear() + ' Nginx UI Team'
-        },
-
-        socialLinks: [
-            {icon: 'github', link: 'https://github.com/0xJacky/nginx-ui'}
-        ]
-    }
-})
-
-function sidebar() {
-    return {
-        '/guide/': [
-            {
-                text: 'Introduction',
-                collapsed: false,
-                items: [
-                    {text: 'What is Nginx UI?', link: '/guide/about'},
-                    {text: 'Getting Started', link: '/guide/getting-started'},
-                    {text: 'Nginx Proxy Example', link: '/guide/nginx-proxy-example'},
-                    {text: 'Contributing', link: '/guide/contributing'},
-                    {text: 'License', link: '/guide/license'}
-                ]
-            },
-            {
-                text: 'Configuration',
-                collapsed: false,
-                items: [
-                    {text: 'Server', link: '/guide/config-server'},
-                    {text: 'Nginx Log', link: '/guide/config-nginx-log'},
-                    {text: 'Open AI', link: '/guide/config-openai'}
-                ]
-            }
-        ],
-        '/zh_CN/guide/': [
-            {
-                text: '介绍',
-                collapsed: false,
-                items: [
-                    {text: '何为 Nginx UI?', link: '/zh_CN/guide/about'},
-                    {text: '即刻开始', link: '/zh_CN/guide/getting-started'},
-                    {text: 'Nginx 代理示例', link: '/zh_CN/guide/nginx-proxy-example'},
-                    {text: '贡献代码', link: '/zh_CN/guide/contributing'},
-                    {text: '开源协议', link: '/zh_CN/guide/license'}
-                ]
-            },
-            {
-                text: '配置',
-                collapsed: false,
-                items: [
-                    {text: '服务端', link: '/zh_CN/guide/config-server'},
-                    {text: 'Nginx 日志', link: '/zh_CN/guide/config-nginx-log'},
-                    {text: 'Open AI', link: '/zh_CN/guide/config-openai'}
-                ]
-            }
-        ]
-    }
-}
--- a/docs/.vitepress/config/en.ts
+++ b/docs/.vitepress/config/en.ts
@ -0,0 +1,36 @@
+import {LocaleSpecificConfig, DefaultTheme} from "vitepress"
+
+export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+    themeConfig: {
+        nav: [
+            {text: 'Home', link: '/'},
+            {text: 'Guide', link: '/guide/about'},
+            {text: 'Demo', link: 'https://demo.nginxui.com'}
+        ],
+
+        sidebar: {
+            '/guide/': [
+                {
+                    text: 'Introduction',
+                    collapsed: false,
+                    items: [
+                        {text: 'What is Nginx UI?', link: '/guide/about'},
+                        {text: 'Getting Started', link: '/guide/getting-started'},
+                        {text: 'Nginx Proxy Example', link: '/guide/nginx-proxy-example'},
+                        {text: 'Contributing', link: '/guide/contributing'},
+                        {text: 'License', link: '/guide/license'}
+                    ]
+                },
+                {
+                    text: 'Configuration',
+                    collapsed: false,
+                    items: [
+                        {text: 'Server', link: '/guide/config-server'},
+                        {text: 'Nginx Log', link: '/guide/config-nginx-log'},
+                        {text: 'Open AI', link: '/guide/config-openai'}
+                    ]
+                }
+            ],
+        },
+    }
+}
--- a/docs/.vitepress/config/index.ts
+++ b/docs/.vitepress/config/index.ts
@ -0,0 +1,12 @@
+import { defineConfig } from 'vitepress'
+import { sharedConfig } from './shared'
+import { enConfig } from "./en"
+import { zhCNConfig } from "./zh_CN"
+
+export default defineConfig({
+    ...sharedConfig,
+    locales: {
+        root: { label: 'English', lang: 'en', ...enConfig },
+        zh_CN: { label: '简体中文', lang: 'zh-CN', ...zhCNConfig }
+    }
+})
--- a/docs/.vitepress/config/shared.ts
+++ b/docs/.vitepress/config/shared.ts
@ -0,0 +1,33 @@
+import { defineConfig } from 'vitepress'
+
+function thisYear() {
+    return new Date().getFullYear()
+}
+
+export const sharedConfig = defineConfig({
+    title: 'Nginx UI',
+    description: 'Yet another Nginx Web UI',
+
+    lastUpdated: true,
+
+    themeConfig: {
+        logo: '/logo.svg',
+
+        search: {
+            provider: 'local'
+        },
+
+        editLink: {
+            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/docs/:path'
+        },
+
+        footer: {
+            message: 'Released under the AGPL-3.0 License.',
+            copyright: 'Copyright © 2021-' + thisYear() + ' Nginx UI Team'
+        },
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/0xJacky/nginx-ui'}
+        ]
+    }
+})
--- a/docs/.vitepress/config/zh_CN.ts
+++ b/docs/.vitepress/config/zh_CN.ts
@ -0,0 +1,76 @@
+import {LocaleSpecificConfig, DefaultTheme} from "vitepress"
+
+export const zhCNConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+    themeConfig: {
+        nav: [
+            {text: '首页', link: '/zh_CN/'},
+            {text: '手册', link: '/zh_CN/guide/about'},
+            {text: '演示', link: 'https://demo.nginxui.com'}
+        ],
+
+        editLink: {
+            text: '编辑此页',
+            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/docs/:path'
+        },
+
+        sidebar: {
+            '/zh_CN/guide/': [
+                {
+                    text: '介绍',
+                    collapsed: false,
+                    items: [
+                        {text: '何为 Nginx UI?', link: '/zh_CN/guide/about'},
+                        {text: '即刻开始', link: '/zh_CN/guide/getting-started'},
+                        {text: 'Nginx 代理示例', link: '/zh_CN/guide/nginx-proxy-example'},
+                        {text: '贡献代码', link: '/zh_CN/guide/contributing'},
+                        {text: '开源协议', link: '/zh_CN/guide/license'}
+                    ]
+                },
+                {
+                    text: '配置',
+                    collapsed: false,
+                    items: [
+                        {text: '服务端', link: '/zh_CN/guide/config-server'},
+                        {text: 'Nginx 日志', link: '/zh_CN/guide/config-nginx-log'},
+                        {text: 'Open AI', link: '/zh_CN/guide/config-openai'}
+                    ]
+                }
+            ]
+        },
+
+        docFooter: {
+            prev: '上一页',
+            next: '下一页',
+        },
+        returnToTopLabel: '返回顶部',
+        outlineTitle: '导航栏',
+        darkModeSwitchLabel: '外观',
+        sidebarMenuLabel: '归档',
+        lastUpdatedText: '更新于',
+
+        search: {
+            provider: 'local',
+            options: {
+                locales: {
+                    zh_CN: {
+                        translations: {
+                            button: {
+                                buttonText: '搜索文档',
+                                buttonAriaLabel: '搜索文档'
+                            },
+                            modal: {
+                                noResultsText: '无法找到相关结果',
+                                resetButtonTitle: '清除查询条件',
+                                footer: {
+                                    selectText: '选择',
+                                    navigateText: '切换',
+                                    closeText: '关闭'
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@ -0,0 +1,12 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+    <Layout />
+</template>
+
+<style scoped lang="less">
+
+</style>
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@ -0,0 +1,8 @@
+import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
+import './styles/custom.less'
+
+export default {
+    extends: DefaultTheme,
+    Layout: Layout
+}
--- a/docs/.vitepress/theme/styles/custom.less
+++ b/docs/.vitepress/theme/styles/custom.less
@ -0,0 +1,123 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+@brand-color: #3682D8;
+@brand-gradient-color: #00D2FF;
+
+:root {
+    --vp-c-brand: @brand-color;
+    --vp-c-brand-light: lighten(@brand-color, 8%);
+    --vp-c-brand-lighter: lighten(@brand-color, 16%);
+    --vp-c-brand-lightest: lighten(@brand-color, 24%);
+    --vp-c-brand-dark: darken(@brand-color, 8%);
+    --vp-c-brand-darker: darken(@brand-color, 16%);
+    --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-button-brand-border: var(--vp-c-brand-light);
+    --vp-button-brand-text: var(--vp-c-text-dark-1);
+    --vp-button-brand-bg: var(--vp-c-brand);
+    --vp-button-brand-hover-border: var(--vp-c-brand-light);
+    --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
+    --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+    --vp-button-brand-active-border: var(--vp-c-brand-light);
+    --vp-button-brand-active-text: var(--vp-c-text-dark-1);
+    --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(
+        120deg,
+        @brand-color 30%,
+        @brand-gradient-color
+    );
+
+    --vp-home-hero-image-background-image: linear-gradient(
+        -45deg,
+        @brand-color 50%,
+        @brand-gradient-color 50%
+    );
+    --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+    :root {
+        --vp-home-hero-image-filter: blur(56px);
+    }
+}
+
+@media (min-width: 960px) {
+    :root {
+        --vp-home-hero-image-filter: blur(72px);
+    }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-custom-block-tip-border: var(--vp-c-brand);
+    --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+.dark {
+    --vp-custom-block-tip-border: var(--vp-c-brand);
+    --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+    --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+
+/**
+ * VitePress: Custom fix
+ * -------------------------------------------------------------------------- */
+
+/*
+  Use lighter colors for links in dark mode for a11y.
+  Also specify some classes twice to have higher specificity
+  over scoped class data attribute.
+*/
+.dark .vp-doc a,
+.dark .vp-doc a > code,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
+.dark .link.link:hover,
+.dark .link.link.active,
+.dark .edit-link-button.edit-link-button,
+.dark .pager-link .title {
+    color: var(--vp-c-brand-lighter);
+}
+
+.dark .vp-doc a:hover,
+.dark .vp-doc a > code:hover {
+    color: var(--vp-c-brand-lightest);
+    opacity: 1;
+}
+
+/* Transition by color instead of opacity */
+.dark .vp-doc .custom-block a {
+    transition: color 0.25s;
+}
+
+.VPNavBar {
+    white-space: nowrap;
+}
--- a/docs/index.md
+++ b/docs/index.md
@ -9,6 +9,9 @@ hero:
    name: "Nginx UI"
    text: "Yet another Nginx Web UI"
    tagline: Simple, powerful, and fast.
+    image:
+        src: /icon.svg
+        alt: Nginx UI
    actions:
        -   theme: brand
            text: Get Started
--- a/docs/package.json
+++ b/docs/package.json
@ -8,5 +8,9 @@
    },
    "dependencies": {
        "vitepress": "^1.0.0-alpha.75"
+    },
+    "devDependencies": {
+        "less": "^4.1.3",
+        "less-loader": "^11.1.0"
    }
 }
--- a/docs/public/Icon.svg
+++ b/docs/public/Icon.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><style>.e{fill:#fff;fill-rule:evenodd;}.f{fill:url(#c);}</style><radialGradient id="c" cx="257.68" cy="166.3" fx="257.68" fy="166.3" r="388.1" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00d2ff"/><stop offset=".34" stop-color="#3682d8"/></radialGradient></defs><path id="b" class="e" d="M453.68,15.23C435.1,5.29,416.68,0,365.86,0H146.14C95.32,0,76.9,5.29,58.32,15.23,39.74,25.16,25.16,39.74,15.23,58.32,5.29,76.9,0,95.32,0,146.14v219.72c0,50.82,5.29,69.24,15.23,87.82,9.94,18.58,24.52,33.16,43.09,43.09,18.58,9.94,37.01,15.23,87.82,15.23h219.72c50.82,0,69.24-5.29,87.82-15.23,18.58-9.94,33.16-24.52,43.09-43.09,9.94-18.58,15.23-37.01,15.23-87.82V146.14c0-50.82-5.29-69.24-15.23-87.82-9.94-18.58-24.52-33.16-43.09-43.09Z"/><path id="d" class="f" d="M189.14,139.38l133.32,191.73h.99V139.38h27.06v235.62h-27.72L188.81,181.29h-.99v193.71h-27.06V139.38h28.38Z"/></svg>
--- a/docs/public/logo.svg
+++ b/docs/public/logo.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 311 356"><defs><style>.f{fill:url(#b);filter:url(#c);}</style><radialGradient id="b" cx="157.68" cy="87.3" fx="157.68" fy="87.3" r="388.1" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00d2ff"/><stop offset=".34" stop-color="#3682d8"/></radialGradient><filter id="c" filterUnits="userSpaceOnUse"><feOffset dx="0" dy="0"/><feGaussianBlur result="d" stdDeviation="20"/><feFlood flood-color="#fff" flood-opacity=".5"/><feComposite in2="d" operator="in"/><feComposite in="SourceGraphic"/></filter></defs><path id="e" class="f" d="M89.14,60.38L222.46,252.11h.99V60.38h27.06v235.62h-27.72L88.81,102.29h-.99v193.71h-27.06V60.38h28.38Z"/></svg>
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -777,6 +777,15 @@ __metadata:
  languageName: node
  linkType: hard

+"copy-anything@npm:^2.0.1":
+  version: 2.0.6
+  resolution: "copy-anything@npm:2.0.6"
+  dependencies:
+    is-what: ^3.14.1
+  checksum: 7318dc00ca14f846d14fc886845cff63bf20a3c5f4fcdd31f68c40a213648c78a1093426947ac0f8f8577845e9a7a11eeaaeefb05d9a6f1b78ca5ec60c2aaf6e
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^2.6.8":
  version: 2.6.21
  resolution: "csstype@npm:2.6.21"
@ -796,6 +805,15 @@ __metadata:
  languageName: node
  linkType: hard

+"debug@npm:^3.2.6":
+  version: 3.2.7
+  resolution: "debug@npm:3.2.7"
+  dependencies:
+    ms: ^2.1.1
+  checksum: b3d8c5940799914d30314b7c3304a43305fd0715581a919dacb8b3176d024a782062368405b47491516d2091d6462d4d11f2f4974a405048094f8bfebfa3071c
+  languageName: node
+  linkType: hard
+
 "delegates@npm:^1.0.0":
  version: 1.0.0
  resolution: "delegates@npm:1.0.0"
@ -814,6 +832,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "docs@workspace:."
  dependencies:
+    less: ^4.1.3
+    less-loader: ^11.1.0
    vitepress: ^1.0.0-alpha.75
  languageName: unknown
  linkType: soft
@ -848,6 +868,17 @@ __metadata:
  languageName: node
  linkType: hard

+"errno@npm:^0.1.1":
+  version: 0.1.8
+  resolution: "errno@npm:0.1.8"
+  dependencies:
+    prr: ~1.0.1
+  bin:
+    errno: cli.js
+  checksum: 1271f7b9fbb3bcbec76ffde932485d1e3561856d21d847ec613a9722ee924cdd4e523a62dc71a44174d91e898fe21fdc8d5b50823f4b5e0ce8c35c8271e6ef4a
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.17.5":
  version: 0.17.18
  resolution: "esbuild@npm:0.17.18"
@ -1010,7 +1041,7 @@ __metadata:
  languageName: node
  linkType: hard

-"graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.2.6":
  version: 4.2.11
  resolution: "graceful-fs@npm:4.2.11"
  checksum: ac85f94da92d8eb6b7f5a8b20ce65e43d66761c55ce85ac96df6865308390da45a8d3f0296dd3a663de65d30ba497bd46c696cc1e248c72b13d6d567138a4fc7
@ -1061,7 +1092,7 @@ __metadata:
  languageName: node
  linkType: hard

-"iconv-lite@npm:^0.6.2":
+"iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
  version: 0.6.3
  resolution: "iconv-lite@npm:0.6.3"
  dependencies:
@ -1070,6 +1101,15 @@ __metadata:
  languageName: node
  linkType: hard

+"image-size@npm:~0.5.0":
+  version: 0.5.5
+  resolution: "image-size@npm:0.5.5"
+  bin:
+    image-size: bin/image-size.js
+  checksum: 6709d5cb73e96d5097ae5e9aa746dd36d6a9c8cf645e7eecac72ea07dbd6f312a65183752762fa92e2f3b698d4ed8d85dd55bf5207b6367245996bd16576d8fe
+  languageName: node
+  linkType: hard
+
 "imurmurhash@npm:^0.1.4":
  version: 0.1.4
  resolution: "imurmurhash@npm:0.1.4"
@ -1129,6 +1169,13 @@ __metadata:
  languageName: node
  linkType: hard

+"is-what@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "is-what@npm:3.14.1"
+  checksum: a9a6ce92d33799f1ae0916c7afb6f8128a23ce9d28bd69d9ec3ec88910e7a1f68432e6236c3c8a4d544cf0b864675e5d828437efde60ee0cf8102061d395c1df
+  languageName: node
+  linkType: hard
+
 "isexe@npm:^2.0.0":
  version: 2.0.0
  resolution: "isexe@npm:2.0.0"
@ -1143,6 +1190,60 @@ __metadata:
  languageName: node
  linkType: hard

+"klona@npm:^2.0.4":
+  version: 2.0.6
+  resolution: "klona@npm:2.0.6"
+  checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7
+  languageName: node
+  linkType: hard
+
+"less-loader@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "less-loader@npm:11.1.0"
+  dependencies:
+    klona: ^2.0.4
+  peerDependencies:
+    less: ^3.5.0 || ^4.0.0
+    webpack: ^5.0.0
+  checksum: 041216e0a6d95e24c9724f470719db3eb70b3888c45b1a1e9cd55edabe8ae79709522cd6c6713b466b3e9948544074e2a5b2be50ac3ced5ff41dfa9675f3b182
+  languageName: node
+  linkType: hard
+
+"less@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "less@npm:4.1.3"
+  dependencies:
+    copy-anything: ^2.0.1
+    errno: ^0.1.1
+    graceful-fs: ^4.1.2
+    image-size: ~0.5.0
+    make-dir: ^2.1.0
+    mime: ^1.4.1
+    needle: ^3.1.0
+    parse-node-version: ^1.0.1
+    source-map: ~0.6.0
+    tslib: ^2.3.0
+  dependenciesMeta:
+    errno:
+      optional: true
+    graceful-fs:
+      optional: true
+    image-size:
+      optional: true
+    make-dir:
+      optional: true
+    mime:
+      optional: true
+    needle:
+      optional: true
+    source-map:
+      optional: true
+  bin:
+    lessc: bin/lessc
+  checksum: 1470fbec993a375eb28d729cd906805fd62b7a7f1b4f5b4d62d04e81eaba987a9373e74aa0b9fa9191149ebc0bfb42e2ea98a038555555b7b241c10a854067cc
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^6.0.0":
  version: 6.0.0
  resolution: "lru-cache@npm:6.0.0"
@ -1168,6 +1269,16 @@ __metadata:
  languageName: node
  linkType: hard

+"make-dir@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "make-dir@npm:2.1.0"
+  dependencies:
+    pify: ^4.0.1
+    semver: ^5.6.0
+  checksum: 043548886bfaf1820323c6a2997e6d2fa51ccc2586ac14e6f14634f7458b4db2daf15f8c310e2a0abd3e0cddc64df1890d8fc7263033602c47bb12cbfcf86aab
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^10.0.3":
  version: 10.2.1
  resolution: "make-fetch-happen@npm:10.2.1"
@ -1199,6 +1310,15 @@ __metadata:
  languageName: node
  linkType: hard

+"mime@npm:^1.4.1":
+  version: 1.6.0
+  resolution: "mime@npm:1.6.0"
+  bin:
+    mime: cli.js
+  checksum: fef25e39263e6d207580bdc629f8872a3f9772c923c7f8c7e793175cee22777bbe8bba95e5d509a40aaa292d8974514ce634ae35769faa45f22d17edda5e8557
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.1.1":
  version: 3.1.2
  resolution: "minimatch@npm:3.1.2"
@ -1317,7 +1437,7 @@ __metadata:
  languageName: node
  linkType: hard

-"ms@npm:^2.0.0":
+"ms@npm:^2.0.0, ms@npm:^2.1.1":
  version: 2.1.3
  resolution: "ms@npm:2.1.3"
  checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
@ -1333,6 +1453,19 @@ __metadata:
  languageName: node
  linkType: hard

+"needle@npm:^3.1.0":
+  version: 3.2.0
+  resolution: "needle@npm:3.2.0"
+  dependencies:
+    debug: ^3.2.6
+    iconv-lite: ^0.6.3
+    sax: ^1.2.4
+  bin:
+    needle: bin/needle
+  checksum: d6f3e8668bbaf943d28ced0ad843eff793b56025e80152e511fd02313b8974e4dd9674bcbe3d8f9aa31882adb190dafe29ea5fce03a92b4724adf4850070bcfc
+  languageName: node
+  linkType: hard
+
 "negotiator@npm:^0.6.3":
  version: 0.6.3
  resolution: "negotiator@npm:0.6.3"
@ -1401,6 +1534,13 @@ __metadata:
  languageName: node
  linkType: hard

+"parse-node-version@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "parse-node-version@npm:1.0.1"
+  checksum: c192393b6a978092c1ef8df2c42c0a02e4534b96543e23d335f1b9b5b913ac75473d18fe6050b58d6995c57fb383ee71a5cb8397e363caaf38a6df8215cc52fd
+  languageName: node
+  linkType: hard
+
 "path-is-absolute@npm:^1.0.0":
  version: 1.0.1
  resolution: "path-is-absolute@npm:1.0.1"
@ -1415,6 +1555,13 @@ __metadata:
  languageName: node
  linkType: hard

+"pify@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "pify@npm:4.0.1"
+  checksum: 9c4e34278cb09987685fa5ef81499c82546c033713518f6441778fbec623fc708777fe8ac633097c72d88470d5963094076c7305cafc7ad340aae27cfacd856b
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.1.10, postcss@npm:^8.4.23":
  version: 8.4.23
  resolution: "postcss@npm:8.4.23"
@ -1450,6 +1597,13 @@ __metadata:
  languageName: node
  linkType: hard

+"prr@npm:~1.0.1":
+  version: 1.0.1
+  resolution: "prr@npm:1.0.1"
+  checksum: 3bca2db0479fd38f8c4c9439139b0c42dcaadcc2fbb7bb8e0e6afaa1383457f1d19aea9e5f961d5b080f1cfc05bfa1fe9e45c97a1d3fd6d421950a73d3108381
+  languageName: node
+  linkType: hard
+
 "readable-stream@npm:^3.6.0":
  version: 3.6.2
  resolution: "readable-stream@npm:3.6.2"
@ -1507,6 +1661,22 @@ __metadata:
  languageName: node
  linkType: hard

+"sax@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "sax@npm:1.2.4"
+  checksum: d3df7d32b897a2c2f28e941f732c71ba90e27c24f62ee918bd4d9a8cfb3553f2f81e5493c7f0be94a11c1911b643a9108f231dd6f60df3fa9586b5d2e3e9e1fe
+  languageName: node
+  linkType: hard
+
+"semver@npm:^5.6.0":
+  version: 5.7.1
+  resolution: "semver@npm:5.7.1"
+  bin:
+    semver: ./bin/semver
+  checksum: 57fd0acfd0bac382ee87cd52cd0aaa5af086a7dc8d60379dfe65fea491fb2489b6016400813930ecd61fd0952dae75c115287a1b16c234b1550887117744dfaf
+  languageName: node
+  linkType: hard
+
 "semver@npm:^7.3.5":
  version: 7.5.0
  resolution: "semver@npm:7.5.0"
@ -1579,7 +1749,7 @@ __metadata:
  languageName: node
  linkType: hard

-"source-map@npm:^0.6.1":
+"source-map@npm:^0.6.1, source-map@npm:~0.6.0":
  version: 0.6.1
  resolution: "source-map@npm:0.6.1"
  checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2
@ -1652,6 +1822,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tslib@npm:^2.3.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^2.0.0":
  version: 2.0.1
  resolution: "unique-filename@npm:2.0.1"
--- a/docs/zh_CN/index.md
+++ b/docs/zh_CN/index.md
@ -9,6 +9,9 @@ hero:
    name: "Nginx UI"
    text: "Nginx 网络管理界面的新选择"
    tagline: 简单、强大、高速
+    image:
+        src: /icon.svg
+        alt: Nginx UI
    actions:
        -   theme: brand
            text: 即刻开始
				`@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><style>.e{fill:#fff;fill-rule:evenodd;}.f{fill:url(#c);}</style><radialGradient id="c" cx="257.68" cy="166.3" fx="257.68" fy="166.3" r="388.1" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00d2ff"/><stop offset=".34" stop-color="#3682d8"/></radialGradient></defs><path id="b" class="e" d="M453.68,15.23C435.1,5.29,416.68,0,365.86,0H146.14C95.32,0,76.9,5.29,58.32,15.23,39.74,25.16,25.16,39.74,15.23,58.32,5.29,76.9,0,95.32,0,146.14v219.72c0,50.82,5.29,69.24,15.23,87.82,9.94,18.58,24.52,33.16,43.09,43.09,18.58,9.94,37.01,15.23,87.82,15.23h219.72c50.82,0,69.24-5.29,87.82-15.23,18.58-9.94,33.16-24.52,43.09-43.09,9.94-18.58,15.23-37.01,15.23-87.82V146.14c0-50.82-5.29-69.24-15.23-87.82-9.94-18.58-24.52-33.16-43.09-43.09Z"/><path id="d" class="f" d="M189.14,139.38l133.32,191.73h.99V139.38h27.06v235.62h-27.72L188.81,181.29h-.99v193.71h-27.06V139.38h28.38Z"/></svg>