如何对不支持多语言的网页进行自定义翻译？

总是有很多开源软件不支持中文，尤其 webUI。
如果对 webUI 进行翻译，有几个方案

1. 改源代码，如果通过 docker 部署，改源代码就麻烦。缺点是改完要打包 docker，版本升级了要重新打包
2. 服务端直接引用谷歌翻译 js，在 nginx服务端通过反向代理加载。缺点是某些专业词汇要自己翻译，用通用谷歌翻译还不如直接用 chrome 的谷歌翻译插件
3. 客户端开启自写油猴脚本插件：可以临时用。但是用户一多，语言翻译需变更就很麻烦。详细方案参加另外文章
4. 服务器增加油猴js脚本：最佳

写油猴脚本，先测试客户端通过

步骤 1：安装 Tampermonkey 扩展

1. 打开 Chrome 浏览器。
2. 访问 Tampermonkey 官网，点击 “Chrome Web Store” 链接。
3. 点击 “添加到 Chrome” 按钮以安装扩展。
4. 安装完成后，您会看到 Tampermonkey 的图标（黑底白色笑脸）出现在工具栏上。

步骤 2：打开油猴脚本编辑器
点击浏览器右上角的 Tampermonkey 图标，在下拉菜单中选择 “创建新脚本”。

步骤 3：编辑脚本
在打开的脚本编辑器中，删除默认模板代码。 粘贴下面的脚本（会不定期更新翻译内容），点击右上角的 文件图标（保存按钮）保存脚本。

步骤 4：启用开发者模式

1. 打开 Chrome 设置页面：
   • 点击浏览器右上角的 三点菜单 > 更多工具 > 扩展程序。
2. 在页面右上角打开 “开发者模式” 开关。
3. 在 Tampermonkey 设置页面，可以选择脚本进行调试。
   参考：https://www.tampermonkey.net/faq.php#Q209

步骤 5：访问目标网址并测试脚本

1. 打开浏览器，访问 http://127.0.0.1:8081/ 前提 docker 内的 freq 有启动
2. 确保脚本正常运行：
   • 点击 Tampermonkey 图标，检查目标脚本是否被加载。
   • 如果脚本生效，会显示相应的功能。

如果脚本没有生效，可以打开浏览器的开发者工具（按 F12），检查控制台的错误信息。

docker 安装nginx

略

修改docker docker-compose.yml

services里增加nginx-container服务，并增加一个桥接网络，用于联通两服务网络

services:
  nginx:
    image: nginx:latest
    container_name: nginx-container
    ports:
      - "80:80"
    volumes:
      - /[你宿主机路径]/nginx.conf:/etc/nginx/nginx.conf
      - /[你宿主机路径]/Translator.js:/usr/share/nginx/html/Translator.js
    depends_on:
      - webserver
    networks:
      - gx-network

 networks:
  gx-network:
    driver: bridge

另外需要加webserver服务加入gx-network 网络，才能实现 docker 内网络互通。webserver 内增加：

      networks:
      - freqtrade-network

新增nginx.conf、Translator.js

nginx.conf 放在/[你宿主机路径]/nginx.conf

http://127.0.0.1:8080 是背后服务webserver服务的访问地址

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name example.com;

    location / {
        proxy_pass http://127.0.0.1:8080;

        # 注入脚本
        sub_filter '</head>' '<script src="/Translator.js"></script></head>';
        sub_filter_once on;

        # 确保文本未被压缩，便于替换
        proxy_set_header Accept-Encoding "";

        # 确保仅替换 HTML 内容
        proxy_set_header Accept 'text/html';
        sub_filter_types text/html;
    }

    # 提供静态脚本文件
    location /Translator.js {
        alias /usr/share/nginx/html/Translator.js;
    }
    }
}

Translator.js文件放到 /[你宿主机路径]/Translator.js

文件从油猴下载已经验证通过的js文件

重启所有docker服务

docker-compose down
docker-compose up -d

打开 http://127.0.0.1:80 访问，这种方式就不依赖客户端了

补充：云主机的nginx 在宿主机时的部署

1. 添加如下到nginx.conf中，webui 的地原访问地址 http://127.0.0.1:8081

     server {
        listen 8082;
        server_name example.com;

    location / {
        proxy_pass http://127.0.0.1:8081;

        # 注入脚本
        sub_filter '</head>' '<script src="/Translator.js"></script></head>';
        sub_filter_once on;

        # 确保文本未被压缩，便于替换
        proxy_set_header Accept-Encoding "";

        # 确保仅替换 HTML 内容
        proxy_set_header Accept 'text/html';
        sub_filter_types text/html;
    }

    # 提供静态脚本文件
    location /Translator.js {
        alias /[你的用户路径]/Translator.js;
    }
    }

2. js 翻译脚本上传到 /[你的用户路径]/Translator.js

3. 打开 8082 端口:

   • 阿里云安全组打开8082
   • linux 端sudo ufw allow 8082/tcp

访问对应端口 8082 页面即可