Как заменить логотип заголовка Swagger UI в Swashbuckle

Я использую пакет Swashbuckle для WebAPI и пытаюсь настроить внешний вид страницы swagger ui по умолчанию. Я хотел бы настроить логотип/заголовок swagger по умолчанию. Я добавил следующее в SwaggerConfig

.EnableSwaggerUi(c =>
 {
  c.InjectJavaScript(thisAssembly, 
    typeof(SwaggerConfig).Namespace + ".SwaggerExtensions.custom-js.js");
  }

содержимое custom-js.js являются следующими:

$("#logo").replaceWith("<span id="test">test</span>");

это работает по большей части, но визуальный немного раздражает, поскольку заголовок swagger по умолчанию виден во время загрузки страницы и после короткой задержки jquery ниже ногами и содержание элемента # logo обновляется

есть ли способ избежать этого, чтобы jQuery запускался как часть начальной загрузки / рендеринга, и он казался бесшовным?

6
asp.net-web-api swagger-ui swashbuckle

4 ответов

Я закончил тем, что добавил новый "индекс.html " на основе off эта версия вместо того, чтобы пытаться изменить поведение генерируемого по умолчанию

2

Если вы не хотите создать индекс.html, вы также можете обновить логотип с помощью введенного css, это намного быстрее, чем инъекция js.

в конфигурации swagger включите c.InjectStylesheet и указать на css, который вы создали

в самом css:

.logo__img {
 background: url([PathToLogo]) no-repeat;
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width: 64px; /* Width of new image */
 height: 25px; /* Height of new image */
 padding-left: 64px; /* Equal to width of new image */
}

кредиты для CSS трюк: https://css-tricks.com/replace-the-image-in-an-img-with-css/

1

@MichaelD может просто сделать следующее вместо этого:

.logo__img {
    content: url([PathToLogo]);
    width: 72px; /* Width of new image */
    height: 31px; /* Height of new image */
}
1

пользовательский-js.js необходимо разместить после всего JS-файла.

0