10

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

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

附上我想改变的想象部分。

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

4

5 回答 5

17

这些是我采取的步骤：

  1. 创建一个新文件 SwaggerHeader.css
  2. 右键单击SwaggerHeader.css，选择属性。将Build action 设置为Embedded Resource。
  3. 在SwaggerConfig.cs中，添加以下代码行：
      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;
}

于 2016-03-30T14:51:23.507 回答
4

  1. 第一步是在您的项目中添加一个新的 css 文件，并使用您的自定义规则。例如 ：

    .swagger-section #header { background-color: #fadc00; }

  2. 右键单击新文件并转到属性。在“构建操作”中选择“嵌入式资源”。

  3. 在 SwaggerConfig 文件中，注入样式表。资源名称应该是资源的“逻辑名称”。那就是我被卡住的地方，但是由于这个 Swashbuckle 文档，我可以推断出遵循规则的逻辑名称：

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

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

例如 ：

.EnableSwaggerUi(c =>
{
    c.InjectStylesheet(thisAssembly, "Some.Default.Namespace.App_Start.swagger.css");
});
于 2019-03-22T15:31:39.463 回答
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");
            });

            
        }

招摇自定义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;
        
    }
于 2020-08-22T18:06:16.617 回答
1

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

来自 SwaggerConfig.cs 文件的引用

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

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

于 2016-03-30T08:49:16.960 回答
1

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

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

它也很有效。

于 2019-11-05T10:05:26.410 回答