在Linux系统中Swagger UI如何自定义展示

在Linux系统中自定义Swagger UI展示可以通过以下几种方法实现：

使用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的目录，找到index.html文件，通常位于/usr/local/src/swagger-ui/dist。
• 使用浏览器打开 http://your-server-ip:38081/swagger-ui/index.html，在页面中找到Swagger UI配置部分，可以修改theme属性来选择不同的主题。

使用第三方主题

• 克隆第三方项目，例如think-swagger-ui-vuele，这是一个基于Vue.js的Swagger UI实现，支持自定义主题。

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

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

使用CSS覆盖

• 创建自定义CSS文件，例如custom.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上。

基于前端框架的定制

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

借助第三方库或插件

一些第三方库或插件能简化Swagger UI的样式定制过程。例如：

• swagger-ui-layer：一个基于Vue的项目，允许通过修改源码实现样式自定义。
• swagger-bootstrap-ui：一个为Java项目提供的Swagger UI实现，允许你使用Bootstrap快速定制UI。

直接修改Swagger UI源代码

如果你具备丰富的开发经验，可以直接修改Swagger UI的源代码。从GitHub克隆Swagger UI仓库，根据你的需求修改代码，重新编译并部署即可。