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

Я создал личный WEB API, используя Swashbuckle и Swagger API.

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

Прикреплена часть образа, которую я хочу изменить.

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


asp.net-web-api swashbuckle swagger-ui
person Richard    schedule 29.03.2016    source источник
comment
Цвет можно изменить, внедрив css через файл swaggerconfig.cs.   -  person VisualBean    schedule 29.03.2016

Ответы (5)


arrow_upward
16
arrow_downward

Вот шаги, которые я предпринял:

  1. Создайте новый файл SwaggerHeader.css
  2. Щелкните правой кнопкой мыши SwaggerHeader.css, выберите Свойства. Задайте для действия Build значение Встроенный ресурс.
  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;
}

person Richard    schedule 30.03.2016
comment
Что такое ProjectName.FolderName в ProjectName.FolderName.SwaggerHeader.css? Это пространство имен сборки? - person Shiva; 19.02.2018
comment
В № 3 вам не хватает двойной кавычки перед ProjectName. - person user2023861; 03.05.2018
comment
# 5, добавить изображение в каталог - person jbooker; 12.11.2020

arrow_upward
4
arrow_downward

  1. Первый шаг — добавить новый файл css в ваш проект с вашими пользовательскими правилами. Например :

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

  2. Щелкните правой кнопкой мыши новый файл и выберите «Свойства». В «Действиях сборки» выберите «Встроенные ресурсы».

  3. Внутри файла SwaggerConfig вставьте таблицу стилей. Имя ресурса должно быть "Логическим именем" для ресурса. Именно здесь я застрял, но благодаря этот документ Swashbuckle я мог вывести логическое имя, следуя правилу:

    Пространство имен по умолчанию для папки "точка" вашего проекта, содержащей имя файла ресурса "точка" с расширением.

Он основан на пространстве имен проекта по умолчанию, расположении файла и расширении файла. Например, при наличии пространства имен по умолчанию «YourWebApiProject» и файла, расположенного в «/SwaggerExtensions/index.html», ресурсу будет присвоено имя «YourWebApiProject.SwaggerExtensions.index.html».

Например :

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

arrow_upward
2
arrow_downward

введите здесь описание изображения

Запускать

 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 Swagger

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;
        
    }
person Rokive    schedule 22.08.2020

arrow_upward
1
arrow_downward

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

Цитата из файла SwaggerConfig.cs

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

Не забудьте установить действие сборки таблицы стилей на «Встроенный ресурс».

person VisualBean    schedule 30.03.2016

arrow_upward
1
arrow_downward

В качестве альтернативы я создал custom.css в папке wwwroot и просто добавил

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

и это тоже сработало.

person vidriduch    schedule 05.11.2019