قرار دادن فایل های استاتیک در پوشه های غیر از wwwroot

محیط

ویژوال استودیو

• ویژوال استودیو ۲۰۱۹

ASP.NET هسته

• 3.1 (صفحه تیغ، MVC)

درباره محل قرار دادن پیش فرض برای فایل های استاتیک

فایل های استاتیک (.js، .css، .png و غیره) به طور پیش فرض در زیر پوشه wwwroot تعیین می شوند. این اجازه می دهد تا کاربران وب سایت برای دیدن .js و .css به طور مستقیم همراه با HTML و منعکس کردن آنها را بر روی صفحه نمایش.

پوشه قرار دادن پیش فرض برای این فایل استاتیک wwwroot است چرا که آن را به نام روش زیر Startup.Configure شرح داده شده در app.UseStaticFiles روش:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

مسیر پوشه فیزیکی "wwwroot" "https://<نام میزبان>/" در URL است. به عنوان مثال، فایل در wwwroot\image\sample.png را می توان در URL تحت https://<نام میزبان>/image.png amp; sample یافت.]

فایل های قرار داده شده در خارج از پوشه wwwroot در اصل از یک URL در وب ارجاع داده نمی شود.

نحوه قرار دادن فایل های استاتیک علاوه بر پوشه wwwroot و تغییر مسیر مرجع در URL

پیکربندی پوشه

این بار می خواهم تابع پوشه wwwroot را ترک کنم، بلکه فایل تصویر را نیز در یک پوشه جداگانه قرار می دهد تا بتواند به آن در وب ارجاع داده شود.

پیکربندی پوشه پروژه باید به صورت زیر باشد، به طوری که می توانید فایل های تصویر را در پوشه Content هر سایت در The Areas ببینید.

در این حالت URL فایل را .png نمونه 1 قرار می دهد.png

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

و

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

شايد به نظر برسه که باشه، ولي اينجا

• https://<Hostname>/site1/image/sample1.png

تا در آن ارجاع داده شود.

به هر حال، اگر شما یک فایل استاتیک علاوه بر پوشه wwwroot قرار دهید، عمل ساخت فایل ممکن است از دست رفته باشد. اگر شما به انتشار ادامه دهید، پرونده قرار داده نمی شود، بنابراین مطمئن باشید که آن را دوباره به محتوا تنظیم کنید.

اضافه کردن یک برنامه

برای در دسترس قرار دادن فایل های استاتیک در پوشه های غیر wwwroot، با روش های اضافی در روش Startup.Configure به صورت زیر تماس app.UseStaticFiles بگیرید:

// 追加
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 فراخوانی روش بدون استدلال، پوشه wwwroot را قادر می سازد. شما می توانید تنظیمات اضافی StaticFileOptions را با عبور به استدلال اول اضافه کنید.

StaticFileOptions.FileProvider پوشه فیزیکی را مشخص می کند که می خواهید ملک به عنوان یک فایل ایستا در حین عبور از PhysicalFileProvider یک نمونه از آن اشاره کند. فایل زیر مسیر مشخص شده در اینجا فایلی است که می تواند در وب ارجاع داده شود. همچنین می تواند ریشه RequestPath URL برای خواص زیر باشد:

env.ContentRootPath این ملک شامل مسیر ریشه (مسیر فیزیکی) برنامه وب است. ایده خوبی است که این را با مسیر نسبی به پوشه هدف ترکیب کنید.

StaticFileOptions.RequestPath ویژگی مسیر ریشه URL را توصیف می کند که به فایل ایستا اشاره می کند. wwwroot پیش فرض https://<ホスト名> بر اساس . همانطور که در کد RequestPath = "/Site1" بالا ، اگر شما نوشتن ریشه https://<ホスト名>/Site1 است. این کار Areas/Site1/Content/xxxx مسیر فیزیکی را با URL پیوند می https://<ホスト名>/Site1/xxxx دهد.

با استفاده از .png به عنوان مثال می توان Areas/Site1/Content/image/sample.png فایل را در مسیر ارجاع https://<ホスト名>/Site1/image/sample.png داد.

بررسی عملیات

index.html محل برچسب img به طوری که شما می توانید تصویر به شرح زیر را ببینید: این مسیر همچنین به تصاویر site1 و site2 به عنوان تعریف شده اشاره می کند.

<!-- 省略 -->

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

اگر آن را اجرا کنید و تصویر را ببینید، این یک موفقیت است.