您如何更改 Swagger 图标？

Posted 2023-03-09

【中文标题】您如何更改 Swagger 图标？

【英文标题】：How do you change the Swagger favicon?

【发布时间】：2019-01-06 19:56:24

【问题描述】：

我正在构建一个 ASP.NET CORE Web API 并使用 Swagger 作为文档。我无法更改图标。我在 wwwroot 下有一个 swagger-ui 目录，我在其中放置了我的 favicon，但 favicon 永远不存在。此外，我正在自定义 js 文件中使用 favascript 更改网站图标。

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

【参考方案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"
    );

【讨论】：

上面的 JS 对我有用。唯一的问题是在运行 JS 之前它仍然显示默认值的一小段时间。

【参考方案2】：

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

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

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

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

【参考方案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。

【参考方案4】：

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

【讨论】：

感谢您的快速回复！在我的项目中，我在 swagger-ui 目录下有 png 文件。但是，当我在 localhost 下运行我的项目时，png 文件不在我的 swagger-ui 目录下。关于他们为什么失踪的任何想法？

把目录名从swagger-ui改成swagger，把上面提到的同名的两个png文件放到上面。

以上对我不起作用。事实上，我可以看到它从<url root>/swagger/ui/images 获取上面的图像，所以我把它们放在那里，但我仍然在浏览器选项卡中获得默认的招摇图标。虽然我没有使用 asp.core（它只是 asp.net），所以不确定这是否会改变事情..