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的主題。選擇適合你項目需求的方法進行操作即可。