Nginx-Proxy-Manager 非Docker环境主题安装指南

在Nginx-Proxy-Manager项目中，许多用户希望为其管理界面应用自定义主题，但官方文档主要针对Docker环境提供了安装说明。本文将详细介绍如何在非Docker环境（即裸机安装）下为Nginx-Proxy-Manager应用主题。

背景介绍

Nginx-Proxy-Manager是一个基于Nginx的图形化管理工具，它简化了反向代理和SSL证书的管理工作。虽然项目提供了Docker安装方式，但部分用户选择直接在服务器上进行裸机安装。对于这些用户，应用自定义主题需要采用不同的方法。

主题应用原理

主题主要通过覆盖默认的CSS样式文件来实现界面美化。在裸机安装中，我们需要手动替换或修改位于/app/frontend/css/main.css的样式文件。

具体实施步骤

1. 备份原始文件：在进行任何修改前，首先备份原始CSS文件

   cp /app/frontend/css/main.css /app/frontend/css/main.css.backup
   

2. 准备主题文件：进入CSS目录并清空现有样式

   cd /app/frontend/css
   > main.css
   

3. 应用主题：通过curl命令获取主题文件并追加到主样式表中

   curl https://raw.githubusercontent.com/themepark-dev/theme.park/develop/css/defaults/transparent.css >> main.css
   curl https://raw.githubusercontent.com/themepark-dev/theme.park/develop/css/defaults/placeholders.css >> main.css
   curl https://raw.githubusercontent.com/themepark-dev/theme.park/develop/css/theme-options/nord.css >> main.css
   curl https://raw.githubusercontent.com/themepark-dev/theme.park/develop/css/base/nginx-proxy-manager/nginx-proxy-manager-base.css >> main.css
   

主题定制说明

在上述步骤中，第三行命令nord.css代表主题选择，用户可以根据个人喜好替换为其他主题文件，如：

• organizr-dark.css：深色主题
• plex.css：Plex风格主题
• space-gray.css：太空灰主题

注意事项

1. 修改前请确保Nginx-Proxy-Manager服务已停止
2. 修改完成后需要重启服务使更改生效
3. 建议在修改前测试主题效果，可通过浏览器开发者工具预览
4. 不同版本可能略有差异，请根据实际安装路径调整

故障排除

如果主题未生效，请检查：

• 文件权限是否正确
• CSS文件路径是否准确
• 是否有缓存影响（尝试清除浏览器缓存）
• 是否所有主题组件都成功下载

通过以上步骤，用户可以在裸机安装的Nginx-Proxy-Manager上成功应用自定义主题，提升管理界面的视觉效果和使用体验。