web-dev-qa-db-ja.com

SwashbuckleでSwaggerUIヘッダーロゴを置き換える方法

WebAPI用のSwashbuckleパッケージを使用しており、SwaggerUIのデフォルトページのルックアンドフィールをカスタマイズしようとしています。デフォルトの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が初期ロード/レンダリングの一部として開始され、シームレスに表示されるようにする方法はありますか？

asp.net-web-apiswagger-uiswashbuckle
11
Abhijeet Patel

デフォルトで生成されたものの動作を変更しようとする代わりに、 このバージョン に基づいて新しい「index.html」を追加することになりました

4
Abhijeet Patel

Index.htmlを作成したくない場合は、挿入されたcssでロゴを更新することもできます。これはjs注入よりもはるかに高速です。

Swagger configで、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/

3
MichaelD

@MichaelDは、代わりに次のことを簡単に行うことができます。

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

Custom-js.jsは、すべてのjsファイルの後に配置する必要があります。

0
Fan TianYi

.net CoreのAPIでSwaggerのロゴを置き換えるには、custom.jsファイルを追加する必要があります。

以下の手順に従ってロゴを変更してください。

ステップ1-custom.jsファイルを作成し、その中に次のコードを追加します

(function () {
window.addEventListener("load", function () {
    setTimeout(function () {

        var logo = document.getElementsByClassName('link');

        logo[0].children[0].alt = "Logo";
        logo[0].children[0].src = "/logo.png";
    });
}); })();

ステップ2-startup.csファイルにtharcustom.jsファイルを挿入します。下記参照

app.UseSwaggerUI(c =>
        {
            c.InjectJavascript("/custom.js");

        });

ステップ3-有効になっていない場合は、APIで静的ファイルを有効にします。 startup.csのConfigureメソッドに以下のコード行を追加します。

app.UseStaticFiles();
0
Tushar patel

これは、SwashbuckleのSwaggerUIの最後のバージョンで機能しました

.swagger-ui img {
     content: url([logo_path]);
     width: 140px; /* width of your logo */
     height: 40px; /* height of your logo */
}
0
cesarmart