您如何更改 Swagger 图标？

Question

我正在构建一个 ASP.NET CORE Web API 并使用 Swagger 作为文档。我无法更改图标。我在 wwwroot 下有一个 swagger-ui 目录，我在其中放置了我的 favicon，但 favicon 永远不存在。此外，我正在自定义 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 配置方法中启用静态文件。

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

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

当然，如前所述，您需要确保在 Configure() 方法中有 app.UseStaticFiles(); 以便在 wwwroot 中提供文件。

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

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

Answer 3

这对我有用：

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

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

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

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

最后一件事，在 app.UseSwaggerUI(); 之前添加 app.UseStaticFiles(); 以使其工作。

您也可以在 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 4

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