对 Swagger 的修改 UI header

Question

我使用 Swashbuckle 和 Swagger API 创建了个人 Web API。

虽然我能够成功集成它，但我想修改 Swagger 的默认值 UI。更改 header 的颜色并替换 swagger 图像。

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

Answer 1

要更改颜色，您可以注入新的样式表

引自 SwaggerConfig.cs 文件

Use the "InjectStylesheet" option to enrich the UI with one or more a dditional CSS stylesheets. The file must be included in your project as an "Embedded Resource", and then the resource's "Logical Name" is passed to the method as shown below. c.InjectStylesheet(containingAssembly,"Swashbuckle.Dummy.SwaggerExtensions.testStyles1.css");

记得将样式表的Build Action设置为"Embedded Resource"。

Answer 2

这些是我采取的步骤：

创建一个新文件SwaggerHeader.css
右键单击 SwaggerHeader.css、select 属性。将 Build 操作设置为 Embedded Resource。
在SwaggerConfig.cs中，添加下面一行代码：

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

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;
}

Answer 3

第一步是在您的项目中添加一个新的 css 文件，其中包含您的自定义规则。例如：
```
.swagger-section #header { background-color: #fadc00; }
```
右键单击新文件并转到“属性”。在"Build Actions"select"Embedded Ressources".
在 SwaggerConfig 文件中，注入样式表。资源名称应该是资源的 "Logical Name"。这就是我被卡住的地方，但多亏了 this Swashbuckle doc 我可以推断出遵循规则的逻辑名称：

项目的默认命名空间 "dot" 包含资源 "dot" 文件名和扩展名的文件夹。

It's based on the Project's default namespace, file location and file extension. For example, given a default namespace of "YourWebApiProject" and a file located at "/SwaggerExtensions/index.html", then the resource will be assigned the name - "YourWebApiProject.SwaggerExtensions.index.html"

例如：

.EnableSwaggerUi(c =>
{
    c.InjectStylesheet(thisAssembly, "Some.Default.Namespace.App_Start.swagger.css");
});

Answer 4

或者，我在我的 wwwroot 文件夹中创建了一个 custom.css 并添加了

options.InjectStylesheet("/custom.css");

它也很有效。

Answer 5

启动

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
           

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();
            
            .....................
            .....................

            app.UseSwagger();

            app.UseSwaggerUI(c =>
            {
              
                c.SwaggerEndpoint("/swagger/v1/swagger.json",  "API V1");
            
                c.InjectStylesheet("/css/swagger-custom.css");
            });

            
        }

Swagger 自定义 css

img[alt="Swagger UI"] {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url('../images/logo.png');
    max-width: 100%;
    max-height: 100%;
}
.swagger-section #header {
    background-color: #fff !important;
   
}

.swagger-ui .topbar {
    padding: 10px 0;
    background-color: #fff !important;
    border-bottom: 1px solid #dee2e6 !important;
}
    .swagger-ui .topbar .download-url-wrapper .select-label {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 600px;
        margin: 0;
        color: #121416 !important;
        
    }

对 Swagger 的修改 UI header

Modifications to Swagger UI header

asp.net-web-api

swagger-ui

swashbuckle