本教程将指导如何将一个单一的访问路径（如 domain.com/my-tool）部署为一个包含多个子工具（如 /my-tool/tool-a, /my-tool/tool-b）的工具箱。

这个方案的核心是利用 Nginx Proxy Manager (NPM) 强大的路径转发和重写功能，将一个子目录（如 /my-tool）映射到一个“工具箱”主页，并能正确地分发到该主页下的各个子工具页面。

1. 核心思路：中心辐射型文件结构

我们不再将所有代码放在一个 index.html 文件中，而是创建一个“中心辐射型”的目录结构。

中心 (Hub): 一个 index.html 文件，作为工具箱的主页（卡片选择界面）。
辐射 (Spokes): 每一个工具都存放在自己的子文件夹中。

2. 步骤一：创建文件结构

在服务器上（例如宝塔面板的 /www/wwwroot/ 目录下），创建你的工具箱主文件夹，并按以下结构组织文件：


/www/wwwroot/my-toolbox/
    |
    ├── index.html           <-- (这是“中心”：工具箱的主页)
    |
    ├── tool-a/              <-- (辐射1：工具A)
    │   └── index.html       <-- (工具A的HTML/JS/CSS代码)
    |
    ├── tool-b/              <-- (辐射2：工具B)
    │   └── index.html       <-- (工具B的HTML/JS/CSS代码)
    |
    └── ...                  <-- (未来可添加更多工具文件夹)

3. 步骤二：编写“中心”主页 (index.html)

这是 my-toolbox/index.html 文件的关键部分。你需要使用相对路径来链接到你的各个“辐射”工具。

html
<body>
    <main>
        <div class="grid ...">

            <a href="./tool-a/" class="tool-card ...">
                <h2>工具A (FinalShell)</h2>
                <p>这是工具A的描述...</p>
            </a>

            <a href="./tool-b/" class="tool-card ...">
                <h2>工具B (MD-Replace)</h2>
                <p>这是工具B的描述...</p>
            </a>
            
        </div>
    </main>
</body>

关键点：链接 href 的值是 ./tool-a/ 和 ./tool-b/。
./ 代表“当前目录”。
末尾的 / 很重要，它告诉浏览器去访问一个目录，而不是一个文件。

4. 步骤三：启动 Docker 容器

使用一个 Nginx 容器来托管整个 my-toolbox 文件夹。

bash
docker run -d \
  --name my-toolbox-server \
  -p 5001:80 \
  -v /www/wwwroot/my-toolbox:/usr/share/nginx/html:ro \
  nginx:alpine

-v：将我们包含所有文件（主页 + 子工具）的 my-toolbox 文件夹，挂载到 Nginx 的根目录。
-p：将 Nginx 容器的 80 端口映射到服务器的 5001 端口。

5. 步骤四：配置 NPM (关键)

这是让所有路径（主页和子工具）都能正确访问的“魔法”所在。

登录 NPM，编辑你的主域名（例如 zym588.space）。
进入 "Custom locations" 标签页。
删除所有旧的 /my-tool 规则（如果存在）。
点击 "Add location"，创建唯一的一条新规则：
- Define location: ^~ /my-tool/ (关键：^~ 代表高优先级匹配，末尾的 / 至关重要)
- Forward Hostname / IP: 127.0.0.1
- Forward Port: 5001 (指向步骤三中 Docker 容器的端口)
- 点击齿轮(⚙️)图标，进入 "Custom Nginx Configuration"：
- 粘贴以下这唯一的一行 rewrite 规则：
```
nginx
rewrite ^/my-tool/(.*)$ /$1 break;
```
保存。

为什么这样可行？（工作原理解析）

配置的这条规则，通过 rewrite 巧妙地处理了所有情况：

访问主页 ( .../my-tool )：
- Nginx 会自动在 URL 末尾补全斜杠，重定向到 .../my-tool/。
访问主页 ( .../my-tool/ )：
- location 匹配 ^~ /my-tool/。
- rewrite 规则被触发，^/my-tool/(.*)$ 匹配成功，此时 (.*) 捕获的内容是空字符串。
- URL 被重写为 /$1，即 /。
- NPM 将这个 / 请求转发给 127.0.0.1:5001。
- Docker 容器内的 Nginx 收到 / 请求，返回 /usr/share/nginx/html/index.html（工具箱主页）。成功。
点击卡片 ( .../my-tool/tool-a/ )：
- location 匹配 ^~ /my-tool/。
- rewrite 规则被触发，此时 (.*) 捕获的内容是 tool-a/。
- URL 被重写为 /$1，即 /tool-a/。
- NPM 将这个 /tool-a/ 请求转发给 127.0.0.1:5001。
- Docker 容器内的 Nginx 收到 /tool-a/ 请求，返回 /usr/share/nginx/html/tool-a/index.html（工具A页面）。成功。

通过这个方案，你只需维护一个 Docker 容器和一个 NPM location 规则，就可以无限扩展你的工具箱。