refactor: more user-friendly documents

.github/workflows/documents.yml

@@ -1,4 +1,4 @@
-name: Build
+name: Build Documents
 
 on:
     push:

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'}
+                    ]
                 }
             ],
         },

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'}
+                    ]
                 }
             ]
         },

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
 

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
+```

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.

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
-
-**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**
+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.
 
-```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
-```
+## Install with Docker
 
-**Stop Nginx UI**
+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.
 
-```shell
-systemctl stop nginx-ui
-```
+::: tip
 
-**Restart Nginx UI**
+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.
 
-```shell
-systemctl restart nginx-ui
-```
+:::
 
-### With Docker
+::: warning
 
-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
+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.
 
-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.
+:::
 
-**Docker Deploy Example**
+### Docker Deploy Example
 
 ```bash
 docker run -dit \
@@ -111,61 +78,51 @@ docker run -dit \
   uozi/nginx-ui:latest
 ```
 
-## Manual Build
-
-On platforms that do not have an official build version, they can be built manually.
-
-### Prerequisites
-
-- Make
+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.
 
-- Golang 1.19+
+## Run Executable Directly
 
-- node.js 18+
+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.
 
-  ```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
-```
+:::
 
-## Script for Linux
+### Run
 
-### Basic Usage
+::: code-group
 
-**Install and Upgrade**
+```shell [In Terminal]
+nginx-ui -config app.ini
+```
 
-```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
-````
+:::

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
+```
+
+:::

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
+└─ ...
+```

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
+
 ## 国际化
 
 - 英语

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
+```

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 设置代理，以提高可访问性。

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 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 反向代理 Nginx UI 的 [示例](./nginx-proxy-example)，您可在安装完成后使用。
 
-**停止 Nginx UI**
 
-```shell
-systemctl stop nginx-ui
-```
+## 使用 Docker
 
-**重启 Nginx UI**
+您可以在 docker 中使用我们提供的 `uozi/nginx-ui:latest` [镜像](https://hub.docker.com/r/uozi/nginx-ui)
+，此镜像基于 `nginx:latest` 构建。您可以直接将其监听到 80 和 443 端口以取代宿主机上的 Nginx。
 
-```shell
-systemctl restart nginx-ui
-```
+::: tip 提示
 
-#### 使用 Docker
+默认情况下，Nginx UI 会被反向代理到容器的 `8080` 端口。
+首次使用时，映射到 `/etc/nginx` 的目录必须为空文件夹。
+如果你想要托管静态文件，可以直接将文件夹映射入容器中。
 
-您可以在 docker 中使用我们提供的 `uozi/nginx-ui:latest` [镜像](https://hub.docker.com/r/uozi/nginx-ui)
-，此镜像基于 `nginx:latest` 构建。您可以直接将其监听到 80 和 443 端口以取代宿主机上的 Nginx。
+:::
 
-注意：映射到 `/etc/nginx` 的文件夹应该为一个空目录。
+::: warning 警告
 
-#### 注意
+如果您想要管理主机上的 Nginx，请选择其他安装方式。
+如果您在使用 Linux，我们建议使用 [安装脚本](./install-script-linux) 安装。
 
-1. 首次使用时，映射到 `/etc/nginx` 的目录必须为空文件夹。
-2. 如果你想要托管静态文件，可以直接将文件夹映射入容器中。
+:::
 
-**Docker 部署示例**
+### 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
 ```
 
-## 手动构建
-
-对于没有官方构建版本的平台，可以尝试手动构建。
-
-## 依赖
-
-- Make
+在这个示例中，容器的`8080`端口和`8443`端口分别映射到主机的`80`端口和`443`端口。
+您需要访问`http://<your_server_ip>`来访问 Nginx UI。
 
-- Golang 1.19+
+## 通过执行文件运行
 
-- node.js 18+
+不建议直接运行Nginx UI可执行文件用于非测试目的。
+我们建议在Linux上将其配置为守护进程或使用[安装脚本](./install-script-linux)。
 
-  ```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
-```
+:::
 
-## Linux 安装脚本
+### 运行
 
-## 基本用法
+::: code-group
 
-**安装或升级**
+```shell [终端]
+nginx-ui -config app.ini
+```
 
-```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
-````
+:::

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
+```
+
+:::

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`。
 :::

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          # 嵌入模板文件至后端
+└─ ...
+```