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

【问题标题】：How to replace Swagger UI header logo in Swashbuckle如何在 Swashbuckle 中替换 Swagger UI 标题徽标
【发布时间】：2016-08-02 07:03:30
【问题描述】：

我正在为 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 作为初始加载/渲染的一部分加入，并且看起来是无缝的？

【问题讨论】：

标签： asp.net-web-api swagger-ui swashbuckle

【解决方案1】：

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

【讨论】：

【解决方案2】：

这里是步骤而不是使用 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 文件。右键单击该文件并将 Build Action 更改为 Embedded resource

第 3 步： 在Content 中创建一个css 文件夹并放置一个新文件swagger-mycustom.css 并将Build Action 更改为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%;
}

输出如下：

【讨论】：

我建议改用 EmbeddedFileProvider。见：stackoverflow.com/a/44120595/3115559
有机会我会试一试，并会更新答案，谢谢建议

【解决方案3】：

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

【讨论】：

先生，请帮助我将这个“index.html”放在我的 asp.net mvc 或 asp.net core web api 项目中。

【解决方案4】：

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

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

【讨论】：

这对我有用！

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

要在 .net core 的 api 中替换 swagger 中的 logo，您必须添加 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 文件中注入 thar custom.js 文件。见下文

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

        });

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

app.UseStaticFiles();

【讨论】：

【解决方案7】：

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

【讨论】：