如何替换 Swashbuckle 中的 Swagger UI header 徽标

Question

我正在使用 WebAPI 的 Swashbuckle 包，并试图自定义 swagger ui 默认页面的外观。我想自定义默认的 swagger logo/header。我已将以下内容添加到 SwaggerConfig

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

custom-js.js内容如下：

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

这在大多数情况下都有效，但视觉效果有点刺耳，因为默认的 swagger header 在页面加载时可见，在短暂延迟后，下方的 jquery 启动，并且#logo 元素的内容已更新

有没有办法避免这种情况，以便 jquery 作为初始 load/render 的一部分启动并且看起来无缝？

Answer 1

自定义-js.js需要放在所有js文件之后

Answer 2

我最终添加了一个新的 "index.html" 基于 this version 而不是试图修改默认生成的行为

Answer 3

如果你不想创建index.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/

Answer 4

@MichaelD 可以简单地执行以下操作：

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

Answer 5

这对我在 Swashbuckle

中使用最新版本的 Swagger UI 很有效

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

Answer 6

要在 api for .net core 中替换 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 步 - 将 custom.js 文件注入 startup.cs 文件。见下文

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

        });

第 3 步 - 在 api 中启用静态文件（如果未启用）。在 startup.cs.

的 Configure 方法中添加以下代码行

app.UseStaticFiles();

Answer 7

这里是步骤而不是使用 index.html

第 1 步： 创建您的徽标并将其放入一个文件夹中，在我的例子中我创建了一个单独的文件夹（我没有使用 wwwroot）并且我命名为 Content。通过 /Content

使用 StaticFiles 从该文件夹访问流内容

app.UseStaticFiles(); // For the wwwroot folder if you need it
app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(
    Path.Combine(Directory.GetCurrentDirectory(), "Content")),
    RequestPath = "/Content"
});

词干 #2： 在 Content 中创建一个 image 文件夹并放置您的 logo.jpg 文件。右键单击文件并将构建操作更改为 Embedded resource

步骤 #3： 在 Content 中创建一个 css 文件夹并放置一个新文件 swagger-mycustom.css 并将构建操作更改为 Content

在您的 Startup Configure 方法中添加此代码

app.UseSwaggerUI(setupAction =>
{
    ....
    setupAction.InjectStylesheet("/Content/css/swagger-mycustom.css");
    ...
}

第 4 步： 将此添加到您的 css:

img[alt="Swagger UI"] {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url('/Content/images/logo.jpg');
    max-width: 100%;
    max-height: 100%;
}

输出如下所示：

如何替换 Swashbuckle 中的 Swagger UI header 徽标

How to replace Swagger UI header logo in Swashbuckle

asp.net-web-api

swagger-ui

swashbuckle