Asp.net-Web-Api
如何在 Swashbuckle 中替換 Swagger UI 標題徽標
我正在為 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/