Asp.net web api 如何在Swashbuckle中替换Swagger UI标题徽标

我正在使用用于WebAPI的Swashback包，并试图自定义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作为初始加载/渲染的一部分启动，并且看起来是无缝的？

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

我最后添加了一个新的基于

---

如果您不想创建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技巧的积分：

---

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

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

---

对于我来说，这在Swashback中的最后一个版本的Swagger UI中起到了作用

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

---

要在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-在startup.cs文件中插入thar custom.js文件。见下文

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

        });

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

app.UseStaticFiles();

---

以下是不使用index.html的步骤

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

wwwroot

），并将其命名为Content。通过

/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: 在

Content

中创建一个

image

文件夹，并将

logo.jpg

文件放入其中。在文件上单击鼠标右键，然后将构建操作更改为嵌入式资源

第三步： 在

Content

中创建一个

css

文件夹，并放置一个新文件

swagger mycustom.css

并将构建操作更改为

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"
});

在

启动时

配置

方法添加此代码

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

输出如下所示：

---

先生，请帮助我在我的asp.net mvc或asp.net核心web api项目中放置此“index.html”的位置。这对我很有效，但必须使用“.swagger ui img”更改类。我建议改用EmbeddedFileProvider。请看：我会在有机会的时候尝试一下，并会更新答案，谢谢你的建议这是唯一对我有效的答案！