IT-Tools 是一款非常强大的开源在线工具箱，很多喜欢折腾 HomeLab 的朋友都会通过 Docker 在自己的 NAS 或服务器上部署一套。不过，由于官方为了筹集开发资金，页面右上角默认会显示一个“作者赞助（Sponsor）”的按钮。 如果是部署在企业内部网络或者个人使用，出于界面整洁的考虑，很多朋友可能想要把它隐藏掉。今天就来分享一下如何优雅地解决这个问题。 ## 为什么不能直接进目录删文件？ 很多人的第一反应是：进 Docker 容器里，找个类似 `header.html` 的文件把对应代码删掉不就行了？ **答案是：行不通。** IT-Tools 是一个使用 Vue 3 编写的单页应用（SPA）。在打包成 Docker 镜像时，所有的前端代码都已经经过了深度的编译和混淆（Minify）。如果你进入容器的 `/usr/share/nginx/html/assets` 目录，你会发现里面全是一大长串几十万字符的 `.js` 压缩文件。去修改这种文件极易导致整个页面崩溃。 如果非要从源码删除，你就得克隆官方 GitHub 仓库，改写 `.vue` 源文件并重新编译打包，过程非常繁琐。 最优雅、最聪明的做法是：**不修改打包好的 JS 逻辑，而是直接向主页的 `index.html` 注入一段 CSS 样式，把按钮“强行隐藏”起来。** 下面提供两种实现方案： --- ## 方案一：命令行快捷注入（一秒生效） 如果你已经把容器跑起来了，不想重新折腾配置，可以直接在宿主机（你的服务器终端）执行代码，向容器内的 `index.html` 注入隐藏样式。 **⚠️ 避坑指南：** 由于我们要注入的 CSS 代码中包含 `!important` 标签，而 Linux Bash 会把 `!` 误认为是“历史命令唤醒符”，从而导致报出 `-bash: !important: event not found` 的错误。 因此，我们需要先临时关闭 Bash 的历史记录扩展功能。 请在宿主机终端依次执行以下两行命令（假设你的容器名称就叫 `it-tools`）： **Bash** ``` # 1. 临时关闭 Bash 历史扩展（防止 !important 报错） set +H # 2. 向容器内部的 index.html 注入隐藏赞助按钮的 CSS docker exec -it it-tools /bin/sh -c "sed -i 's|</head>|<style>a[href*=\"buymeacoffee.com\"], a[href*=\"ko-fi.com\"], a[href*=\"github.com/sponsors\"], a[href*=\"sponsor\"] { display: none !important; }</style></head>|' /usr/share/nginx/html/index.html" ``` 执行完毕后，终端不会有任何提示。此时回到浏览器，按下 `Ctrl + F5` 强制刷新网页，右上角的赞助按钮就彻底清爽消失了！ *(注：如果你的容器不叫 `it-tools`，请将命令中的 `it-tools` 替换为你实际的容器名或 ID)* --- ## 方案二：基于官方镜像构建专属镜像（一劳永逸） 方案一有个小缺点：未来如果你使用 `docker pull` 更新了官方的 latest 镜像并重新部署了容器，注入的样式就会失效，需要重新执行一次命令。 如果你想一劳永逸，可以自己写一个 `Dockerfile`，基于官方镜像稍微“加点料”。 **1. 新建一个目录，在里面创建一个 `Dockerfile` 文件，内容如下：** **Dockerfile** ``` # 基于官方镜像 FROM corentinth/it-tools:latest # 在静态文件打包完毕后，注入隐藏赞助按钮的 CSS RUN sed -i 's|</head>|<style>a[href*="buymeacoffee.com"], a[href*="ko-fi.com"], a[href*="github.com/sponsors"], a[href*="sponsor"] { display: none !important; }</style></head>|' /usr/share/nginx/html/index.html ``` **2. 运行构建命令，打包出你专属的镜像：** **Bash** ``` docker build -t my-it-tools:latest . ``` **3. 修改你的启动配置** 之后，无论是使用命令行启动还是 `docker-compose.yml`，只需要把镜像名称从 `corentinth/it-tools:latest` 改成你自己的 `my-it-tools:latest` 就可以了。以后无论怎么重启，按钮都不会再出现！ --- **总结：** 了解了前端 SPA 框架的编译机制后，我们就能通过“注入 CSS”这种讨巧的方式，安全、快速地定制我们想要的界面。希望这个小技巧能帮到你！ Loading... IT-Tools 是一款非常强大的开源在线工具箱，很多喜欢折腾 HomeLab 的朋友都会通过 Docker 在自己的 NAS 或服务器上部署一套。不过，由于官方为了筹集开发资金，页面右上角默认会显示一个“作者赞助（Sponsor）”的按钮。 如果是部署在企业内部网络或者个人使用，出于界面整洁的考虑，很多朋友可能想要把它隐藏掉。今天就来分享一下如何优雅地解决这个问题。 ## 为什么不能直接进目录删文件？ 很多人的第一反应是：进 Docker 容器里，找个类似 `header.html` 的文件把对应代码删掉不就行了？ **答案是：行不通。** IT-Tools 是一个使用 Vue 3 编写的单页应用（SPA）。在打包成 Docker 镜像时，所有的前端代码都已经经过了深度的编译和混淆（Minify）。如果你进入容器的 `/usr/share/nginx/html/assets` 目录，你会发现里面全是一大长串几十万字符的 `.js` 压缩文件。去修改这种文件极易导致整个页面崩溃。 如果非要从源码删除，你就得克隆官方 GitHub 仓库，改写 `.vue` 源文件并重新编译打包，过程非常繁琐。 最优雅、最聪明的做法是：**不修改打包好的 JS 逻辑，而是直接向主页的 `index.html` 注入一段 CSS 样式，把按钮“强行隐藏”起来。** 下面提供两种实现方案： --- ## 方案一：命令行快捷注入（一秒生效） 如果你已经把容器跑起来了，不想重新折腾配置，可以直接在宿主机（你的服务器终端）执行代码，向容器内的 `index.html` 注入隐藏样式。 **⚠️ 避坑指南：** 由于我们要注入的 CSS 代码中包含 `!important` 标签，而 Linux Bash 会把 `!` 误认为是“历史命令唤醒符”，从而导致报出 `-bash: !important: event not found` 的错误。 因此，我们需要先临时关闭 Bash 的历史记录扩展功能。 请在宿主机终端依次执行以下两行命令（假设你的容器名称就叫 `it-tools`）： **Bash** ``` # 1. 临时关闭 Bash 历史扩展（防止 !important 报错） set +H # 2. 向容器内部的 index.html 注入隐藏赞助按钮的 CSS docker exec -it it-tools /bin/sh -c "sed -i 's|</head>|<style>a[href*=\"buymeacoffee.com\"], a[href*=\"ko-fi.com\"], a[href*=\"github.com/sponsors\"], a[href*=\"sponsor\"] { display: none !important; }</style></head>|' /usr/share/nginx/html/index.html" ``` 执行完毕后，终端不会有任何提示。此时回到浏览器，按下 `Ctrl + F5` 强制刷新网页，右上角的赞助按钮就彻底清爽消失了！ *(注：如果你的容器不叫 `it-tools`，请将命令中的 `it-tools` 替换为你实际的容器名或 ID)* --- ## 方案二：基于官方镜像构建专属镜像（一劳永逸） 方案一有个小缺点：未来如果你使用 `docker pull` 更新了官方的 latest 镜像并重新部署了容器，注入的样式就会失效，需要重新执行一次命令。 如果你想一劳永逸，可以自己写一个 `Dockerfile`，基于官方镜像稍微“加点料”。 **1. 新建一个目录，在里面创建一个 `Dockerfile` 文件，内容如下：** **Dockerfile** ``` # 基于官方镜像 FROM corentinth/it-tools:latest # 在静态文件打包完毕后，注入隐藏赞助按钮的 CSS RUN sed -i 's|</head>|<style>a[href*="buymeacoffee.com"], a[href*="ko-fi.com"], a[href*="github.com/sponsors"], a[href*="sponsor"] { display: none !important; }</style></head>|' /usr/share/nginx/html/index.html ``` **2. 运行构建命令，打包出你专属的镜像：** **Bash** ``` docker build -t my-it-tools:latest . ``` **3. 修改你的启动配置** 之后，无论是使用命令行启动还是 `docker-compose.yml`，只需要把镜像名称从 `corentinth/it-tools:latest` 改成你自己的 `my-it-tools:latest` 就可以了。以后无论怎么重启，按钮都不会再出现！ --- **总结：** 了解了前端 SPA 框架的编译机制后，我们就能通过“注入 CSS”这种讨巧的方式，安全、快速地定制我们想要的界面。希望这个小技巧能帮到你！ 最后修改：2026 年 04 月 18 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏
