更改nestjs和swagger-ui的徽标和标题颜色

Question

我已经安装了nestjs，我想使用swagger-ui。我不确定更改徽标和标题的最佳方法是什么。

在 main.ts 中

  const options = new DocumentBuilder()
    .setTitle('Data Service API')
    .setDescription('Data Service API')
    .setVersion('1.0')
    .addTag('OD')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api', app, document);

Answer 1

我设法弄清楚了。

const options2 = {
// customCss: '.swagger-ui .topbar { display: none }'
  customCss: `
  .topbar-wrapper img {content:url(\'../assets/img/lbglogo.png\'); width:300px; height:auto;}
  .swagger-ui .topbar { background-color: white; }
  `
};

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

app.useStaticAssets(join(__dirname,'..', 'public'), {prefix: '/assets'});

参考： https://www.npmjs.com/package/swagger-ui-express

Answer 2

这应该可以解决问题...

  SwaggerModule.setup(`/doc`, app, document, {
    customfavIcon: '<path>/favicon.png', //adding our favicon to swagger
    customSiteTitle: 'stacksuit-web-api Docs', //add site title to swagger for nice SEO
    customCss: `
      .topbar-wrapper img {content:url(\'path-to-images/image.png\'); width:200px; height:auto;}
      .swagger-ui .topbar { background-color: #f1f2f1; } `,
    swaggerOptions: {
      persistAuthorization: true, // this helps to retain the token even after refreshing the (swagger UI web page)
      // swaggerOptions: { defaultModelsExpandDepth: -1 } //uncomment this line to stop seeing the schema on swagger ui
    },
  });