Änderungen an Swagger UI Header

Question

Ich habe eine persönliche WEB API mit Swashbuckle und Swagger API erstellt.

Während ich in der Lage bin, dies erfolgreich zu integrieren, möchte ich die Standardbenutzeroberfläche für Swagger ändern. Ändern der Farbe der Kopfzeile und Ersetzen des Swagger-Bildes

Ist dies möglich, indem vorhandene Dateien zu modifizieren?

Answer 1

Dies sind die Schritte, die ich nahm:

1. Erstellen Sie eine neue Datei SwaggerHeader.css
2. Rechtsklick auf SwaggerHeader.css, wählen Eigenschaften. Set Build Aktion zu Eingebettete Ressource.

3. In SwaggerConfig.cs, fügen Sie die folgenden Codezeile:

   .EnableSwaggerUi ("Document/{* assetPath}", c => { c.InjectStylesheet (typeof (SwaggerConfig) ist.Anordnung, ProjectName.FolderName .SwaggerHeader.css ");
   }

4. SwaggerHeader.css sieht aus wie die folgende Liste:

/* swagger ui customization */ 
 
body.swagger-section #header { 
 
    background-color: white; 
 
    background: url(your-new-logo.png) no-repeat; 
 
    background-position-x: 250px; 
 
    height: 50px; 
 
} 
 

 
body.swagger-section #header .swagger-ui-wrap #logo { 
 
     display: none; 
 
}

Answer 2

die Farbe zu ändern, können Sie ein neues Stylesheet aus den SwaggerConfig.cs

Qoute

Verwenden Sie die „InjectStylesheet“ Option Datei injizieren, um die UI mit einem oder mehreren W eitere CSS-Stylesheets zu bereichern . Die Datei muss in Ihrem Projekt als "Eingebettete Ressource" enthalten sein, und dann wird die "Logische Name" der Ressource wie unten gezeigt an die Methode übergeben. c.InjectStylesheet(containingAssembly,"Swashbuckle.Dummy.SwaggerExtensions.testStyles1.css");

Denken Sie daran, beim Aufbau Aktion des Sheet auf „Ressourcen Embedded“.