پوشه فایل ها در ناکست جی اس: فونت‌ها و تصاویر

آموزش ویدئویی nuxt.js (Assets)

این مقاله همراه با یک آموزش ویدئویی نیز هست که شما در آن می‌توانید مراحل کار و جزئیات مربوط به پوشه فایل ها در ناکست جی اس را بهتر درک کنید.

پوشه فایل ها در ناکست جی اس چیست؟

به‌طورکلی در ساخت وب‌سایت نیاز است که از تصاویر، فونت‌ها یا فایل های CSS برای طراحی برخی قسمت‌ها استفاده کنید. این قبیل موارد فایل های مختلفی را ایجاد می‌کنند که باید در محل ذخیره سایت شما (هاست وب‌سایت) بارگذاری شوند. بسته به اینکه از چه پلتفرم یا نرم‌افزار یا روشی برای طراحی و ساخت وب‌سایت خود سود می‌برید، محل قرارگیری این فایل ها متفاوت خواهد بود.

در nuxt.js نیز به‌طورکلی به دو طریق عمده می‌توانید چنین فایل هایی را ذخیره کرده و از آنها در ساختار وب‌سایت خود در جایی که نیاز هست، استفاده کنید:

• به کمک پوشه public
• به کمک پوشه assets

ما در این مقاله به هر دو آنها، «پوشه فایل ها در ناکست جی اس» می‌گوییم. در ادامه به نحوه کار هر یک و تفاوت آنها اشاره می‌کنیم.

پوشه public در nuxt.js

همچنان که از نام آن مشخص است، پوشه public برای نگه‌داری و ذخیره فایل هایی به کار می‌رود که می‌توانند به‌صورت عمومی به همگان نمایش داده شوند. یعنی تصاویر یا سایر فایل هایی که در داخل این پوشه قرار می‌گیرند، با تایپ آدرس¹URL سایت و قراردادن علامت / در انتهای آن و سپس ذکر نام فایل در پنجره مرورگر به نمایش درمی‌آیند.

اگر از روش ذکر شده در مقاله «nuxt.js چیست؟» برای نصب ناکست جی اس روی سیستم خود استفاده کرده باشید، پوشه public به‌صورت پیش‌فرض برای شما ایجاد شده است و در لیست پوشه‌های سایت شما قرار دارد.

برای بررسی این موضوع که تصاویر و فایل های قرار گرفته در پوشه public به‌صورت عمومی از طریق آدرس شما در دسترس قرار دارند، می‌توانید یک تصویر دلخواه در داخل این پوشه قرار دهید. مثلاً ما تصویری به نام my-first.webp را در داخل پوشه public خود قرار داده‌ایم.

حال اگر آدرس پیش‌فرض nuxt.js یعنی /http://localhost:3000 را در مرورگر خود وارد کنید و نام تصویر را هم به انتهای آن اضافه کنید، تصویر در پنجره مرورگر به نمایش درمی‌آید.

به همین ترتیب می‌توانید از تصاویر موجود در پوشه public در داخل ساختار وب ‌سایت خود و کدهایی که ایجاد می‌کنید، استفاده کنید. مثلاً اگر از تگ img از تگ‌های html در فایل app.vue استفاده کنید، با قراردادن علامت / و سپس آدرس محل تصویر (که اگر مستقیماً درون پوشه public باشد و پوشه دیگری نداشته باشد فقط ذکر نام آن کافی است) در شاخصه src این تگ، می‌توانید تصویر را درون کد خود فراخوانی کنید:

<template>
  <div>
    <NuxtRouteAnnouncer />
    <h1>this is a test image</h1>
    <img src="/my-first.webp" alt="my first image in nuxt 3" width="420">
  </div>
</template>

خروجی این کد در آدرس پیش‌فرض (صفحه Home) مربوط به nuxt.js به این شکل خودش را نشان می‌دهد:

همان‌طور که ذکر شد پوشه public یکی از پوشه فایل ها در ناکست جی اس است. پوشه دیگر assets نام دارد که در ادامه توضیح می‌دهیم.

پوشه assets در nuxt.js

ممکن است وقتی یک پروژه ناکست جی اس را ایجاد می‌کنید، این پوشه به‌صورت پیش‌فرض برای شما ایجاد نشده باشد. به طریق معمول که در پوشه‌های ویندوز برای خودتان پوشه جدید ایجاد می‌کنید، می‌توانید به محل پوشه‌های پروژه خود رفته و پوشه‌ای با این نام، خودتان ایجاد کنید.

کاربرد پوشه assets

شاید برای شما این سؤال پیش بیاید که با وجود پوشه public دیگر چه نیازی به وجود پوشه assets در یک پروژه nuxt.js است؟ چرا آن را به ‌عنوان پوشه فایل ها در ناکست جی اس در نظر گرفته‌اند؟ پاسخ این پرسش بر می‌گردد به درک مفهوم ساخت و آماده‌سازی وب‌سایت‌ها و نرم‌افزارهای ساخته شده با فریم‌ورک‌های جاوا اسکریپت. در ساختن این‌گونه نرم‌افزارها که اصطلاحاً به آن building an app گفته می‌شود، از ابزارهایی چون Vite و webpack استفاده می‌شود.

آنها فایل های جاوا اسکریپت یا سایر فایل‌های مربوطه را پردازش می‌کنند و با این کار به عملکرد بهینه وب‌سایت ساخته شده با این‌گونه فریم‌ورک‌ها کمک می‌کنند. لذا باید به‌نوعی این‌گونه ابزارها (که به‌صورت پیش‌فرض در فریم‌ورک nuxt.js فعال هستند) را آگاه کرد که چه فایل‌هایی را باید پردازش کنند. کدام‌ها را رها کرده و به حال خود باقی بگذارند. به همین خاطر در ساختار فریم‌ورک ناکست جی اس پوشه assets را قرار داده‌اند.

فایل‌هایی که در داخل این پوشه قرار می‌گیرند، توسط ابزارهای ساخت مانند Vite پردازش شده و بهینه‌سازی می‌شوند. این مسئله به‌خصوص بعد از ساخته‌شدن وب‌سایت و هنگامی که می‌خواهید با دستورهای خاصی آن را برای آنلاین شدن آماده کنید، اهمیت خود را نشان می‌دهد. لذا ممکن است در ظاهر شما تفاوتی بین تصویری که در این پوشه قرار داده‌اید، با موردی که در پوشه public قرار داده بودید، احساس نکنید! اما در عمل و در پشت پرده تفاوت معناداری وجود دارد.

مثال استفاده از پوشه فایل ها در ناکست جی اس

برای درک بهتر پوشه assets در nuxt.js مثالی در این ‌رابطه ذکر می‌کنیم. این بار همان تصویر قبلی را تغییر نام داده و به‌صورت car.webp نام‌گذاری می‌کنیم. سپس در داخل پوشه assets در محل پروژه خود، پوشه‌ای به نام imgs ایجاد کرده و تصویر تغییر نام داده شده را در داخل آن قرار می‌دهیم.

تفاوتی که در هنگام فراخوانی این تصویر در داخل کد وجود دارد، آن است که باید از علامت ~ قبل از ذکر آدرس محل تصویر استفاده کنیم. به‌این‌ترتیب nuxt.js متوجه می‌شود که قصد داریم تصویری را که در پوشه assets قرار دارد، فراخوانی کنیم:

<template>
  <div>
    <NuxtRouteAnnouncer />
    <h1>this is a test image</h1>
    <img src="/my-first.webp" alt="my first image in nuxt 3" width="420">
    <h1>this image comes from assets folder</h1>
    <img src="~/assets/imgs/car.webp" alt="my first image in assets folder" width="420">
  </div>
</template>

در کد فوق به‌خوبی تفاوت نحوه فراخوانی تصویری که در پوشه public قرار گرفته (my-first.webp) را با تصویر موجود در پوشه assets در پروژه (car.webp) مشاهده می‌کنید. البته همان‌طور که گفته شد در خروجی کار و در مرورگر در ظاهر تفاوت خاصی میان این دو حالت دیده نمی‌شود.

تفاوت دیگری که تصاویر و فایل های موجود در پوشه assets با تصاویر قرار داده شده در پوشه public دارند، آن است که دیگر نمی‌توانید با ذکر آدرس فایل و چسباندن آن به انتهای URL سایت خود، به فایل مربوطه دسترسی داشته باشید. یعنی این فایل‌ها برای عموم بازدیدکنندگان سایت شما قابل رؤیت نیستند و از دسترس آنها خارج خواهند بود.

علاوه بر تصویر، فایل های دیگری چون فایل‌های CSS یا فایل‌های فونت و … را نیز می‌توانید در پوشه assets سایت خود قرار دهید. ما به جهت رعایت اختصار در این مقاله به توضیح این موارد نمی‌پردازیم.

جمع‌بندی

در این مقاله به بررسی پوشه فایل ها در ناکست جی اس پرداختیم. همان‌طور که ذکر شد به طور عمده از دو پوشة assets و public می‌توانید برای ذخیره فایل‌ها و تصاویر خود کمک بگیرید. سعی کردیم تفاوت این دو پوشه و نحوه استفاده از آنها را نیز به‌خوبی توضیح دهیم. امیدواریم که مطالب این مقاله به شما در ساخت وب‌سایت ناکست جی اس خودتان کمک کرده باشد.

پاورقی:

• 1
  URL