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的目錄（通常位于 /usr/local/src/swagger-ui/dist），找到 index.html 文件，使用瀏覽器打開 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-vuelenpm install
  npm run dev
  

• 修改配置文件：在項目中找到配置文件，修改主題相關的配置項。

使用CSS覆蓋

• 創建自定義CSS文件：在項目中創建一個新的CSS文件（例如 custom.css），覆蓋Swagger UI的默認樣式。

  /* 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，查看自定義樣式是否應用。

基于前端框架的定制

• 使用Vue、React或Angular等前端框架：充分利用框架特性來定制Swagger UI。例如，在Vue項目中，可以修改 docs.html 文件，解析JSON數據并渲染自定義UI界面。

借助第三方庫或插件

• swagger-ui-layer：一個基于Vue的項目，允許通過修改源碼實現樣式自定義。
• swagger-bootstrap-ui：為Java項目提供的Swagger UI實現，允許使用Bootstrap快速定制UI。

直接修改Swagger UI源代碼

• 克隆Swagger UI倉庫：從GitHub克隆Swagger UI倉庫，根據需求修改代碼，重新編譯并部署。

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

• 部署Swagger UI：將構建好的Swagger UI文件復制到Web服務器目錄中，并配置Web服務器。

以上方法可以幫助您在Linux系統上自定義Swagger UI界面，選擇哪種方法取決于您的項目需求和技術棧。