Настройка стиля пользовательского интерфейса Swagger в NestJS с помощью различных методов - Fcodenotes

Чтобы изменить стиль пользовательского интерфейса Swagger в приложении NestJS, вы можете воспользоваться методами, описанными ниже:

Пользовательский CSS. Вы можете переопределить стили пользовательского интерфейса Swagger по умолчанию, включив собственный CSS. Сначала создайте файл CSS с нужными стилями. Затем импортируйте файл CSS в свое приложение NestJS и включите его в конфигурацию модуля Swagger.

import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { AppModule } from './app.module';
import { NestFactory } from '@nestjs/core';
import * as fs from 'fs';
import * as path from 'path';
async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Custom CSS file path
  const cssFilePath = path.resolve(__dirname, 'swagger-custom.css');

  // Read CSS file content
  const cssFileContent = fs.readFileSync(cssFilePath, 'utf8');

  // Swagger setup
  const options = new DocumentBuilder()
    .setTitle('Your API Title')
    .setDescription('Your API Description')
    .build();

  const document = SwaggerModule.createDocument(app, options);

  // Set custom CSS in Swagger UI
  document['x-csrf-token'] = cssFileContent;

  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

Конфигурация пользовательского интерфейса Swagger. NestJS предоставляет способ настройки пользовательского интерфейса Swagger. Вы можете настроить внешний вид, указав свойство swaggerOptionsв методе SwaggerModule.setup().

SwaggerModule.setup('api', app, document, {
  swaggerOptions: {
    // Custom CSS URL
    customCssUrl: '/swagger-custom.css',

    // Other Swagger UI options...
  },
});

Указав свойство customCssUrl, вы можете связать внешний файл CSS, содержащий нужные стили.

Плагины тем: пользовательский интерфейс Swagger также поддерживает плагины тем, которые позволяют изменять внешний вид пользовательского интерфейса. Вы можете найти существующие плагины или создать свои собственные, чтобы изменить стиль. Чтобы использовать плагин темы, вам необходимо включить сценарий плагина в HTML-файл, в котором отображается пользовательский интерфейс Swagger.

<!DOCTYPE html>
<html>
  <head>
    <!-- Other HTML head elements -->
    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui-bundle.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui.css"
    />
    <!-- Include your custom theme plugin -->
    <script src="path/to/your/theme-plugin.js"></script>
  </head>
  <body>
    <div id="swagger-ui"></div>
    <script>
      window.onload = function () {
        SwaggerUIBundle({
          // Swagger UI configuration
          // ...
        });
      };
    </script>
  </body>
</html>

Обязательно замените path/to/your/theme-plugin.jsфактическим путем к файлу плагина вашей темы.