From 7deaef920dd03462bc4168f94e1d89e46dae21b5 Mon Sep 17 00:00:00 2001
From: Hintay <hintay@me.com>
Date: Sun, 7 May 2023 03:14:53 +0800
Subject: [PATCH] refactor: more user-friendly documents

---
 .github/workflows/documents.yml          |   2 +-
 docs/.vitepress/config/en.ts             |  21 ++-
 docs/.vitepress/config/zh_CN.ts          |  21 ++-
 docs/guide/about.md                      |  43 ++++--
 docs/guide/build.md                      |  37 ++++++
 docs/guide/config-server.md              |   4 +-
 docs/guide/getting-started.md            | 161 +++++++++--------------
 docs/guide/install-script-linux.md       | 114 ++++++++++++++++
 docs/guide/project-structure.md          |  87 ++++++++++++
 docs/zh_CN/guide/about.md                |  31 +++--
 docs/zh_CN/guide/build.md                |  37 ++++++
 docs/zh_CN/guide/config-server.md        |   8 +-
 docs/zh_CN/guide/getting-started.md      | 159 ++++++++--------------
 docs/zh_CN/guide/install-script-linux.md | 109 +++++++++++++++
 docs/zh_CN/guide/nginx-proxy-example.md  |   2 +-
 docs/zh_CN/guide/project-structure.md    |  86 ++++++++++++
 16 files changed, 681 insertions(+), 241 deletions(-)
 create mode 100644 docs/guide/build.md
 create mode 100644 docs/guide/install-script-linux.md
 create mode 100644 docs/guide/project-structure.md
 create mode 100644 docs/zh_CN/guide/build.md
 create mode 100644 docs/zh_CN/guide/install-script-linux.md
 create mode 100644 docs/zh_CN/guide/project-structure.md

diff --git a/.github/workflows/documents.yml b/.github/workflows/documents.yml
index a97175ea..48b2e1e1 100644
--- a/.github/workflows/documents.yml
+++ b/.github/workflows/documents.yml
@@ -1,4 +1,4 @@
-name: Build
+name: Build Documents
 
 on:
     push:
diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
index ca571386..f78ea185 100644
--- a/docs/.vitepress/config/en.ts
+++ b/docs/.vitepress/config/en.ts
@@ -17,9 +17,16 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                     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: 'Install Script', link: '/guide/install-script-linux'}
+                    ]
+                },
+                {
+                    text: 'Development',
+                    collapsed: false,
+                    items: [
+                        {text: 'Build', link: '/guide/build'},
+                        {text: 'Project Structure', link: '/guide/project-structure'},
+                        {text: 'Contributing', link: '/guide/contributing'}
                     ]
                 },
                 {
@@ -30,6 +37,14 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                         {text: 'Nginx Log', link: '/guide/config-nginx-log'},
                         {text: 'Open AI', link: '/guide/config-openai'}
                     ]
+                },
+                {
+                    text: 'Appendix',
+                    collapsed: false,
+                    items: [
+                        {text: 'Nginx Proxy Example', link: '/guide/nginx-proxy-example'},
+                        {text: 'License', link: '/guide/license'}
+                    ]
                 }
             ],
         },
diff --git a/docs/.vitepress/config/zh_CN.ts b/docs/.vitepress/config/zh_CN.ts
index 89e5a4a5..cf010ff2 100644
--- a/docs/.vitepress/config/zh_CN.ts
+++ b/docs/.vitepress/config/zh_CN.ts
@@ -22,9 +22,16 @@ export const zhCNConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                     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: '安装脚本', link: '/zh_CN/guide/install-script-linux'}
+                    ]
+                },
+                {
+                    text: '开发',
+                    collapsed: false,
+                    items: [
+                        {text: '构建', link: '/zh_CN/guide/build'},
+                        {text: '目录结构', link: '/zh_CN/guide/project-structure'},
+                        {text: '贡献代码', link: '/zh_CN/guide/contributing'}
                     ]
                 },
                 {
@@ -35,6 +42,14 @@ export const zhCNConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                         {text: 'Nginx 日志', link: '/zh_CN/guide/config-nginx-log'},
                         {text: 'Open AI', link: '/zh_CN/guide/config-openai'}
                     ]
+                },
+                {
+                    text: '附录',
+                    collapsed: false,
+                    items: [
+                        {text: 'Nginx 代理示例', link: '/zh_CN/guide/nginx-proxy-example'},
+                        {text: '开源协议', link: '/zh_CN/guide/license'}
+                    ]
                 }
             ]
         },
diff --git a/docs/guide/about.md b/docs/guide/about.md
index 1f37760f..cadbbed8 100644
--- a/docs/guide/about.md
+++ b/docs/guide/about.md
@@ -1,5 +1,7 @@
 <script setup>
-import { VPTeamMembers } from 'vitepress/theme'
+import { VPTeamMembers } from 'vitepress/theme';
+
+const blogIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><title>Blog</title><path d="M5 23c-2.2 0-4-1.8-4-4v-8h2v4.5c.6-.3 1.3-.5 2-.5 2.2 0 4 1.8 4 4s-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm19 2h-2C22 9.6 14.4 2 5 2V0c10.5 0 19 8.5 19 19zm-5 0h-2c0-6.6-5.4-12-12-12V5c7.7 0 14 6.3 14 14zm-5 0h-2c0-3.9-3.1-7-7-7v-2c5 0 9 4 9 9z"/></svg>';
 
 const members = [
   {
@@ -8,6 +10,7 @@ const members = [
     title: 'Creator',
     links: [
       { icon: 'github', link: 'https://github.com/0xJacky' },
+      { icon: { svg: blogIcon }, link: 'https://jackyu.cn' }
     ]
   },
 {
@@ -16,6 +19,7 @@ const members = [
     title: 'Developer',
     links: [
       { icon: 'github', link: 'https://github.com/Hintay' },
+      { icon: { svg: blogIcon }, link: 'https://blog.kugeek.com' }
     ]
   },
 ]
@@ -25,6 +29,12 @@ const members = [
 
 ![Dashboard](/assets/dashboard_en.png)
 
+<div class="tip custom-block" style="padding-top: 8px">
+
+Just want to try it out? Skip to the [Quickstart](./getting-started).
+
+</div>
+
 Nginx UI is a comprehensive web-based interface designed to simplify the management and configuration of Nginx servers.
 It offers real-time server statistics, AI-powered ChatGPT assistance, one-click deployment, automatic renewal of Let's
 Encrypt certificates, and user-friendly editing tools for website configurations. Additionally, Nginx UI provides
@@ -36,26 +46,31 @@ managing your Nginx server.
 
 <VPTeamMembers size="small" :members="members" />
 
-## Demo
-
-URL：[https://demo.nginxui.com](https://demo.nginxui.com)
-
-- Username：admin
-- Password：admin
-
 ## Features
 
 - Online statistics for server indicators such as CPU usage, memory usage, load average, and disk usage.
-- Online ChatGPT Assistant
+- Online ChatGPT Assistant.
 - One-click deployment and automatic renewal Let's Encrypt certificates.
 - Online editing websites configurations with our self-designed **NgxConfigEditor** which is a user-friendly block
-  editor for nginx configurations or **Ace Code Editor** which supports highlighting nginx configuration syntax.
-- Online view Nginx logs
+  editor for nginx configurations, or **Ace Code Editor** which supports highlighting nginx configuration syntax.
+- Online view Nginx logs.
 - Written in Go and Vue, distribution is a single executable binary.
 - Automatically test configuration file and reload nginx after saving configuration.
-- Web Terminal
-- Dark Mode
-- Responsive Web Design
+- Web Terminal.
+- Dark Mode.
+- Responsive Web Design.
+
+## Available Platforms
+
+Nginx UI is available on the following platforms:
+
+- Mac OS X 10.10 Yosemite and later (amd64 / arm64)
+- Linux 2.6.23 and later (x86 / amd64 / arm64 / armv5 / armv6 / armv7)
+    - Including but not limited to Debian 7 / 8, Ubuntu 12.04 / 14.04 and later, CentOS 6 / 7, Arch Linux
+- FreeBSD
+- OpenBSD
+- Dragonfly BSD
+- Openwrt
 
 ## Internationalization
 
diff --git a/docs/guide/build.md b/docs/guide/build.md
new file mode 100644
index 00000000..8657db7a
--- /dev/null
+++ b/docs/guide/build.md
@@ -0,0 +1,37 @@
+# Build
+
+The build guide is intended for developers or advanced users only.
+Regular users should follow the [quick start](./getting-started) guide.
+
+## Prerequisites
+
+- Make.
+- Golang version 1.20 or higher.
+- node.js version 18 or higher.
+
+You should execute the following command to update browser list database before build project.
+  ```shell
+  npx browserslist@latest --update-db
+  ```
+
+## Build Frontend
+
+Please execute the following command in `frontend` directory.
+
+```shell
+yarn install
+make translations
+yarn build
+```
+
+## Build Backend
+
+::: warning
+Before building the backend, the frontend should be built first because the backend will embed the frontend distribution.
+:::
+
+Please execute the following command in the project root directory.
+
+```shell
+go build -o nginx-ui -v main.go
+```
diff --git a/docs/guide/config-server.md b/docs/guide/config-server.md
index 45a6d5eb..d74d4a73 100644
--- a/docs/guide/config-server.md
+++ b/docs/guide/config-server.md
@@ -75,5 +75,5 @@ CADir needs to comply with the `RFC 8555` standard.
 - Type: `string`
 - Suggestion: `https://ghproxy.com/`
 
-For users in mainland China who may experience difficulties downloading resources from Github, this option allows them
-to set a proxy for github.com to improve accessibility.
+For users who may experience difficulties downloading resources from Github (such as in mainland China), this option
+allows them to set a proxy for github.com to improve accessibility.
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 5ccc64d2..1f559b54 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -1,5 +1,12 @@
 # Getting Started
 
+## Try It Now
+
+You can try Nginx UI directly by the [demo](https://demo.nginxui.com).
+
+- Username：admin
+- Password：admin
+
 ## Before Use
 
 The Nginx UI follows the Debian web server configuration file standard. Created site configuration files will be placed
@@ -23,81 +30,41 @@ information: [debian/conf/nginx.conf](https://salsa.debian.org/nginx-team/nginx/
 
 ## Installation
 
-Nginx UI is available on the following platforms:
-
-- Mac OS X 10.10 Yosemite and later (amd64 / arm64)
-- Linux 2.6.23 and later (x86 / amd64 / arm64 / armv5 / armv6 / armv7)
-    - Including but not limited to Debian 7 / 8, Ubuntu 12.04 / 14.04 and later, CentOS 6 / 7, Arch Linux
-- FreeBSD
-- OpenBSD
-- Dragonfly BSD
-- Openwrt
-
-You can visit [latest release](https://github.com/0xJacky/nginx-ui/releases/latest) to download the latest distribution,
-or just use [installation scripts for Linux](#script-for-linux).
-
-## Usage
+We recommend using the [installation script](./install-script-linux) for Linux users, in which case you can directly
+control the host machine's Nginx. You can also [install via Docker](#install-with-docker), where our provided image
+includes Nginx and can be used bundled. For advanced users, you may also visit the [latest release](https://github.com/0xJacky/nginx-ui/releases/latest)
+to download the latest distribution and [run executable directly](#run-executable-directly), or [manually build it](./build).
 
 In the first runtime of Nginx UI, please visit `http://<your_server_ip>:<listen_port>/install`
 in your browser to complete the follow-up configurations.
 
-### From Executable
+In addition, we provide [an example](./nginx-proxy-example) of using Nginx to reverse proxy Nginx UI,
+which can be used after installation is complete.
 
-**Run Nginx UI in Terminal**
 
-```shell
-nginx-ui -config app.ini
-```
-
-Press `Control+C` in the terminal to exit Nginx UI.
-
-**Run Nginx UI in Background**
-
-```shell
-nohup ./nginx-ui -config app.ini &
-```
-
-Stop Nginx UI with the follow commond.
-
-```shell
-kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
-```
-
-### With Systemd
-
-If you are using the [installation script for Linux](#script-for-linux), the Nginx UI will be installed as `nginx-ui`
-service in systemd. Please use the `systemctl` command to control it.
-
-**Start Nginx UI**
-
-```shell
-systemctl start nginx-ui
-```
-
-**Stop Nginx UI**
-
-```shell
-systemctl stop nginx-ui
-```
-
-**Restart Nginx UI**
-
-```shell
-systemctl restart nginx-ui
-```
-
-### With Docker
+## Install with Docker
 
 Our docker image [uozi/nginx-ui:latest](https://hub.docker.com/r/uozi/nginx-ui) is based on the latest nginx image and
 can be used to replace the Nginx on the host. By publishing the container's port 80 and 443 to the host,
 you can easily make the switch.
 
-#### Note
+::: tip
 
-1. When using this container for the first time, ensure that the volume mapped to /etc/nginx is empty.
-2. If you want to host static files, you can map directories to container.
+Nginx UI is by default proxied to port `8080` of the container.
+When using this container for the first time, ensure that the volume mapped to `/etc/nginx` is empty.
+If you want to host static files, you can map directories to container.
 
-**Docker Deploy Example**
+:::
+
+::: warning
+
+
+If you want to manage the Nginx of the host, please choose another installation method.
+We recommend using the [installation script](./install-script-linux) if you are using Linux.
+
+:::
+
+### Docker Deploy Example
 
 ```bash
 docker run -dit \
@@ -111,61 +78,51 @@ docker run -dit \
   uozi/nginx-ui:latest
 ```
 
-## Manual Build
+In this example, port `8080` and `8443` of the container are mapped to port `80` and `443` of the host respectively.
+You need to visit `http://<your_server_ip>` to access Nginx UI.
 
-On platforms that do not have an official build version, they can be built manually.
+## Run Executable Directly
 
-### Prerequisites
+It is not recommended to run the Nginx UI executable directly for non-testing purposes.
+We recommend configuring it as a daemon or using the [installation script](./install-script-linux) on Linux.
 
-- Make
-
-- Golang 1.19+
-
-- node.js 18+
-
-  ```shell
-  npx browserslist@latest --update-db
-  ```
-
-### Build Frontend
-
-Please execute the following command in `frontend` directory.
+### Config
 
 ```shell
-yarn install
-yarn build
+echo '[server]\nHttpPort = 9000' > app.ini
 ```
 
-### Build Backend
+::: tip
 
-Please build the frontend first, and then execute the following command in the project root directory.
+The server can still be started without `app.ini`, it will listen on the default port `9000`.
 
-```shell
-go build -o nginx-ui -v main.go
+:::
+
+### Run
+
+::: code-group
+
+```shell [In Terminal]
+nginx-ui -config app.ini
 ```
 
-## Script for Linux
-
-### Basic Usage
-
-**Install and Upgrade**
-
-```shell
-bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install
+```shell [In Background]
+nohup ./nginx-ui -config app.ini &
 ```
 
-The default listening port is `9000`, and the default HTTP Challenge port is `9180`.
-If there is a port conflict, please modify `/usr/local/etc/nginx-ui/app.ini` manually,
-then use `systemctl restart nginx-ui` to reload the Nginx UI service.
+:::
 
-**Remove Nginx UI, except configuration and database files**
 
-```shell
-bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
+### Stop
+
+::: code-group
+
+```shell [In Terminal]
+^C   # Press Ctrl+C
 ```
 
-### More Usage
+```shell [In Background]
+kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
+```
 
-````shell
-bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
-````
+:::
diff --git a/docs/guide/install-script-linux.md b/docs/guide/install-script-linux.md
new file mode 100644
index 00000000..84d358fa
--- /dev/null
+++ b/docs/guide/install-script-linux.md
@@ -0,0 +1,114 @@
+# Install Script
+
+This shell script currently only supports Linux systems. If you are using another operating system,
+please refer to the [quick start](./getting-started) guide for manual installation or use Docker.
+
+## Install or Upgrade
+
+### `install.sh install`
+
+Install or Update Nginx UI.
+
+### Usage
+
+```shell
+install.sh install [OPTIONS]
+```
+
+### Options
+
+| Options               |                                                                                                                 |
+|-----------------------|-----------------------------------------------------------------------------------------------------------------|
+| `-l, --local <file>`  | Install Nginx UI from a local file (`string`)                                                                   |
+| `-p, --proxy <url>`   | Download through a proxy server (`string`)<br/>e.g., `-p http://127.0.0.1:8118` or `-p socks5://127.0.0.1:1080` |
+| `-r, --reverse-proxy` | Download through a reverse proxy server (`string`)<br/>e.g., `-r https://ghproxy.com/`                          |
+
+
+### Quick Usage
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install
+```
+
+The default listening port is `9000`, and the default HTTP Challenge port is `9180`.
+If there is a port conflict, please modify `/usr/local/etc/nginx-ui/app.ini` manually,
+then use `systemctl restart nginx-ui` to restart the Nginx UI service.
+For more information, please check [reference for config](./config-server).
+
+
+## Remove
+
+### `install.sh remove`
+
+Remove Nginx UI.
+
+### Usage
+
+```shell
+install.sh remove [OPTIONS]
+```
+
+### Options
+
+| Options   |                                                                       |
+|-----------|-----------------------------------------------------------------------|
+| `--purge` | Remove all the Nginx UI files, include logs, configs, etc (`boolean`) |
+
+### Quick Usage
+
+::: code-group
+
+```shell [Remove]
+# Remove Nginx UI, except configuration and database files
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
+```
+
+```shell [Purge]
+# Remove all the Nginx UI file, include configuration and database files
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove --purge
+```
+
+:::
+
+## Help
+
+### `install.sh help`
+
+Display available options.
+
+### Usage
+
+```shell
+install.sh help
+```
+
+### Quick Usage
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
+```
+
+## Control Service
+
+By this script, the Nginx UI will be installed as `nginx-ui` service in systemd.
+Please use the follow `systemctl` command to control it.
+
+::: code-group
+
+```shell [Start]
+systemctl start nginx-ui
+```
+
+```shell [Stop]
+systemctl stop nginx-ui
+```
+
+```shell [Restart]
+systemctl restart nginx-ui
+```
+
+```shell [Show Status]
+systemctl status nginx-ui
+```
+
+:::
diff --git a/docs/guide/project-structure.md b/docs/guide/project-structure.md
new file mode 100644
index 00000000..dbd0d65c
--- /dev/null
+++ b/docs/guide/project-structure.md
@@ -0,0 +1,87 @@
+# Project Structure
+
+## Root
+
+```
+.
+├─ docs                    # documentations
+├─ cmd                     # command-line tool
+├─ frontend                # frontend build with vue 3
+├─ server                  # backend build with golang
+├─ resources               # additional resources, not for build
+├─ template                # templates for nginx
+├─ app.example.ini         # example configuration file
+├─ main.go                 # entry point for server
+└─ ...
+```
+
+## Documentations
+
+```
+.
+├─ docs
+│  ├─ .vitepress           # configurations directory
+│  │  ├─ config
+│  │  └─ theme
+│  ├─ public               # resources
+│  ├─ [language code]      # translations, e.g. zh_CN, zh_TW
+│  ├─ guide
+│  │  └─ *.md              # guide markdown files
+│  └─ index.md             # index markdown
+└─ ...
+```
+
+## Frontend
+
+```
+.
+├─ frontend
+│  ├─ public              # public resources
+│  ├─ src                 # source code
+│  │  ├─ api              # api to backend
+│  │  ├─ assets           # public assets
+│  │  ├─ components       # vue components
+│  │  ├─ language         # translations, use vue3-gettext
+│  │  ├─ layouts          # vue layouts
+│  │  ├─ lib              # librarys, such as helper
+│  │  ├─ pinia            # state management
+│  │  ├─ routes           # vue routes
+│  │  ├─ views            # vue views
+│  │  ├─ gettext.ts       # define translations
+│  │  ├─ style.less       # global style, using less syntax
+│  │  ├─ dark.less        # dark style, using less syntax
+│  │  └─ ...
+│  └─ ...
+└─ ...
+```
+
+## Backend
+
+```
+.
+├─ server
+│  ├─ internal             # internal packages
+│  │  └─ ...
+│  ├─ api                  # api to forntend
+│  ├─ model                # model for generate
+│  ├─ query                # generated request files by gen
+│  ├─ router               # routers and middleware
+│  ├─ service              # servie files
+│  ├─ settings             # settings interface
+│  ├─ test                 # unit test
+│  └─ ...
+├─ main.go                 # entry point for server
+└─ ...
+```
+
+## Template
+
+
+```
+.
+├─ template
+│  ├─ block                # template for Nginx block
+│  ├─ conf                 # template for Nginx configuration
+│  └─ template.go          # embed template files to backend
+└─ ...
+```
diff --git a/docs/zh_CN/guide/about.md b/docs/zh_CN/guide/about.md
index 63e479c5..d0231b04 100644
--- a/docs/zh_CN/guide/about.md
+++ b/docs/zh_CN/guide/about.md
@@ -1,5 +1,7 @@
 <script setup>
-import { VPTeamMembers } from 'vitepress/theme'
+import { VPTeamMembers } from 'vitepress/theme';
+
+const blogIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><title>Blog</title><path d="M5 23c-2.2 0-4-1.8-4-4v-8h2v4.5c.6-.3 1.3-.5 2-.5 2.2 0 4 1.8 4 4s-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm19 2h-2C22 9.6 14.4 2 5 2V0c10.5 0 19 8.5 19 19zm-5 0h-2c0-6.6-5.4-12-12-12V5c7.7 0 14 6.3 14 14zm-5 0h-2c0-3.9-3.1-7-7-7v-2c5 0 9 4 9 9z"/></svg>';
 
 const members = [
   {
@@ -8,6 +10,7 @@ const members = [
     title: '创始人',
     links: [
       { icon: 'github', link: 'https://github.com/0xJacky' },
+      { icon: { svg: blogIcon }, link: 'https://jackyu.cn' }
     ]
   },
 {
@@ -16,6 +19,7 @@ const members = [
     title: '开发者',
     links: [
       { icon: 'github', link: 'https://github.com/Hintay' },
+      { icon: { svg: blogIcon }, link: 'https://blog.kugeek.com' }
     ]
   },
 ]
@@ -25,6 +29,12 @@ const members = [
 
 ![Dashboard](/assets/dashboard_zh_CN.png)
 
+<div class="tip custom-block" style="padding-top: 8px">
+
+想快速试试吗？跳转到 [即刻开始](./getting-started)。
+
+</div>
+
 Nginx UI 是一个全新的 Nginx 网络管理界面，旨在简化 Nginx 服务器的管理和配置。它提供实时服务器统计数据、ChatGPT
 助手、一键部署、Let's Encrypt 证书的自动续签以及用户友好的网站配置编辑工具。此外，Nginx UI 还提供了在线访问 Nginx
 日志、配置文件的自动测试和重载、网络终端、深色模式和自适应网页设计等功能。Nginx UI 采用 Go 和 Vue 构建，确保在管理 Nginx
@@ -34,13 +44,6 @@ Nginx UI 是一个全新的 Nginx 网络管理界面，旨在简化 Nginx 服务
 
 <VPTeamMembers size="small" :members="members" />
 
-## 在线预览
-
-网址：[https://demo.nginxui.com](https://demo.nginxui.com)
-
-- 用户名：admin
-- 密码：admin
-
 ## 特色
 
 - 在线查看服务器 CPU、内存、系统负载、磁盘使用率等指标
@@ -54,6 +57,18 @@ Nginx UI 是一个全新的 Nginx 网络管理界面，旨在简化 Nginx 服务
 - 支持深色模式
 - 自适应网页设计
 
+## 可用平台
+
+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
+
 ## 国际化
 
 - 英语
diff --git a/docs/zh_CN/guide/build.md b/docs/zh_CN/guide/build.md
new file mode 100644
index 00000000..7a7cde59
--- /dev/null
+++ b/docs/zh_CN/guide/build.md
@@ -0,0 +1,37 @@
+# 构建
+
+构建指南仅适用于开发人员或高级用户。
+普通用户应遵循 [快速入门](./getting-started) 指南。
+
+## 依赖
+
+- Make
+- Golang 版本 1.20 或更高
+- node.js 版本 18 或更高
+
+你需要在构建项目之前执行以下命令更新浏览器列表数据库。
+  ```shell
+  npx browserslist@latest --update-db
+  ```
+
+## 构建前端
+
+请在 `frontend` 目录中执行以下命令。
+
+```shell
+yarn install
+make translations
+yarn build
+```
+
+## 构建后端
+
+::: warning 警告
+在构建后端之前应先构建前端，因为后端将嵌入前端构建的文件。
+:::
+
+请在项目的根目录执行以下命令。
+
+```shell
+go build -o nginx-ui -v main.go
+```
diff --git a/docs/zh_CN/guide/config-server.md b/docs/zh_CN/guide/config-server.md
index 8b4be1ed..9de1646a 100644
--- a/docs/zh_CN/guide/config-server.md
+++ b/docs/zh_CN/guide/config-server.md
@@ -14,7 +14,7 @@ Nginx UI 服务器监听端口。此选项用于配置 Nginx UI 服务器监听
 - 类型：`string`
 - 支持的值：`release`，`debug`
 
-::: tip
+::: tip 提示
 目前，我们尚未适应此选项，在使用方面，`release` 和 `debug` 之间不会有显著差异。
 :::
 
@@ -40,7 +40,7 @@ Nginx UI 服务器监听端口。此选项用于配置 Nginx UI 服务器监听
 
 此选项用于设置 Web 终端的启动命令。
 
-::: warning
+::: warning 警告
 出于安全原因，我们将启动命令设置为 `login`，因此您必须通过 Linux 的默认身份验证方法登录。如果您不想每次访问 Web
 终端时都输入用户名和密码进行验证，请将其设置为 `bash` 或 `zsh`（如果已安装）。
 :::
@@ -59,7 +59,7 @@ Nginx UI 服务器监听端口。此选项用于配置 Nginx UI 服务器监听
 在申请 Let's Encrypt 证书时，我们使用 Let's Encrypt 的默认 CA 地址。如果您需要调试或从其他提供商获取证书，您可以将 CADir
 设置为他们的地址。
 
-::: tip
+::: tip 提示
 请注意，CADir 提供的地址需要符合 `RFC 8555` 标准。
 :::
 
@@ -68,4 +68,4 @@ Nginx UI 服务器监听端口。此选项用于配置 Nginx UI 服务器监听
 - 类型：`string`
 - 建议：`https://ghproxy.com/`
 
-对于可能在从 Github 下载资源时遇到困难的中国大陆用户，此选项允许他们为 github.com 设置代理，以提高可访问性。
+对于可能在从 Github 下载资源时遇到困难的用户（如在中国大陆），此选项允许他们为 github.com 设置代理，以提高可访问性。
diff --git a/docs/zh_CN/guide/getting-started.md b/docs/zh_CN/guide/getting-started.md
index 828d639a..a6ec709a 100644
--- a/docs/zh_CN/guide/getting-started.md
+++ b/docs/zh_CN/guide/getting-started.md
@@ -1,5 +1,12 @@
 # 即刻开始
 
+## 尝试一下
+
+您可以通过 [演示](https://demo.nginxui.com) 直接试用 Nginx UI。
+
+- 用户名：admin
+- 密码：admin
+
 ## 使用前注意
 
 Nginx UI 遵循 Debian 的网页服务器配置文件标准。创建的网站配置文件将会放置于 Nginx
@@ -20,81 +27,36 @@ http {
 
 ## 安装
 
-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-安装脚本)。
-
-## 使用方法
+我们建议Linux用户使用 [安装脚本](./install-script-linux)，这样您可以直接控制主机上的 Nginx。您也可以通过 [Docker 安装](#使用-docker)，
+我们提供的镜像包含 Nginx 并可以直接使用。对于高级用户，您也可以在 [最新发行 (latest release)](https://github.com/0xJacky/nginx-ui/releases/latest)
+中下载最新版本并 [通过执行文件运行](#通过执行文件运行)，或者 [手动构建](./build)。
 
 第一次运行 Nginx UI 时，请在浏览器中访问 `http://<your_server_ip>:<listen_port>/install` 完成后续配置。
 
-#### 通过执行文件运行
+此外，我们提供了一个使用 Nginx 反向代理 Nginx UI 的 [示例](./nginx-proxy-example)，您可在安装完成后使用。
 
-**在终端中运行 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
 
 您可以在 docker 中使用我们提供的 `uozi/nginx-ui:latest` [镜像](https://hub.docker.com/r/uozi/nginx-ui)
 ，此镜像基于 `nginx:latest` 构建。您可以直接将其监听到 80 和 443 端口以取代宿主机上的 Nginx。
 
-注意：映射到 `/etc/nginx` 的文件夹应该为一个空目录。
+::: tip 提示
 
-#### 注意
+默认情况下，Nginx UI 会被反向代理到容器的 `8080` 端口。
+首次使用时，映射到 `/etc/nginx` 的目录必须为空文件夹。
+如果你想要托管静态文件，可以直接将文件夹映射入容器中。
 
-1. 首次使用时，映射到 `/etc/nginx` 的目录必须为空文件夹。
-2. 如果你想要托管静态文件，可以直接将文件夹映射入容器中。
+:::
 
-**Docker 部署示例**
+::: warning 警告
+
+如果您想要管理主机上的 Nginx，请选择其他安装方式。
+如果您在使用 Linux，我们建议使用 [安装脚本](./install-script-linux) 安装。
+
+:::
+
+### Docker 部署示例
 
 ```bash
 docker run -dit \
@@ -103,65 +65,56 @@ docker run -dit \
   -e TZ=Asia/Shanghai \
   -v /mnt/user/appdata/nginx:/etc/nginx \
   -v /mnt/user/appdata/nginx-ui:/etc/nginx-ui \
+  -v /var/www:/var/www \
   -p 8080:80 -p 8443:443 \
   uozi/nginx-ui:latest
 ```
 
-## 手动构建
+在这个示例中，容器的`8080`端口和`8443`端口分别映射到主机的`80`端口和`443`端口。
+您需要访问`http://<your_server_ip>`来访问 Nginx UI。
 
-对于没有官方构建版本的平台，可以尝试手动构建。
+## 通过执行文件运行
 
-## 依赖
+不建议直接运行Nginx UI可执行文件用于非测试目的。
+我们建议在Linux上将其配置为守护进程或使用[安装脚本](./install-script-linux)。
 
-- Make
-
-- Golang 1.19+
-
-- node.js 18+
-
-  ```shell
-  npx browserslist@latest --update-db
-  ```
-
-## 构建前端
-
-请在 `frontend` 目录中执行以下命令。
+### 配置
 
 ```shell
-yarn install
-make translations
-yarn build
+echo '[server]\nHttpPort = 9000' > app.ini
 ```
 
-## 构建后端
+::: tip 提示
 
-请先完成前端编译，再回到项目的根目录执行以下命令。
+在没有 `app.ini` 时服务器仍然可以启动，它将默认侦听端口 `9000`。
 
-```shell
-go build -o nginx-ui -v main.go
+:::
+
+### 运行
+
+::: code-group
+
+```shell [终端]
+nginx-ui -config app.ini
 ```
 
-## Linux 安装脚本
-
-## 基本用法
-
-**安装或升级**
-
-```shell
-bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install -r https://ghproxy.com/
+```shell [后台]
+nohup ./nginx-ui -config app.ini &
 ```
 
-一键安装脚本默认设置的监听端口为 `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
+### 停止
+
+::: code-group
+
+```shell [终端]
+^C   # 按住 Ctrl+C
 ```
 
-## 更多用法
+```shell [后台]
+kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
+```
 
-````shell
-bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
-````
+:::
diff --git a/docs/zh_CN/guide/install-script-linux.md b/docs/zh_CN/guide/install-script-linux.md
new file mode 100644
index 00000000..1c621300
--- /dev/null
+++ b/docs/zh_CN/guide/install-script-linux.md
@@ -0,0 +1,109 @@
+# 安装脚本
+
+此 shell 脚本仅适用于 Linux 系统。如果您使用的是其他操作系统，请参考 [快速入门](./getting-started) 指南进行手动安装或使用 Docker。
+
+## 安装或升级
+
+### `install.sh install`
+
+安装或更新 Nginx UI。
+
+### 用法
+
+```shell
+install.sh install [OPTIONS]
+```
+
+### 选项
+
+| 选项                    |                                                                                       |
+|-----------------------|---------------------------------------------------------------------------------------|
+| `-l, --local <file>`  | 从本地文件安装 Nginx UI (`string`)                                                           |
+| `-p, --proxy <url>`   | 通过代理服务器下载 (`string`)<br/>例如：`-p http://127.0.0.1:8118` 或 `-p socks5://127.0.0.1:1080` |
+| `-r, --reverse-proxy` | 通过反向代理服务器下载 (`string`)<br/>例如：`-r https://ghproxy.com/`                               |
+
+
+### 快速使用
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install
+```
+
+一键安装脚本默认设置的监听端口为 `9000`，HTTP Challenge 端口默认为 `9180`。如果有端口冲突，请手动修改 `/usr/local/etc/nginx-ui/app.ini`，
+并使用 `systemctl restart nginx-ui` 重启 Nginx UI 服务。有关更多信息，请查看 [配置参考](./config-server)。
+
+## 卸载
+
+### `install.sh remove`
+
+卸载 Nginx UI。
+
+### 用法
+
+```shell
+install.sh remove [OPTIONS]
+```
+
+### 选项
+
+| 选项        |                                       |
+|-----------|---------------------------------------|
+| `--purge` | 删除所有 Nginx UI 文件，包括日志、配置等 (`boolean`) |
+
+### 快速使用
+
+::: code-group
+
+```shell [移除]
+# 删除 Nginx UI，但不包括配置和数据库文件
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
+```
+
+```shell [清除]
+# 删除所有 Nginx UI 文件，包括配置和数据库文件
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove --purge
+```
+
+:::
+
+## 帮助
+
+### `install.sh help`
+
+显示可用选项。
+
+### 用法
+
+```shell
+install.sh help
+```
+
+### 快速使用
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
+```
+
+## 控制服务
+
+通过此脚本，Nginx UI 将作为 `nginx-ui` 服务安装在 systemd 中。请使用以下 `systemctl` 命令对其进行控制。
+
+::: code-group
+
+```shell [启动]
+systemctl start nginx-ui
+```
+
+```shell [停止]
+systemctl stop nginx-ui
+```
+
+```shell [重启]
+systemctl restart nginx-ui
+```
+
+```shell [显示状态]
+systemctl status nginx-ui
+```
+
+:::
diff --git a/docs/zh_CN/guide/nginx-proxy-example.md b/docs/zh_CN/guide/nginx-proxy-example.md
index 28175c02..215005b9 100644
--- a/docs/zh_CN/guide/nginx-proxy-example.md
+++ b/docs/zh_CN/guide/nginx-proxy-example.md
@@ -45,7 +45,7 @@ server {
 第二个服务器块监听 443 端口（HTTPS）以及 HTTP/2 协议。同样，它也监听 IPv6 地址。将 `<your_server_name>` 替换为您的服务器名称，并将
 SSL 证书和密钥的路径替换为 `/path/to/ssl_cert` 和 `/path/to/ssl_cert_key`。
 
-::: warning
+::: warning 警告
 为了避免在 Nginx v1.24+ 版本中出现警告，我们需要删除 `listen 443 ssl http2;` 和 `listen  [::]:443 ssl http2;`
 中的 `http2` 指令，因为 `ssl` 指令默认支持 `http2`。
 :::
diff --git a/docs/zh_CN/guide/project-structure.md b/docs/zh_CN/guide/project-structure.md
new file mode 100644
index 00000000..77d5d8a6
--- /dev/null
+++ b/docs/zh_CN/guide/project-structure.md
@@ -0,0 +1,86 @@
+# 项目结构
+
+## 根目录
+
+```
+.
+├─ docs                    # 文档目录
+├─ cmd                     # 命令行工具
+├─ frontend                # 使用 Vue 3 构建的前端
+├─ server                  # 使用 Golang 构建的后端
+├─ resources               # 其他资源，不参与构建
+├─ template                # 用于 Nginx 的模板文件
+├─ app.example.ini         # 配置文件的示例
+├─ main.go                 # 服务器入口
+└─ ...
+```
+
+## 文档目录
+
+```
+.
+├─ docs
+│  ├─ .vitepress           # 配置目录
+│  │  ├─ config
+│  │  └─ theme
+│  ├─ public               # 资源
+│  ├─ [language code]      # 翻译，文件夹名为语言代码，例如 zh_CN, zh_TW
+│  ├─ guide
+│  │  └─ *.md              # 手册 markdown 文件
+│  └─ index.md             # 首页 markdown 文件
+└─ ...
+```
+
+## 前端
+
+```
+.
+├─ frontend
+│  ├─ public              # 公共资源
+│  ├─ src                 # 源代码
+│  │  ├─ api              # 向后端发起请求的 API
+│  │  ├─ assets           # 公共资源
+│  │  ├─ components       # Vue 组件
+│  │  ├─ language         # 翻译，使用 vue3-gettext
+│  │  ├─ layouts          # Vue 布局
+│  │  ├─ lib              # 库文件，如帮助函数
+│  │  ├─ pinia            # 状态管理
+│  │  ├─ routes           # Vue 路由
+│  │  ├─ views            # Vue 视图
+│  │  ├─ gettext.ts       # 定义翻译
+│  │  ├─ style.less       # 全局样式，使用 less 语法
+│  │  ├─ dark.less        # 暗黑主题样式，使用 less 语法
+│  │  └─ ...
+│  └─ ...
+└─ ...
+```
+
+## 后端
+
+```
+.
+├─ server
+│  ├─ internal             # 内部包
+│  │  └─ ...
+│  ├─ api                  # 向前端提供的 API
+│  ├─ model                # 自动生成的模型
+│  ├─ query                # gen 自动生成的请求文件
+│  ├─ router               # 路由和中间件
+│  ├─ service              # 服务文件
+│  ├─ settings             # 配置接口
+│  ├─ test                 # 单元测试
+│  └─ ...
+├─ main.go                 # 后端入口
+└─ ...
+```
+
+## 模板
+
+```
+.
+├─ template
+│  ├─ block                # Nginx 块配置模板
+│  ├─ conf                 # Nginx 配置模板
+│  └─ template.go          # 嵌入模板文件至后端
+└─ ...
+```