docs(wip): added zh_CN docs

2025-05-11 02:15:48 +02:00 · 2023-05-01 11:55:54 +08:00 · 2023-05-01 11:55:54 +08:00 · c14abb837f
commit c14abb837f
parent 2c675be774
16 changed files with 673 additions and 42 deletions
--- a/frontend/docs/.vitepress/cache/deps/_metadata.json
+++ b/frontend/docs/.vitepress/cache/deps/_metadata.json
@ -1,17 +1,17 @@
 {
-  "hash": "175b884a",
-  "browserHash": "66b03797",
+  "hash": "8f978f95",
+  "browserHash": "7414e922",
  "optimized": {
    "vue": {
      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
      "file": "vue.js",
-      "fileHash": "6bc8ca95",
+      "fileHash": "6db30e9f",
      "needsInterop": false
    },
    "@theme/index": {
      "src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
      "file": "@theme_index.js",
-      "fileHash": "9b5d66a8",
+      "fileHash": "e28de872",
      "needsInterop": false
    }
  },
--- a/frontend/docs/.vitepress/config.ts
+++ b/frontend/docs/.vitepress/config.ts
@ -10,6 +10,20 @@ 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: [
@ -18,27 +32,10 @@ export default defineConfig({
            {text: 'Demo', link: 'https://nginxui.jackyu.cn'}
        ],

-        sidebar: {
-            '/guide/': [
-                {
-                    text: 'Introduction',
-                    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',
-                    items: [
-                        {text: 'Server', link: '/guide/config-server'},
-                        {text: 'Nginx Log', link: '/guide/config-nginx-log'},
-                        {text: 'Open AI', link: '/guide/config-openai'}
-                    ]
-                }
-            ]
+        sidebar: sidebar(),
+
+        editLink: {
+            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/frontend/docs/:path'
        },

        search: {
@ -55,3 +52,52 @@ export default defineConfig({
        ]
    }
 })
+
+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/frontend/docs/guide/about.md
+++ b/frontend/docs/guide/about.md
@ -1,3 +1,26 @@
+<script setup>
+import { VPTeamMembers } from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://www.github.com/0xJacky.png',
+    name: '0xJacky',
+    title: 'Creator',
+    links: [
+      { icon: 'github', link: 'https://github.com/0xJacky' },
+    ]
+  },
+{
+    avatar: 'https://www.github.com/Hintay.png',
+    name: 'Hintay',
+    title: 'Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/Hintay' },
+    ]
+  },
+]
+</script>
+
 # What is Nginx UI?

 ![Dashboard](/dashboard_en.png)
@ -9,6 +32,10 @@ features such as online access to Nginx logs, automatic testing and reloading of
 dark mode, and responsive web design. Built with Go and Vue, Nginx UI ensures a seamless and efficient experience for
 managing your Nginx server.

+## Our Team
+
+<VPTeamMembers size="small" :members="members" />
+
 ## Demo

 URL：[https://nginxui.jackyu.cn](https://nginxui.jackyu.cn)
--- a/frontend/docs/guide/config-nginx-log.md
+++ b/frontend/docs/guide/config-nginx-log.md
@ -4,6 +4,39 @@ Nginx logs are essential for monitoring, troubleshooting, and maintaining your w
 insights into server performance, user behavior, and potential issues. In this section, we will discuss the two primary
 types of logs: access logs and error logs.

+For Nginx-UI Docker users who are upgrading from v1.5.2 or earlier versions, it is crucial to add separate `access_log`
+and `error_log` directives in your `nginx.conf` before configuring the `app.ini`.
+
+In the Nginx-UI container, `/var/log/nginx/access.log` is a symlink pointing to `/dev/stdout`,
+and `/var/log/nginx/error.log`
+is a symlink pointing to `/dev/stderr`. This setup allows you to view both the Nginx and Nginx-UI logs using the `docker
+logs nginx-ui` command. However, these two devices do not support the tail command, so it is necessary to use additional
+log files to record Nginx logs.
+
+Example:
+
+```nginx
+error_log /var/log/nginx/error.log notice;
+error_log /var/log/nginx/error.local.log notice;
+
+http {
+...
+    access_log /var/log/nginx/access.log main;
+    access_log /var/log/nginx/access.local.log main;
+...
+}
+```
+
+Additionally, set nginx access log and error log path in `app.ini` and restart nginx-ui.
+
+Example:
+
+```ini
+[nginx_log]
+AccessLogPath = /var/log/nginx/access.local.log
+ErrorLogPath = /var/log/nginx/error.local.log
+```
+
 ## AccessLogPath

 - Type: `string`
@ -15,4 +48,3 @@ This option is used to set the path of nginx access log for Nginx UI, so we can
 - Type: `string`

 This option is used to set the path of nginx error log for Nginx UI, so we can view the log content online.
-
--- a/frontend/docs/guide/config-server.md
+++ b/frontend/docs/guide/config-server.md
@ -56,7 +56,7 @@ terminal, please set it to `bash` or `zsh` (if installed).
 - Default: 10

 This option is used to set the page size of list pagination in the Nginx UI. Adjusting the page size can help in
-managing large amounts of data more effectively.
+managing large amounts of data more effectively, but a too large number can increase the load on the server.

 ## CADir

--- a/frontend/docs/zh_CN/guide/about.md
+++ b/frontend/docs/zh_CN/guide/about.md
@ -0,0 +1,76 @@
+<script setup>
+import { VPTeamMembers } from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://www.github.com/0xJacky.png',
+    name: '0xJacky',
+    title: '创始人',
+    links: [
+      { icon: 'github', link: 'https://github.com/0xJacky' },
+    ]
+  },
+{
+    avatar: 'https://www.github.com/Hintay.png',
+    name: 'Hintay',
+    title: '开发者',
+    links: [
+      { icon: 'github', link: 'https://github.com/Hintay' },
+    ]
+  },
+]
+</script>
+
+# 何为 Nginx UI?
+
+![Dashboard](/dashboard_zh_CN.png)
+
+Nginx UI 是一个全新的 Nginx 网络管理界面，旨在简化 Nginx 服务器的管理和配置。它提供实时服务器统计数据、ChatGPT
+助手、一键部署、Let's Encrypt 证书的自动续签以及用户友好的网站配置编辑工具。此外，Nginx UI 还提供了在线访问 Nginx
+日志、配置文件的自动测试和重载、网络终端、深色模式和自适应网页设计等功能。Nginx UI 采用 Go 和 Vue 构建，确保在管理 Nginx
+服务器时提供无缝高效的体验。
+
+## 我们的团队
+
+<VPTeamMembers size="small" :members="members" />
+
+## 在线预览
+
+网址：[https://nginxui.jackyu.cn](https://nginxui.jackyu.cn)
+
+- 用户名：admin
+- 密码：admin
+
+## 特色
+
+- 在线查看服务器 CPU、内存、系统负载、磁盘使用率等指标
+- 在线 ChatGPT 助理
+- 一键申请和自动续签 Let's encrypt 证书
+- 在线编辑 Nginx 配置文件，编辑器支持 Nginx 配置语法高亮
+- 在线查看 Nginx 日志
+- 使用 Go 和 Vue 开发，发行版本为单个可执行的二进制文件
+- 保存配置后自动测试配置文件并重载 Nginx
+- 基于网页浏览器的高级命令行终端
+- 支持深色模式
+- 自适应网页设计
+
+## 国际化
+
+- 英语
+- 简体中文
+- 繁体中文
+
+我们欢迎您将项目翻译成任何语言。
+
+## 构建基于
+
+- [The Go Programming Language](https://go.dev)
+- [Gin Web Framework](https://gin-gonic.com)
+- [GORM](http://gorm.io)
+- [Vue 3](https://v3.vuejs.org)
+- [Vite](https://vitejs.dev)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Ant Design Vue](https://antdv.com)
+- [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
+- [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
+- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)
--- a/frontend/docs/zh_CN/guide/config-nginx-log.md
+++ b/frontend/docs/zh_CN/guide/config-nginx-log.md
@ -0,0 +1,46 @@
+# Nginx 日志
+
+Nginx 日志对于监控、排查问题和维护您的 Web 服务器至关重要。它们提供了有关服务器性能、用户行为和潜在问题的宝贵见解。在本节中，我们将讨论两种主要类型的日志：访问日志和错误日志。
+
+对于从 v1.5.2 或更早版本升级的 Nginx-UI Docker 用户，在配置 `app.ini` 之前，至关重要的是在您的 `nginx.conf`
+中添加单独的 `access_log` 和 `error_log` 指令。
+
+在 Nginx-UI 容器中，`/var/log/nginx/access.log` 是一个指向 `/dev/stdout` 的符号链接，而 `/var/log/nginx/error.log`
+是一个指向 `/dev/stderr` 的符号链接。这种设置允许您使用 `docker logs nginx-ui` 命令查看 Nginx 和 Nginx-UI 日志。然而，这两个设备不支持
+tail 命令，因此有必要使用额外的日志文件来记录 Nginx 日志。
+
+示例：
+
+```nginx
+error_log /var/log/nginx/error.log notice;
+error_log /var/log/nginx/error.local.log notice;
+
+http {
+...
+    access_log /var/log/nginx/access.log main;
+    access_log /var/log/nginx/access.local.log main;
+...
+}
+```
+
+此外，在 `app.ini` 中设置 nginx 访问日志和错误日志路径，然后重新启动 nginx-ui。
+
+示例：
+
+```ini
+[nginx_log]
+AccessLogPath = /var/log/nginx/access.local.log
+ErrorLogPath = /var/log/nginx/error.local.log
+```
+
+## AccessLogPath
+
+- 类型：`string`
+
+此选项用于为 Nginx UI 设置 Nginx 访问日志的路径，以便我们在线查看日志内容。
+
+## ErrorLogPath
+
+- 类型：`string`
+
+此选项用于为 Nginx UI 设置 Nginx 错误日志的路径，以便我们在线查看日志内容。
--- a/frontend/docs/zh_CN/guide/config-openai.md
+++ b/frontend/docs/zh_CN/guide/config-openai.md
@ -0,0 +1,30 @@
+# Open AI
+
+本节用于设置 ChatGPT 配置。请注意，我们不会检查您提供的信息的准确性。如果配置错误，可能会导致 API 请求失败，导致 ChatGPT
+助手无法使用。
+
+## BaseUrl
+
+- 类型：`string`
+
+此选项用于设置 Open AI API 的基本 URL，如果不需要更改 URL，则将其保留为空。
+
+## Token
+
+- 类型：`string`
+
+此选项用于设置 Open AI API 的令牌。
+
+## Proxy
+
+- 类型：`string`
+
+此选项用于为 OpenAI 的 API 配置代理。如果您在国家或地区无法访问 OpenAI 的 API，可以使用 HTTP 代理并将此选项设置为相应的
+URL。
+
+## Model
+
+- 类型：`string`
+- 默认值：`gpt-3.5-turbo`
+
+此选项用于设置 ChatGPT 模型。如果您的帐户有权限访问 `gpt-4` 模型，可以相应地配置此选项。
--- a/frontend/docs/zh_CN/guide/config-server.md
+++ b/frontend/docs/zh_CN/guide/config-server.md
@ -0,0 +1,71 @@
+# 服务端
+
+Nginx UI 配置的服务端部分涉及控制 Nginx UI 服务器的各种设置。在本节中，我们将讨论可用的选项、它们的默认值以及它们的目的。
+
+## HttpPort
+
+- 类型：`int`
+- 默认值：`9000`
+
+Nginx UI 服务器监听端口。此选项用于配置 Nginx UI 服务器监听传入 HTTP 请求的端口。更改默认端口对于避免端口冲突或增强安全性可能很有用。
+
+## RunMode
+
+- 类型：`string`
+- 支持的值：`release`，`debug`
+
+::: tip
+目前，我们尚未适应此选项，在使用方面，`release` 和 `debug` 之间不会有显著差异。
+:::
+
+## HTTPChallengePort
+
+- 类型：`int`
+- 默认值：`9180`
+
+在获取 Let's Encrypt 证书时，此选项用于在 HTTP01 挑战模式中设置后端监听端口。HTTP01 挑战是 Let's Encrypt
+用于验证您控制请求证书的域的域验证方法。
+
+## Database
+
+- 类型：`string`
+- 默认值：`database`
+
+此选项用于设置 Nginx UI 用于存储其数据的 sqlite 数据库的名称。
+
+## StartCmd
+
+- 类型：`string`
+- 默认值：`login`
+
+此选项用于设置 Web 终端的启动命令。
+
+::: warning
+出于安全原因，我们将启动命令设置为 `login`，因此您必须通过 Linux 的默认身份验证方法登录。如果您不想每次访问 Web
+终端时都输入用户名和密码进行验证，请将其设置为 `bash` 或 `zsh`（如果已安装）。
+:::
+
+## PageSize
+
+- 类型：`int`
+- 默认值：10
+
+此选项用于设置 Nginx UI 中列表分页的页面大小。调整页面大小有助于更有效地管理大量数据,但是过大的数量可能会增加服务器的压力。
+
+## CADir
+
+- 类型：`string`
+
+在申请 Let's Encrypt 证书时，我们使用 Let's Encrypt 的默认 CA 地址。如果您需要调试或从其他提供商获取证书，您可以将 CADir
+设置为他们的地址。
+
+::: tip
+请注意，CADir 提供的地址需要符合 `RFC 8555` 标准。
+:::
+
+## GithubProxy
+
+- 类型：`string`
+- 建议：`https://ghproxy.com/`
+
+对于可能在从 Github 下载资源时遇到困难的中国大陆用户，此选项允许他们为 github.com 设置代理，以提高可访问性。
--- a/frontend/docs/zh_CN/guide/contributing.md
+++ b/frontend/docs/zh_CN/guide/contributing.md
@ -0,0 +1,12 @@
+# 贡献
+
+贡献使开源社区成为学习、启发和创造的绝佳场所。我们**非常感谢**您所做的任何贡献。
+
+如果您有让这个项目变得更强的建议，欢迎 fork 这个仓库并创建一个 Pull Request。您也可以创建一个带有 `enhancement` （优化）标签的
+Issue。最后，不要忘记给我们的项目<del>一键三连</del>点个 Star！再次感谢！
+
+1. Fork 项目
+2. 创建您的分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交您的修改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到您的分支 (`git push origin feature/AmazingFeature`)
+5. 创建一个 Pull Request
--- a/frontend/docs/zh_CN/guide/getting-started.md
+++ b/frontend/docs/zh_CN/guide/getting-started.md
@ -0,0 +1,167 @@
+# 即刻开始
+
+## 使用前注意
+
+Nginx UI 遵循 Debian 的网页服务器配置文件标准。创建的网站配置文件将会放置于 Nginx
+配置文件夹（自动检测）下的 `sites-available` 中，启用后的网站将会创建一份配置文件软连接到 `sites-enabled`
+文件夹。您可能需要提前调整配置文件的组织方式。
+
+对于非 Debian (及 Ubuntu) 系统，您可能需要将 `nginx.conf` 配置文件中的内容修改为如下所示的 Debian 风格。
+
+```nginx
+http {
+	# ...
+	include /etc/nginx/conf.d/*.conf;
+	include /etc/nginx/sites-enabled/*;
+}
+```
+
+更多信息请参阅：[debian/conf/nginx.conf](https://salsa.debian.org/nginx-team/nginx/-/blob/master/debian/conf/nginx.conf#L59-L60)
+
+## 安装
+
+Nginx UI 可在以下平台中使用：
+
+- Mac OS X 10.10 Yosemite 及之后版本（amd64 / arm64）
+- Linux 2.6.23 及之后版本（x86 / amd64 / arm64 / armv5 / armv6 / armv7）
+    - 包括但不限于 Debian 7 / 8、Ubuntu 12.04 / 14.04 及后续版本、CentOS 6 / 7、Arch Linux
+- FreeBSD
+- OpenBSD
+- Dragonfly BSD
+- Openwrt
+
+您可以在 [最新发行 (latest release)](https://github.com/0xJacky/nginx-ui/releases/latest)
+中下载最新版本，或使用 [Linux 安装脚本](#linux-安装脚本)。
+
+## 使用方法
+
+第一次运行 Nginx UI 时，请在浏览器中访问 `http://<your_server_ip>:<listen_port>/install` 完成后续配置。
+
+#### 通过执行文件运行
+
+**在终端中运行 Nginx UI**
+
+```shell
+nginx-ui -config app.ini
+```
+
+在终端使用 `Control+C` 退出 Nginx UI。
+
+**在后台运行 Nginx UI**
+
+```shell
+nohup ./nginx-ui -config app.ini &
+```
+
+使用以下命令停止 Nginx UI。
+
+```shell
+kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
+```
+
+#### 使用 Systemd
+
+如果你使用的是[Linux 安装脚本](#linux-安装脚本)，Nginx UI 将作为 `nginx-ui` 服务安装在 systemd 中。请使用 `systemctl`
+命令控制。
+
+**启动 Nginx UI**
+
+```shell
+systemctl start nginx-ui
+```
+
+**停止 Nginx UI**
+
+```shell
+systemctl stop nginx-ui
+```
+
+**重启 Nginx UI**
+
+```shell
+systemctl restart nginx-ui
+```
+
+#### 使用 Docker
+
+您可以在 docker 中使用我们提供的 `uozi/nginx-ui:latest` [镜像](https://hub.docker.com/r/uozi/nginx-ui)
+，此镜像基于 `nginx:latest` 构建。您可以直接将其监听到 80 和 443 端口以取代宿主机上的 Nginx。
+
+注意：映射到 `/etc/nginx` 的文件夹应该为一个空目录。
+
+#### 注意
+
+1. 首次使用时，映射到 `/etc/nginx` 的目录必须为空文件夹。
+2. 如果你想要托管静态文件，可以直接将文件夹映射入容器中。
+
+**Docker 部署示例**
+
+```bash
+docker run -dit \
+  --name=nginx-ui \
+  --restart=always \
+  -e TZ=Asia/Shanghai \
+  -v /mnt/user/appdata/nginx:/etc/nginx \
+  -v /mnt/user/appdata/nginx-ui:/etc/nginx-ui \
+  -p 8080:80 -p 8443:443 \
+  uozi/nginx-ui:latest
+```
+
+## 手动构建
+
+对于没有官方构建版本的平台，可以尝试手动构建。
+
+## 依赖
+
+- Make
+
+- Golang 1.19+
+
+- node.js 18+
+
+  ```shell
+  npx browserslist@latest --update-db
+  ```
+
+## 构建前端
+
+请在 `frontend` 目录中执行以下命令。
+
+```shell
+yarn install
+make translations
+yarn build
+```
+
+## 构建后端
+
+请先完成前端编译，再回到项目的根目录执行以下命令。
+
+```shell
+go build -o nginx-ui -v main.go
+```
+
+## Linux 安装脚本
+
+## 基本用法
+
+**安装或升级**
+
+```shell
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install -r https://ghproxy.com/
+```
+
+一键安装脚本默认设置的监听端口为 `9000`，HTTP Challenge 端口默认为 `9180`
+，如果出现端口冲突请进入 `/usr/local/etc/nginx-ui/app.ini` 修改，并使用 `systemctl restart nginx-ui` 重启 Nginx UI 服务。
+
+**卸载 Nginx UI 但保留配置和数据库文件**
+
+```shell
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
+```
+
+## 更多用法
+
+````shell
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
+````
--- a/frontend/docs/zh_CN/guide/license.md
+++ b/frontend/docs/zh_CN/guide/license.md
@ -0,0 +1,4 @@
+# 开源许可
+
+此项目基于 GNU Affero Public License v3.0 (AGPLv3)
+许可，请参阅 [LICENSE](https://github.com/0xJacky/nginx-ui/blob/master/LICENSE) 文件。通过使用、分发或对本项目做出贡献，表明您已同意本许可证的条款和条件。
--- a/frontend/docs/zh_CN/guide/nginx-proxy-example.md
+++ b/frontend/docs/zh_CN/guide/nginx-proxy-example.md
@ -0,0 +1,57 @@
+# Nginx 反向代理示例
+
+在本指南中，我们将引导您配置 Nginx 服务器以将 HTTP 流量重定向到 HTTPS，并为监听在 `http://127.0.0.1:9000/` 上的 Nginx UI
+设置反向代理。
+
+```nginx
+server {
+    listen          80;
+    listen          [::]:80;
+
+    server_name     <your_server_name>;
+    rewrite ^(.*)$  https://$host$1 permanent;
+}
+
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+
+server {
+    listen  443       ssl http2;
+    listen  [::]:443  ssl http2;
+
+    server_name         <your_server_name>;
+
+    ssl_certificate     /path/to/ssl_cert;
+    ssl_certificate_key /path/to/ssl_cert_key;
+
+    location / {
+        proxy_set_header    Host                $host;
+        proxy_set_header    X-Real-IP           $remote_addr;
+        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        proxy_set_header    X-Forwarded-Proto   $scheme;
+        proxy_http_version  1.1;
+        proxy_set_header    Upgrade             $http_upgrade;
+        proxy_set_header    Connection          $connection_upgrade;
+        proxy_pass          http://127.0.0.1:9000/;
+    }
+}
+```
+
+配置文件包括两个 Nginx 服务器块。第一个服务器块侦听 80 端口（HTTP），并将所有传入的 HTTP 请求重定向到 HTTPS。它还监听 IPv6
+地址。将 `<your_server_name>` 替换为您的服务器名称。
+
+第二个服务器块监听 443 端口（HTTPS）以及 HTTP/2 协议。同样，它也监听 IPv6 地址。将 `<your_server_name>` 替换为您的服务器名称，并将
+SSL 证书和密钥的路径替换为 `/path/to/ssl_cert` 和 `/path/to/ssl_cert_key`。
+
+::: warning
+为了避免在 Nginx v1.24+ 版本中出现警告，我们需要删除 `listen 443 ssl http2;` 和 `listen  [::]:443 ssl http2;`
+中的 `http2` 指令，因为 `ssl` 指令默认支持 `http2`。
+:::
+
+此外，配置包括一个 `map` 指令，用于根据 `$http_upgrade` 变量设置 `$connection_upgrade` 变量的值，该变量用于 WebSocket 连接。
+
+在第二个服务器块中，`location /` 部分包含代理设置，将请求转发到本地端口 `9000`
+。代理设置还包括一些用于正确处理转发请求的标头，如 `Host`、`X-Real-IP`、`X-Forwarded-For`、`X-Forwarded-Proto`、`Upgrade`
+和 `Connection`。
--- a/frontend/docs/zh_CN/index.md
+++ b/frontend/docs/zh_CN/index.md
@ -0,0 +1,53 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+title: Nginx UI
+titleTemplate: Yet another Nginx Web UI
+
+hero:
+    name: "Nginx UI"
+    text: "Nginx 网络管理界面的新选择"
+    tagline: 简单、强大、高速
+    actions:
+        -   theme: brand
+            text: 即刻开始
+            link: /zh_CN/guide/about
+        -   theme: alt
+            text: 在 Github 上查看
+            link: https://github.com/0xJacky/nginx-ui
+
+features:
+    -   icon: 📊
+        title: 在线查看服务器指标
+        details: 实时监控服务器 CPU、内存、系统负载、磁盘使用率等指标。
+    -   icon: 💬
+        title: 在线 ChatGPT 助理
+        details: 在平台内直接使用 AI 强化的 ChatGPT 助手。
+    -   icon: 🖱️
+        title: 一键部署和自动续签
+        details: 一键轻松部署并自动续签 Let's Encrypt 证书。
+    -   icon: 🛠️
+        title: 在线编辑网站配置
+        details: 使用 NgxConfigEditor 区块编辑器或支持 Nginx 配置语法高亮的 Ace Code 编辑器编辑配置。
+    -   icon: 📜
+        title: 在线查看 Nginx 日志
+        details: 在线直接访问和查看 Nginx 日志。
+    -   icon: 💻
+        title: 使用 Go 和 Vue 编写
+        details: 平台使用 Go 和 Vue 构建，发行版本为单个可执行的二进制文件。
+    -   icon: 🔄
+        title: 自动测试和重载配置
+        details: 保存更改后自动测试配置文件并重载 Nginx。
+    -   icon: 🖥️
+        title: 网络终端
+        details: 轻松管理的基于网络浏览器的高级命令行终端。
+    -   icon: 🌙
+        title: 深色模式
+        details: 开启深色模式，享受舒适的用户体验。
+    -   icon: 📱
+        title: 自适应网页设计
+        details: 通过自适应网页设计在任何设备上享受无缝体验。
+
+---
+
--- a/frontend/package.json
+++ b/frontend/package.json
@ -52,7 +52,7 @@
    "vite": "^4.2.1",
    "vite-plugin-html": "^3.2.0",
    "vite-svg-loader": "^4.0.0",
-    "vitepress": "^1.0.0-alpha.74",
+    "vitepress": "^1.0.0-alpha.75",
    "vue-tsc": "^1.4.2"
  }
 }
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -761,14 +761,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@docsearch/css@npm:3.3.4, @docsearch/css@npm:^3.3.3":
+"@docsearch/css@npm:3.3.4, @docsearch/css@npm:^3.3.4":
  version: 3.3.4
  resolution: "@docsearch/css@npm:3.3.4"
  checksum: 56e3ae677423fa4cf508ffb964d0616862a4af22affad308f47edf5c1ad097a2b21187c53d240f83463c4e7add3cd60e3630022a68e2089bb3066bfbaded64a0
  languageName: node
  linkType: hard

-"@docsearch/js@npm:^3.3.3":
+"@docsearch/js@npm:^3.3.4":
  version: 3.3.4
  resolution: "@docsearch/js@npm:3.3.4"
  dependencies:
@ -1393,6 +1393,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@vitejs/plugin-vue@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@vitejs/plugin-vue@npm:4.2.1"
+  peerDependencies:
+    vite: ^4.0.0
+    vue: ^3.2.25
+  checksum: a7266a45378d5fd7813699cf97dfac0e313dc63bd245a1c932848b2b5dc58aede922231d5a534baeeb7e2842c7172f17194a4833bd6a7a6ed61dc0a31d60c7c9
+  languageName: node
+  linkType: hard
+
 "@volar/language-core@npm:1.4.0":
  version: 1.4.0
  resolution: "@volar/language-core@npm:1.4.0"
@ -4122,7 +4132,7 @@ __metadata:
    vite-plugin-build-id: ^0.2.3
    vite-plugin-html: ^3.2.0
    vite-svg-loader: ^4.0.0
-    vitepress: ^1.0.0-alpha.74
+    vitepress: ^1.0.0-alpha.75
    vue: ^3.2.47
    vue-github-button: "https://github.com/0xJacky/vue-github-button"
    vue-router: ^4.1.6
@ -5067,7 +5077,7 @@ __metadata:
  languageName: node
  linkType: hard

-"shiki@npm:^0.14.1":
+"shiki@npm:^0.14.2":
  version: 0.14.2
  resolution: "shiki@npm:0.14.2"
  dependencies:
@ -5706,7 +5716,7 @@ __metadata:
  languageName: node
  linkType: hard

-"vite@npm:^4.3.1":
+"vite@npm:^4.3.3":
  version: 4.3.3
  resolution: "vite@npm:4.3.3"
  dependencies:
@ -5743,24 +5753,24 @@ __metadata:
  languageName: node
  linkType: hard

-"vitepress@npm:^1.0.0-alpha.74":
-  version: 1.0.0-alpha.74
-  resolution: "vitepress@npm:1.0.0-alpha.74"
+"vitepress@npm:^1.0.0-alpha.75":
+  version: 1.0.0-alpha.75
+  resolution: "vitepress@npm:1.0.0-alpha.75"
  dependencies:
-    "@docsearch/css": ^3.3.3
-    "@docsearch/js": ^3.3.3
-    "@vitejs/plugin-vue": ^4.1.0
+    "@docsearch/css": ^3.3.4
+    "@docsearch/js": ^3.3.4
+    "@vitejs/plugin-vue": ^4.2.1
    "@vue/devtools-api": ^6.5.0
    "@vueuse/core": ^10.1.0
    body-scroll-lock: 4.0.0-beta.0
    mark.js: 8.11.1
    minisearch: ^6.0.1
-    shiki: ^0.14.1
-    vite: ^4.3.1
+    shiki: ^0.14.2
+    vite: ^4.3.3
    vue: ^3.2.47
  bin:
    vitepress: bin/vitepress.js
-  checksum: efd2f4f951d122139cfec7b67297d544c0f1d401055cd97c82d71daf3dac1b314b2a54b12af52b4224c165bd0611da5ac300823cf139a087faf0968fa93ae36d
+  checksum: eb146a65477ed90033ee9dd04ef18bb2188178a7f44a22b00715f325508ec78ec1cb771ca87cd2d1a05ed156b8dd214800c3b24567a9054ca2ad84b1d76d5b55
  languageName: node
  linkType: hard