Как загрузить пользовательскую таблицу стилей с помощью NSwag UseSwaggerUi3 - PullRequest
Новая
       106

Как загрузить пользовательскую таблицу стилей с помощью NSwag UseSwaggerUi3

1 голос
/ 06 мая 2019

Я пытаюсь настроить swagger UI с моей собственной таблицей стилей .css.

Я использую asp net core 2.1 и NSwag.AspNetCore 12.2.5.

Я искали обнаружил, что в предыдущих версиях это можно было сделать, внедрив мою собственную таблицу стилей, а затем внедрив ее в конфигурацию промежуточного программного обеспечения, например: 

app.UseSwagger(o =>
{
   o.InjectStylesheet("/css/custom.css");
});

В последней версии NSwag это, похоже, изменилось на:

app.UseSwaggerUi3(cfg =>
{
   cfg.CustomStylesheetUri = new Uri("/css/custom.css", UriKind.Relative);
});

Но я либо не делаю таблицу стилей доступной, либо мой URI неправильно указывает на нее.

Я не до конца понимаю, как веб-сервер обслуживает чванствофайлы (я предполагаю, что они загружены из пакета nuget NSwag, но я не вижу их в папке вывода сборки), поэтому я предполагаю, что не делаю таблицу стилей доступной правильно.

Делая выше, ясм. <link rel="stylesheet" href="css/custom.css">, добавленный в swagger index.html, но инструменты разработчика chrome говорят, что файл не может быть найден.

Я пытался: 1. Добавить свою таблицу стилей в wwwroot.2. Добавление моей таблицы стилей где-нибудь в проекте и явное копирование ее в выходную папку в моем csproj.3. Встраивание моей таблицы стилей в артефакт сборки.

В моем промежуточном программном обеспечении .UseStaticFiles().

Чего мне не хватает?У кого-нибудь есть рабочий пример?

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Основной ответ

Если он не существует, создайте папку wwwroot в своем проекте и создайте подпапки, такие как css, img, js в папке wwwroot, чтобы у вас было что-то вроде этого: 

wwwroot\css
wwwroot\img
wwwroot\js

Метод UseStaticFiles() ищет папку wwwroot и делает ее работоспособной.

Следующее, что вам нужно убедиться, это то, что ваш файл .csproj для проекта содержит следующее: 

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

Что в основном говорит о том, что все подпапки и файлы в wwwroot будут опубликованы.

С этой настройкой ваш cfg.CustomStylesheetUri = new Uri("/css/custom.css", UriKind.Relative) код теперь должен работать.

Альтернативный вариант

В качестве другого варианта, если вы хотите обслуживать свой файл css из другого каталога за пределами wwwroot, вам нужно будет указать параметр StaticFileOptions в методе UseStaticFiles(), чтобы обслуживать ваш css. Вот мой рабочий пример, но с ReDoc .

Я использую NSwag , который расширяет Swagger для генерации и дальнейшей настройки моего файла спецификации OpenAPI. ( ReDoc через NSwag использует CustomStylesheetUri вставка InjectStylesheet, но я думаю, что он работает так же ). 

        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(Directory.GetCurrentDirectory(), "Content")),
            RequestPath = "/Content"
        });

        app.UseSwagger();
        app.UseSwaggerUi3();
        app.UseReDoc(c => {
            c.Path = "/redoc";
            c.DocumentPath = "/swagger/v1/swagger.json";
            c.CustomStylesheetUri = new Uri("/Content/redoc-styles.css", UriKind.Relative); //added towards the end of the <head>
            c.CustomJavaScriptUri = new Uri("/Content/redoc-javascript.js", UriKind.Relative);  //added at the end of the <body>
        });

Приведенный выше код ссылается на созданную мной папку с именем Content , в которую я добавил файлы css и js . Моя папка находится в корне проекта: MyAPIProject / Content / redoc-styles.css

Наряду с этим вторым примером, еще одна вещь, которую нужно убедиться, это то, что ваш файл .csproj содержит соответствующие записи (в противном случае папка и файлы не будут опубликованы): 

  <ItemGroup>
    <Content Include="Content\css\redoc-styles.css">
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </Content>
    <Content Include="Content\js\redoc-javascript.js">
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </Content>
  </ItemGroup>
0 голосов
/ 06 мая 2019

Я бы порекомендовал вам использовать Swashbuckle .Таким образом, ваш код будет выглядеть так:

Мой пример.Пожалуйста, убедитесь, что ваше промежуточное ПО в правильном порядке 

app.UseStaticFiles();

// Enable middleware to serve generated Swagger as a JSON endpoint.
app.UseSwagger();

// Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.), specifying the Swagger JSON endpoint.
app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint($"/swagger/v1/swagger.json", "Awesome CMS Core API V1");
    c.InjectStylesheet("/swagger-ui/custom.css"); //css in your wwwrootfolder 
});


// Register the Swagger generator, defining one or more Swagger documents
services.AddSwaggerGen(c =>
{
  c.SwaggerDoc("v1", new Info
  {
    Version = "v1",
    Title = "Awesome CMS Core API V1",
    Contact = new Contact { Name = "Tony Hudson", Email = "", Url = "https://github.com/ngohungphuc" }
  });
});
...