Linux环境下Swagger UI如何自定义主题

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

方法一：使用Swagger UI内置主题

1. 下载并解压Swagger UI： 你可以从Swagger UI的GitHub仓库下载特定版本的Swagger UI，并使用Docker运行它。

   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），在页面中找到配置部分，修改 theme 属性来选择不同的主题。

方法二：创建自定义CSS文件

1. 下载Swagger UI： 从GitHub上下载Swagger UI的源代码并解压。

2. 创建自定义CSS文件： 在Swagger UI的资源目录中找到 swagger-ui.css 文件，复制并重命名为 custom-swagger-ui.css。在这个文件中，你可以覆盖默认的CSS样式来自定义主题。

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

3. 修改HTML文件： 打开 index.html 文件，找到引入 swagger-ui.css 的地方，将其路径修改为你新创建的自定义CSS文件的路径。

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

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

方法三：使用第三方主题库

一些第三方项目提供了自定义主题的解决方案。例如，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-vuelen
   npm install
   npm run dev
   

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

方法四：使用Swagger UI的扩展功能

Swagger UI支持通过插件系统添加自定义的CSS或JavaScript。你可以创建一个插件来扩展Swagger UI的功能和主题。

1. 创建插件： 创建一个新的JavaScript文件，例如 custom-theme-plugin.js，并在其中编写自定义逻辑。

   SwaggerUIBundle({
       url: "your-swagger-json-url",
       dom_id: "#swagger-ui",
       deepLinking: true,
       presets: [
           SwaggerUIBundle.presets.apis,
           SwaggerUIStandalonePreset
       ],
       plugins: [
           {
               src: "./custom-theme-plugin.js",
               eventBus: SwaggerUIBundle.events
           }
       ],
       layout: "StandaloneLayout"
   });
   

2. 引入插件： 在 index.html 文件中引入自定义插件文件。

   <script src="path/to/custom-theme-plugin.js"></script>
   

通过以上方法，你可以在Linux环境下自定义Swagger UI的主题。选择适合你项目需求的方法进行操作即可。