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

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

Answer 2

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

要在.net核心的api中替换徽标中的徽标，您必须添加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步-将thar custom.js文件注入startup.cs文件中。见下文

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

        });

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

app.UseStaticFiles();

Answer 4

以下是代替使用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并将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%;
}

输出看起来像这样：

Answer 5

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

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

Answer 6

这对我与Swashbuckle中最新版本的Swagger UI一起工作

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

Answer 7

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

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

7 个答案: