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

Question

我正在使用Swashbuckle包用于WebAPI,我正在尝试自定义swagger ui默认页面的外观.我想自定义默认的swagger徽标/标题.我在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作为初始加载/渲染的一部分启动,它看起来无缝？

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

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

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

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

        });

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

app.UseStaticFiles();

Answer 5

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