Изменения в заголовке пользовательского интерфейса Swagger

Question

Я создал персональный WEB-API с использованием Swashbuckle и Swagger API.

Хотя я могу интегрировать это успешно, я хотел бы изменить пользовательский интерфейс по умолчанию для Swagger. Изменение цвета заголовка и замена изображения swagger.

Возможно ли это путем изменения существующих файлов?

Answer 1

Эти шаги, которые я взял:

1. Создать новый файл SwaggerHeader.css
2. правой кнопкой мыши на SwaggerHeader.css, выберите Свойства. Set Построение Действие к Вмещенный ресурс.

3. В SwaggerConfig.cs, добавьте ниже строки кода:

   .EnableSwaggerUi ("Документ/{* assetPath}", с => { 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

Чтобы изменить цвет, вы можете придать новую таблицу стилей

Qoute из SwaggerConfig.cs файла

Используйте опцию «InjectStylesheet», чтобы обогатить пользовательский интерфейс с одним или несколькими а опо лни тельная CSS Стилей , Файл должен быть включен в ваш проект как «Встроенный ресурс», а затем«Логическое имя» передается методу, как показано ниже. c.InjectStylesheet(containingAssembly,"Swashbuckle.Dummy.SwaggerExtensions.testStyles1.css");

Не забудьте установить Построить Действие таблицы стилей к "Embedded Resource".