修改Swagger UI标头 [英] Modifications to Swagger UI header

问题描述

我已经使用Swashbuckle和Swagger API创建了个人WEB API.

I have created a personal WEB API using Swashbuckle and Swagger API.

虽然我能够成功集成此功能，但我想修改Swagger的默认UI.更改页眉的颜色并替换摇摇欲坠的图像.

While I am able to integrate this successfully, I would like to modify the default UI for Swagger. Changing the color of the header and replacing the swagger image.

是否可以通过修改现有文件来实现?

Is this possible by modifying existing files?

推荐答案

这些是我采取的步骤:

1. 创建一个新文件SwaggerHeader.css
2. 右键单击 SwaggerHeader.css ，选择属性.将 Build 操作设置为 Embedded Resource .
3. 在 SwaggerConfig.cs 中，添加以下代码行:

1. Create a new file SwaggerHeader.css
2. Right click on SwaggerHeader.css, select Properties. Set Build action to Embedded Resource.
3. In SwaggerConfig.cs, add the below line of code:

      EnableSwaggerUi("Document/{*assetPath}", c =>
      {
          c.InjectStylesheet(typeof(SwaggerConfig).Assembly,
          "ProjectName.FolderName.SwaggerHeader.css");
      }

1. SwaggerHeader.css 如下所示:

/* swagger ui customization */
body.swagger-section #header {
    background-color: white;
    background: url(your-new-logo.png) no-repeat;
    background-position-x: 250px;
    height: 50px;
}

body.swagger-section #header .swagger-ui-wrap #logo {
        display: none;
}

这篇关于修改Swagger UI标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！