如何在Linux上自定义Swagger的UI界面

在Linux上自定义Swagger UI界面可以通过以下几种方法实现：

1. 使用Swagger UI的默认主题

• 下载并解压Swagger UI：

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

• 修改配置文件： 进入Swagger UI的目录（例如 /usr/local/src/swagger-ui/dist），找到 index.html 文件，使用浏览器打开 http://your-server-ip:38081/swagger-ui/index.html。在页面中找到Swagger UI配置部分，可以修改 theme 属性来选择不同的主题。

2. 使用第三方主题

• 克隆第三方项目：

  git clone https://github.com/chfree/think-swagger-ui-vuele.git
  cd think-swagger-ui-vuelen
  npm install
  npm run dev
  

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

3. 使用CSS覆盖

• 创建自定义CSS文件：

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

• 引入自定义CSS文件： 在 index.html 文件中引入自定义的CSS文件：

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

• 重新加载Swagger UI： 保存更改并重新加载Swagger UI，你应该看到你的自定义样式已经应用到Swagger UI上。

4. 使用前端框架进行定制

• 如果你使用的是基于Vue、React或Angular等前端框架的项目，可以利用这些框架的特性来定制Swagger UI。例如，在Vue项目中，你可以修改 docs.html 文件，解析JSON数据并渲染自定义UI界面。

5. 使用第三方库或插件

• swagger-ui-theme：

  npm install swagger-ui-theme
  swagger-ui-theme --theme-id my-custom-theme
  

• swagger-bootstrap-ui： 这是一个为Java项目提供的Swagger UI实现，允许你使用Bootstrap快速定制UI。

6. 直接修改Swagger UI源代码

• 克隆Swagger UI仓库：

  git clone https://github.com/swagger-api/swagger-ui.git
  cd swagger-ui
  

• 修改代码： 根据你的需求修改代码，重新编译并部署即可。

通过以上方法，你可以在Linux上自定义Swagger UI界面，以满足不同的需求。