Question

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

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

这可以通过修改现有文件来实现吗？

Answer 1

这是我采取的步骤：

创建一个新文件SwaggerHeader.css
右键点击SwaggerHeader.css，选择属性。将构建操作设置为嵌入资源。
在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 2

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

来自SwaggerConfig.cs文件的Qoute

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

请记住将样式表的Build Action设置为＆＃34; Embedded Resource＆＃34;。

Answer 3

第一步是使用自定义规则在项目中添加一个新的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");
});

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标头的修改

5 个答案: