Asp.net-Web-Api

如何在 Swashbuckle 中替換 Swagger UI 標題徽標

  • July 9, 2020

我正在為 WebAPI 使用 Swashbuckle 包,並嘗試自定義 swagger ui 預設頁面的外觀。我想自定義預設的招搖標誌/標題。我已將以下內容添加到 SwaggerConfig

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

custom-js.js的內容如下:

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

這在大多數情況下都有效,但視覺效果有點刺眼,因為預設的招搖標題在頁面載入時可見,並且經過短暫的延遲後,下面的 jquery 會啟動並且 #logo 元素的內容會更新

有沒有辦法避免這種情況,以便 jquery 作為初始載入/渲染的一部分啟動並且它看起來是無縫的?

我最終基於此版本添加了一個新的“index.html”, 而不是嘗試修改預設生成的行為

如果不想創建 index.html,也可以用注入的 css 更新 logo,這比 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/

引用自:https://stackoverflow.com/questions/38713764