对Swagger UI标头的修改

Question

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

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

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

Answer 1

这些是我采取的步骤：

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

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

4. 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文件中引用

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

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

Answer 3

1. 第一步是使用自定义规则在项目中添加新的css文件。例如 ： .swagger-section #header { background-color: #fadc00; }
2. 右键单击新文件，然后转到“属性”。在“构建操作”中，选择“嵌入式资源”。
3. 在SwaggerConfig文件中，注入样式表。资源名称应为资源的“逻辑名称”。这就是我陷入困境的地方，但是由于this Swashbuckle doc，我可以推断遵循规则的逻辑名称： 项目“dot”文件夹的默认命名空间，包含带扩展名的资源“点”文件名。

它基于Project的默认命名空间，文件位置和文件扩展名。例如，给定默认命名空间“YourWebApiProject”和文件位于“/SwaggerExtensions/index.html”，则资源将被分配名称 - “YourWebApiProject.SwaggerExtensions.index.html”

例如 ：

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