Swagger (Swashbuckle) hide header

问题:

I use Swashbuckle to add Swagger documentation to my ASP.NET Web API project. How can I hide default header (with swagger logo) from documentation page without injecting CSS?

回答1:

Unfortunately I think you can do it olny by javascript right now.

In your SwaggerConfig.cs you can inject a .js file like this:

.EnableSwaggerUi(c =>
{                        
    c.InjectJavaScript(thisAssembly, "yournamespace.yourscript.js");
});

So in this script you can do whatever you want, like hide the header:

document.querySelector("#header").style.display = "none";

This post shows how to customize the header putting two text boxes on it.

Edit:

The approach suggested in @dimaKudr's answer is better. Inject a CSS style is enough to hide the menu (JS is not necessary).

回答2:

When I injected JS as suggested above, header was blinking at the page loading. It was shown for a second and then was disabled by script. There is approach that works better for me. https://github.com/domaindrivendev/Swashbuckle/issues/476

You can inject CSS instead of JS:

#header {
display:none;
}

回答3:

When I first ran into this I started injecting css/js but each time it was a struggle and kind of "hackish" to hide stuff with injected css. So after a while I simply replaced the index file with a modified version of this index.html You can modify it as you like. Removing the div with the id=header will remove the header. Also this makes things such as replacing the logo etc much simpler. For the logo part you could set the logo src to en 64-bit encode as shown here encode image. Also removing the linked favicon in the tab is as simple as removing the line. Also adding links to other pages etc is trivial. Injecting the index in you swaggerconfig as this

c.CustomAsset("index", thisAssembly, "Path.To.index.html");

Remember to set your index to embedded resource.