将嵌入的js/css文件注入Swashbuckle

Question

可以通过将 js/css 放入

/wwwroot

中，然后使用

InjectJavascript

和

InjectStylesheet

选项来包含 js/css。

但是我怎样才能注入作为嵌入资源存在的文件呢？它曾经是可能的（如果我没记错的话），但我不知道如何为 Swashbuckle 的 AspNetCore 版本做到这一点。

（我不是问如何嵌入文件，而是问如何告诉 Swashbuckle 使用它。）

Answer 1

要在 ASP.NET Core 中自定义 Swashbuckle UI，正如您所说，我们需要使用 SwaggerUIOptions 的

InjectJavascript

和

InjectStylesheet

选项。

例如，我使用 Swashbuckle.AspNetCore 6 创建一个 Asp.net 6 应用程序

然后，在

wwwroot

文件夹中添加css和javascript填充。

最后，在program.cs文件中，启用静态文件中间件并注入css和javascript文件，如下所示：

app.UseStaticFiles();
app.UseSwagger();
app.UseSwaggerUI(c =>
{
    c.InjectStylesheet("/swagger-ui/css/custom.css");
    c.InjectJavascript("/swagger-ui/js/CustomJavaScript.js");
});

结果是这样的：

Answer 2

在 Swashbuckle.AspNetCore 中，SwaggerUIOptions 的

InjectJavascript

和

InjectStylesheet

背后的秘密在于它们都是 扩展。当您揭开它们所做的事情时，它们会构建 html 元素并将其附加到 SwaggerUIOptions

HeadContent

属性，这实际上是注入的内容，以将其他内容添加到 Swagger 生成的 html 中。

这意味着您可以轻松创建自己的扩展来执行相同的操作，但注入raw样式或脚本。

这是一个执行此操作的示例：

    /// <summary>
    /// Injects additional CSS styles into the index.html page.
    /// </summary>
    /// <param name="options">The options being extended.</param>
    /// <param name="content">The content of the &lt;style&gt; tag.</param>
    /// <param name="media">The target media - i.e. the link "media" attribute</param>
    public static void InjectRawStylesheet(this SwaggerUIOptions options, string content, string media = "screen")
    {
        var builder = new StringBuilder(options.HeadContent);
        builder.AppendLine($"<style media='{media}' type='text/css'>");
        builder.AppendLine(content);
        builder.AppendLine("</style>");
        options.HeadContent = builder.ToString();
    }

    /// <summary>
    /// Injects additional JavaScript files into the index.html page
    /// </summary>
    /// <param name="options">The options being extended.</param>
    /// <param name="content">The content of the &lt;script&gt; tag.</param>
    /// <param name="type">The script type - i.e. the script "type" attribute</param>
    public static void InjectRawJavascript(this SwaggerUIOptions options, string content, string type = "text/javascript")
    {
        var builder = new StringBuilder(options.HeadContent);
        builder.AppendLine($"<script type='{type}'>");
        builder.AppendLine(content);
        builder.AppendLine("</script>");
        options.HeadContent = builder.ToString();
    }

对于使用这些扩展来注入嵌入式资源，它看起来像这样：

app.UseSwaggerUI(options =>
{
    options.InjectRawJavascript(MyProject.Properties.Resources.MyEmbeddedResource);
}