如何在Debian中自定义Swagger界面 - 问答

在Debian系统中自定义Swagger界面，通常涉及以下几个步骤：

1. 安装Swagger UI

首先，你需要安装Swagger UI。你可以使用npm（Node.js的包管理器）来安装Swagger UI。

sudo apt update
sudo apt install nodejs npm
sudo npm install -g swagger-ui-express

2. 创建一个简单的Express应用

mkdir swagger-ui-custom
cd swagger-ui-custom

然后，创建一个index.js文件：

const express = require('express');
const swaggerUi = require('swagger-ui-express');
const YAML = require('yamljs');

// Load Swagger document
const swaggerDocument = YAML.load('./swagger.yaml');

const app = express();

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

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

3. 创建Swagger文档

在项目目录中创建一个swagger.yaml文件，并添加你的API文档：

swagger: '2.0'
info:
  title: Sample API
  description: A sample API to demonstrate Swagger UI customization
  version: '1.0.0'
host: localhost:3000
basePath: /api
schemes:
  - http
paths:
  /users:
    get:
      summary: List all users
      responses:
        '200':
          description: An array of users
          schema:
            type: array
            items:
              $ref: '#/definitions/User'
definitions:
  User:
    type: object
    properties:
      id:
        type: integer
        format: int64
      name:
        type: string
      email:
        type: string
        format: email

4. 自定义Swagger UI

你可以通过修改Swagger UI的配置来自定义界面。例如，你可以更改主题、添加自定义CSS或JavaScript文件等。

更改主题

Swagger UI支持多种主题，你可以在swagger-ui-express的setup方法中传递一个配置对象来更改主题：

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
  deepLinking: true,
  presets: [
    swaggerUi.presets.apis,
    swaggerUi.presets.promises
  ],
  plugins: [
    swaggerUi.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout",
  customCssUrl: "/custom.css", // 添加自定义CSS文件
  customJsUrl: "/custom.js"    // 添加自定义JavaScript文件
}));

添加自定义CSS和JavaScript

在项目目录中创建public文件夹，并在其中添加custom.css和custom.js文件：

mkdir public

在public/custom.css中添加自定义样式：

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

在public/custom.js中添加自定义JavaScript代码：

// custom.js
window.onload = function() {
  console.log('Custom JavaScript loaded!');
};

然后，修改index.js文件以提供静态文件服务：

const express = require('express');
const swaggerUi = require('swagger-ui-express');
const YAML = require('yamljs');
const path = require('path');

// Load Swagger document
const swaggerDocument = YAML.load('./swagger.yaml');

const app = express();

// Serve Swagger docs
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
  deepLinking: true,
  presets: [
    swaggerUi.presets.apis,
    swaggerUi.presets.promises
  ],
  plugins: [
    swaggerUi.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout",
  customCssUrl: "/custom.css",
  customJsUrl: "/custom.js"
}));

// Serve static files from the "public" directory
app.use(express.static(path.join(__dirname, 'public')));

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

5. 运行应用

最后，运行你的Express应用：

node index.js

现在，你可以访问http://localhost:3000/api-docs来查看自定义的Swagger UI界面。

通过这些步骤，你可以在Debian系统中自定义Swagger UI界面，以满足你的需求。

0 赞

0 踩