Linux下Swagger UI如何自定義展示

在Linux下，要自定義Swagger UI的展示，你需要遵循以下步驟：

1. 安裝Swagger UI：首先，確保你已經在你的Linux系統上安裝了Swagger UI。你可以使用npm（Node.js包管理器）來安裝它。如果你還沒有安裝Node.js，請先安裝它。然后運行以下命令來全局安裝Swagger UI：

npm install -g swagger-ui-express

2. 創建一個Express應用：在你的項目目錄中，創建一個名為app.js的文件，并在其中創建一個簡單的Express應用。例如：

const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Swagger UI is running at http://localhost:${port}`);
});

3. 添加Swagger定義：在項目目錄中創建一個名為swagger.json的文件，并添加你的API定義。這是一個簡單的示例：

{
  "swagger": "2.0",
  "info": {
    "description": "My API",
    "version": "1.0.0"
  },
  "basePath": "/",
  "paths": {
    "/users": {
      "get": {
        "summary": "List all users",
        "responses": {
          "200": {
            "description": "An array of users"
          }
        }
      }
    }
  }
}

4. 集成Swagger UI：在你的app.js文件中，添加以下代碼來集成Swagger UI：

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

現在，你可以運行你的Express應用：

node app.js

訪問http://localhost:3000/api-docs，你應該能看到Swagger UI界面，其中包含了你的API定義。

5. 自定義Swagger UI：要自定義Swagger UI，你可以修改swagger.json文件中的定義，例如添加自定義的描述、標簽、參數等。此外，你還可以通過傳遞一個配置對象給swaggerUi.setup()函數來自定義Swagger UI的外觀和行為。例如，要更改UI的主題，你可以這樣做：

const customUiConfig = {
  deepLinking: true,
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  plugins: [
    SwaggerUIBundle.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout",
  requestInterceptor: (req) => {
    return req;
  },
  responseInterceptor: (res) => {
    return res;
  },
  showExtensions: true,
  docExpansion: "none",
  defaultModelsExpandDepth: 1,
  defaultModelExpandDepth: 1,
  defaultModelRendering: 'example',
  displayOperationId: false,
  displayRequestDuration: false,
  operationsSorter: 'alpha',
  tagsSorter: 'alpha',
  validatorUrl: null,
  customCss: `
    .topbar {
      background-color: #007bff;
    }
  `,
};

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, customUiConfig));

在這個例子中，我們添加了一個自定義的CSS樣式來更改頂部欄的背景顏色。你可以根據需要修改customCss屬性來自定義其他樣式。

更多關于Swagger UI自定義的信息，請參考官方文檔：https://swagger.io/tools/swagger-ui/