Statik dosyaları wwwroot dışındaki klasörlere yerleştirme

Ortam

Visual Studio

• Visual Studio 2019

ASP.NET Çekirdek

• 3.1 (Razor sayfası, MVC)

Statik dosyalar için varsayılan yerleşim konumu hakkında

Statik dosyaların (.js, .css, .png vb.) varsayılan olarak wwwroot klasörü altında olduğu belirlenir. Bu, web sitesi kullanıcılarının .js görmelerini ve dosyaları doğrudan HTML ile birlikte .css ve ekrana yansıtmalarını sağlar.

Bu statik dosyanın varsayılan yerleşim klasörü Startup.Configure wwwroot'dur, çünkü yöntemde açıklanan aşağıdaki app.UseStaticFiles yöntemi çağırır:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

"wwwroot" fiziksel klasörünün yolu URL'de "https://<ana bilgisayar adı>/" dır. Örnek olarak, wwwroot\image\sample.png dosyasındaki dosya URL'de https://<host name>/image.png amp; sample altında bulunabilir.]

wwwroot klasörünün dışına yerleştirilen dosyalara aslında Web'deki bir URL'den başvurulmez.

Wwwroot klasörüne ek olarak statik dosyalar nasıl yerleştirilir ve URL'deki başvuru yolu nasıl değiştirilir

Klasör yapılandırması

Bu kez, wwwroot klasörünün işlevini bırakmak istiyorum, aynı zamanda görüntü dosyasını Web'de başvurulabilmesi için ayrı bir klasöre yerleştirmek istiyorum.

Projenin klasör yapılandırması aşağıdaki gibi olmalıdır, böylece her sitenin İçerik klasöründeki görüntü dosyalarını Alanlar'da görebilirsiniz.

Bu durumda, URL dosyayı örnek1'de .png.png

• https://<hostname>/arenas/site1/content/image/sample1.png

Ve

• https://<Ana BilgisayarAdı>/site1/content/image/sample1.png

öyle gibi görünebilir, ama burada

• https://<Ana BilgisayarAdı>/site1/image/sample1.png

'de başvurulacak.

Bu arada, wwwroot klasörüne ek olarak statik bir dosya yerleştirirseniz, dosyanın yapı eylemi eksik olabilir. Yayımlamaya devam ederseniz, dosya yerleştirilmez, bu nedenle içeriğe geri ayarladığınızdan emin olun.

Program ekleme

Statik dosyaları wwwroot olmayan klasörlerde kullanılabilir hale getirmek Startup.Configure için, yöntemdeki ek app.UseStaticFiles yöntemleri aşağıdaki gibi çağırın:

// 追加
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 Yöntemi bağımsız değişkenler olmadan çağırmak, wwwroot klasörünü etkinleştirir. İlk bağımsız StaticFileOptions değişkene geçerek ek ayarlar ekleyebilirsiniz.

StaticFileOptions.FileProviderPhysicalFileProviderbir örneğini geçirirken özelliğin statik dosya olarak başvurmasını istediğiniz fiziksel klasörü belirtir. Burada belirtilen yolun altındaki dosya, Web'de başvurulabilecek bir dosyadır. RequestPathAyrıca, aşağıdaki özellikler için URL'nin kökü de olabilir:

env.ContentRootPath Özellik, Web programının kök yolunu (fiziksel yolu) içerir. Bunu hedef klasörün göreli yolu ile birleştirmek iyi bir fikirdir.

StaticFileOptions.RequestPath Özellik, statik dosyaya başvuran URL'nin kök yolunu açıklar. Varsayılan wwwroot https://<ホスト名> temel alınarak . Yukarıdaki kodda olduğu RequestPath = "/Site1" gibi, yazarsanız https://<ホスト名>/Site1 köküdür. Bu, Areas/Site1/Content/xxxx fiziksel https://<ホスト名>/Site1/xxxx yolu URL ile ilişkilendirır.

Örnek olarak örnek1.png kullanılarak, Areas/Site1/Content/image/sample.png dosyaya https://<ホスト名>/Site1/image/sample.png yolda başvurulabilir.

İşlemi denetle

index.html Görüntüyü aşağıdaki gibi görebilmek için img etiketini yerleştirin: Yol, tanımlandığı gibi site1 ve site2 görüntülerine de başvurur.

<!-- 省略 -->

<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" />
<!-- ここまで追加 -->

Çalıştırırsanız ve görüntüyü görürseniz, bu bir başarıdır.