Umístění statických souborů do jiných složek než wwwroot

Prostředí

Visual Studio

• Visual Studio 2019

ASP.NET jádro

• 3.1 (Stránka břitvy, MVC)

Výchozí umístění statických souborů

Statické soubory (.js, .css, .png atd.) jsou ve výchozím nastavení určeny jako soubory pod složkou wwwroot. To umožňuje uživatelům webových stránek zobrazit .js a .css soubory přímo spolu s HTML a odrážet je na obrazovce.

Výchozí složka umístění pro tento statický soubor je Startup.Configure wwwroot, protože volá následující metodu app.UseStaticFiles posanou v metodě:

public class Startup
{
  // 省略

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
    // 省略

    app.UseStaticFiles();

    // 省略
  }
}

Cesta fyzické složky "wwwroot" je "https://<název hostitele>/" v adrese URL. Například soubor v souboru wwwroot\image\sample.png naleznete v adrese URL pod https://<název hostitele>/image.png a sample.]

Soubory umístěné mimo složku wwwroot nejsou v podstatě odkazovány z adresy URL na webu.

Jak umístit statické soubory kromě složky wwwroot a změnit referenční cestu na adrese URL

Konfigurace složky

Tentokrát chci ponechat funkci složky wwwroot, ale také umístit soubor obrázku do samostatné složky, aby na něj bylo možné odkazovat na webu.

Konfigurace složky projektu by měla být následující, abyste viděli obrazové soubory ve složce Obsah každého webu v oblastech.

V tomto stavu adresa URL .png souboru v ukázce1.png

• https://<název_hostitele>/arenas/site1/content/image/sample1.png

A

• https://<Název_hostitele>/site1/content/image/sample1.png

Může se to zdát, ale tady

• https://<Název hostitele>/site1/image/sample1.png

odkazovat v .

Mimochodem, pokud kromě složky wwwroot umístěte statický soubor, může chybět akce sestavení souboru. Pokud budete pokračovat v publikování, soubor nebude umístěn, proto se ujistěte, že jste ho nastavili zpět na obsah.

Přidání programu

Chcete-li zpřístupnit statické soubory ve Startup.Configure složkách, které nejsou ve složce wwwroot, app.UseStaticFiles zavolejte další metody v metodě následujícím způsobem:

// 追加
using Microsoft.Extensions.FileProviders;
using System.IO;

// 省略

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 省略

  // wwwroot フォルダで静的ファイル参照を有効にする
  app.UseStaticFiles();

  // Site1 用の物理コンテンツフォルダと参照 URL を紐づける
  app.UseStaticFiles(new StaticFileOptions()
  {
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site1/Content")),
    RequestPath = "/Site1",
  });

  // Site2 用の物理コンテンツフォルダと参照 URL を紐づける
  app.UseStaticFiles(new StaticFileOptions()
  {
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site2/Content")),
    RequestPath = "/Site2",
  });

  // 省略
}

app.UseStaticFiles Volání metody bez argumentů povolí složku wwwroot. Další nastavení můžete StaticFileOptions přidat předáním do prvního argumentu.

StaticFileOptions.FileProvider Určuje fyzickou PhysicalFileProvider složku, na kterou má vlastnost odkazovat jako na statický soubor při předávání instance aplikace . Soubor pod zde zadanou cestou je soubor, na který lze odkazovat na webu. Může to být také RequestPath kořen adresy URL pro následující vlastnosti:

env.ContentRootPath Vlastnost obsahuje kořenovou cestu (fyzickou cestu) webového programu. Je dobré to zkombinovat s relativní cestou k cílové složce.

StaticFileOptions.RequestPath Vlastnost popisuje kořenovou cestu adresy URL, která odkazuje na statický soubor. Výchozí webová_složka https://<ホスト名> je založena na . Stejně jako ve RequestPath = "/Site1" výše uvedeném kódu, pokud píšete https://<ホスト名>/Site1 je kořen. Tím Areas/Site1/Content/xxxx se propojí https://<ホスト名>/Site1/xxxx fyzická cesta s adresou URL.

Pomocí sample1.png jako příklad lze Areas/Site1/Content/image/sample.png na soubor https://<ホスト名>/Site1/image/sample.png odkazovat v cestě.

Kontrola operace

index.html Umístěte značku img tak, abyste viděli obrázek následujícím způsobem: Cesta také odkazuje na obrazy site1 a site2, jak jsou definovány.

<!-- 省略 -->

<div class="text-center">
	<h1 class="display-4">Welcome</h1>
	<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- ここから追加 -->
<img src="~/image/sample.png" />
<img src="~/site1/image/sample1.png" />
<img src="~/site2/image/sample2.png" />
<!-- ここまで追加 -->

Pokud ji spusťte a uvidíte obrázek, je to úspěch.