Swagger — Customizando Swagger UI
Mudando um pouco a interface do Swagger
Olá tudo bem? Hoje vou mostrar uma dica super rápida: como mudar cores, logotipo e outras coisinhas que o Swagger nos mostra.
Não vou constuir um projeto de API completo, então vamos partir do princípio que você já tenha esse projeto existente.
Configurando
Primeiro temos que fazer umas pequenas configuraçãr para surgir efeito. No projeto de Web API, vamos adicionar na pasta wwwroot os seguintes arquivos:
wwwroot\swagger-ui\custom.css
wwwroot\swagger-ui\index.htmlE para que nosso CSS funcione, precisamos acrescentar o middleware UseStaticFiles.
Arquivos estáticos são armazenados no diretório raiz da web do projeto. O diretório padrão é wwwroot, mas pode ser alterado pelo método UseWebRoot.
app.UseStaticFiles();Já nas configurações do Swagger vamos acrescentar no UseSwaggerUI o seguinte:
app.UseSwaggerUI(p =>
{
p.InjectStylesheet("/swagger-ui/custom.css");
}); Ok, agora vamos fazer as mágicas. No conteúdo de custom.css (para testes) acrescente o seguinte:
body {
background-color: yellow;
}No arquivo index.html faça isso:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="custom.css" rel="stylesheet" />
</head>
<body></body>
</html>
Para saber quais controles ou classes podemos mudar, inspecione os objetos da página index.html quando executar o Swagger. A imagem por exemplo, altere o custom.css com isso:
.swagger-ui .topbar-wrapper img {
content: url('https://fakeimg.pl/250x100/ff0000/');
}Rode o projeto para abrir o Swagger e veja que já surgiu efeito:
Pode ser implementado Javascript em conjunto? Sim, basta fazer a mesma coisa como foi feito com CSS usando esta função:
app.UseSwaggerUI(p =>
{
p.InjectJavascript("/swagger-ui/custom.js");
});Nota: caso não surja efeito por algum motivo especial, aplique a declaração !important:
body {
background-color: yellow !important;
}
