在Linux中Swagger UI如何自定义主题

在Linux中自定义Swagger UI主题可以通过以下几种方法实现：

使用Swagger UI内置主题

1. 下载并运行Swagger UI： 你可以使用Docker来运行Swagger UI。例如，使用以下命令下载并运行Swagger UI v4.15.5：

   docker pull swaggerapi/swagger-ui:v4.15.5
   docker run -d -p 38081:8080 swaggerapi/swagger-ui:v4.15.5
   

2. 访问Swagger UI页面： 打开浏览器，访问 http://<your-server-ip>:38081/swagger-ui/index.html。

3. 修改配置文件： 在页面中找到Swagger UI配置部分，可以修改 theme 属性来选择不同的主题。

使用第三方主题库

一些第三方项目提供了自定义主题的解决方案。例如，think-swagger-ui-vuele 是一个基于Vue.js的Swagger UI实现，支持自定义主题。

1. 克隆项目：

   git clone https://github.com/chfree/think-swagger-ui-vuele.git
   

2. 安装依赖并启动：

   cd think-swagger-ui-vuele
   npm install
   npm run dev
   

3. 修改配置文件： 在项目中找到配置文件，修改主题相关的配置项。

使用CSS样式覆盖

如果上述方法无法满足需求，可以通过CSS覆盖Swagger UI默认样式。

1. 找到Swagger UI生成的CSS文件： 通常位于 /usr/local/src/swagger-ui/dist/swagger-ui.css。

2. 创建自定义CSS文件： 创建一个新的CSS文件，例如 custom.css，并在其中覆盖默认样式。

   /* custom.css */
   .swagger-ui .topbar {
       background-color: #007bff;
   }
   .swagger-ui .info .title {
       color: #007bff;
   }
   

3. 引入自定义CSS文件： 在 index.html 文件中，确保在引入Swagger UI的CSS文件之后引入你的自定义CSS文件。

   <link rel="stylesheet" type="text/css" href="path/to/custom.css">
   

4. 重新加载Swagger UI： 保存更改并重新加载Swagger UI，检查自定义样式是否生效。

使用Swagger UI的主题插件

有一些第三方插件可以帮助你自定义Swagger UI的主题。例如，swagger-ui-theme 是一个可以轻松更改Swagger UI主题的插件。

1. 安装插件：

   npm install swagger-ui-theme
   

2. 使用插件：

   swagger-ui-theme --theme-id my-custom-theme
   

通过以上方法，你可以在Linux系统中自定义Swagger UI的主题。根据你的具体需求和Swagger UI的版本，选择合适的方法进行主题定制。