如何在 Swashbuckle 中替换 Swagger UI 标题徽标

Question

我正在使用 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>");

这在大多数情况下都有效，但视觉效果有点不和谐，因为页面加载时默认的 swagger 标头是可见的，短暂延迟后，下面的 jQuery 会启动，并且

#logo

元素的内容会更新。

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

Answer 1

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

第1步： 创建您的徽标并将其放入一个文件夹中，在我的例子中，我创建了一个单独的文件夹（我没有使用

wwwroot

）并命名为Content。使用 StaticFiles 通过

/Content

访问此文件夹中的流内容

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： 在

image

内创建一个

Content

文件夹并放置您的

logo.jpg

文件。右键单击该文件并将构建操作更改为嵌入式资源

步骤＃3： 在

css

内创建一个

Content

文件夹并放置一个新文件

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%;
}

输出如下所示：

Answer 2

这对我在 Swashbuckle 中使用最新版本的 Swagger UI 很有用

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

Answer 3

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

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

        });

第 3 步 - 如果未启用，请在 api 中启用静态文件。在startup.cs的Configure方法中添加以下代码行。

app.UseStaticFiles();

Answer 4

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

Answer 5

我最终基于这个版本添加了一个新的“index.html” 而不是尝试修改默认生成的行为

Answer 6

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

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

Answer 7

custom-js.js需要放在所有js文件之后

Answer 8

我正在为 NSwag 使用 @Zinov CSS 技巧，但它停止与新的 Swagger UI 版本一起使用。在研究了这个thread之后，我写了一个回复并给出了一个可行的解决方案：

.swagger-ui svg:not(:root) {
  display: none;
}
.topbar-wrapper .link:before {
  content: url('yourlogo.png');
}