对 Swagger UI 标头的修改答案

【问题标题】：Modifications to Swagger UI header对 Swagger UI 标头的修改
【发布时间】：2016-03-29 17:30:01
【问题描述】：

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

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

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

【问题讨论】：

可以通过swaggerconfig.cs文件注入css来改变颜色。

标签： asp.net-web-api swagger-ui swashbuckle

【解决方案1】：

这些是我采取的步骤：

新建文件 SwaggerHeader.css
右键单击SwaggerHeader.css，选择属性。将 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;
}

【讨论】：

在ProjectName.FolderName.SwaggerHeader.css 中，ProjectName.FolderName 是什么？是程序集命名空间吗？
在 #3 中，您在 "ProjectName" 之前缺少双引号
#5，添加图片到目录

【解决方案2】：

第一步是在您的项目中添加一个新的 css 文件，并使用您的自定义规则。例如：
```
.swagger-section #header { background-color: #fadc00; }
```
右键单击新文件并转到属性。在“构建操作”中选择“嵌入式资源”。
在 SwaggerConfig 文件中，注入样式表。资源名称应该是资源的“逻辑名称”。这就是我卡住的地方，但感谢this Swashbuckle doc，我可以根据规则推断出逻辑名称：

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

它基于项目的默认命名空间、文件位置和文件延期。例如，给定一个默认命名空间 “YourWebApiProject”和一个文件位于 “/SwaggerExtensions/index.html”，则资源将被分配名称 - “YourWebApiProject.SwaggerExtensions.index.html”

例如：

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

【讨论】：

【解决方案3】：

启动

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

【讨论】：

【解决方案4】：

要改变颜色，你可以注入一个新的样式表

来自 SwaggerConfig.cs 文件的引用

使用“InjectStylesheet”选项通过一个或多个额外的 CSS 样式表来丰富 UI。该文件必须作为“嵌入式资源”包含在您的项目中，然后该资源的 “逻辑名称”传递给方法，如下所示。 c.InjectStylesheet(containingAssembly,"Swashbuckle.Dummy.SwaggerExtensions.testStyles1.css");

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

【讨论】：

【解决方案5】：

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

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

而且效果也很好。

【讨论】：