您如何更改 Swagger 图标？

Question

我正在构建一个 ASP.NET CORE Web API 并使用 Swagger 作为文档。我一直无法更改网站图标。我在 wwwroot 下有一个 swagger-ui 目录，我在其中放置了我的收藏夹图标，但收藏夹图标从未出现过。另外，我正在自定义 js 文件中使用 favascript 更改网站图标。

那么，如何更改 Swagger 的图标？

Answer 1

您需要按如下方式注入 jscript：

1- 创建 /assets/js/docs.js 如下：

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');;
    document.head.removeChild(link);
    link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    document.head.removeChild(link);
    link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '../assets/images/logo_icon.png';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

2- 在您的 startup.cs 中加载脚本

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApiVersionDescriptionProvider provider)
        {
            app.UseSwaggerUI(
                options =>
                {                    
                    options.InjectJavascript("../assets/js/docs.js");  
                });

        }

注意：确保在 .NET Core Configure 方法中启用静态文件。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApiVersionDescriptionProvider provider)
{

    app.UseStaticFiles(); // For the wwwroot folder

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "assets/images")),
        RequestPath = "/assets/images"
    });        

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "assets/js")),
        RequestPath = "/assets/js"
    });

}

Answer 2

这对我有用：

首先，您必须创建 wwwroot 文件夹，并在其中放置一个名为 swagger 的文件夹。编辑您的 csproj 以包含以下行：

<ItemGroup>
    <None Include="wwwroot\*" />
</ItemGroup> 

该目录下的文件必须是Content，Do not copy. 无论如何，这是默认选项。

然后，您必须将两个名为favicon-16x16.png和 的png 文件favicon-32x32.png放在 swagger 文件夹中。

最后要做的事情，app.UseStaticFiles();在之前添加app.UseSwaggerUI();以使其发挥作用。

您还可以在 wwwroot 文件夹下添加 favicon.ico。

** 注意：如果您修改了端点 url，则使用app.UseSwaggerUI(config => config.SwaggerEndpoint("my/swagger/doc/file.json", "Rest API"));wwwroot 下的目录树必须与 url 匹配。即，wwwroot/my/swagger/doc/favicon-16x16.png和wwwroot/my/swagger/doc/favicon-32x32.png。

Answer 3

如果您只需将 favicon.ico 放在 wwwroot 文件夹的根目录下，也可以实现此目的：wwwroot/favicon.ico。favicon.ico 放置在根目录下，将用作默认浏览器选项卡图标。

当然，如前所述，您需要确保您app.UseStaticFiles();的Configure() 方法中有这样的内容，以便为wwwroot 中的文件提供服务。

最后还要确保 .csproj 文件中有以下内容：

  <ItemGroup>
    <None Include="wwwroot\*" />
  </ItemGroup>

Answer 4

你必须从本质上覆盖它。默认情况下，Swagger UI 将图标设置为从 Swagger UI 根中提取。例如，如果您在 加载文档，则将从和/swagger-ui拉取图标。因此，您可以将此目录添加到您的目录中，并在其中添加您自己的图标图像。/swagger-ui/favicon-32x32.png/swagger-ui/favicon-16x16.pngwwwroot