مسیرهای فایل

مسیرهای فایل چیستند؟

مسیرهای فایل (File Paths) برای لینک دادن به فایل‌های خارجی مثل تصاویر، CSS، JavaScript و... استفاده می‌شوند.

انواع مسیرهای فایل

دو نوع اصلی مسیر فایل وجود دارد:

• Absolute Path: مسیر کامل از ریشه سرور
• Relative Path: مسیر نسبی به فایل فعلی

Absolute Path

Absolute Path مسیر کامل از ریشه وب‌سایت است. همیشه با / شروع می‌شود.

<img src="/images/logo.png" alt="لوگو">
<link rel="stylesheet" href="/css/style.css">

مزایا:

• کار می‌کند حتی اگر فایل را به پوشه دیگری منتقل کنید
• واضح و خوانا است

معایب:

• در لوکال هاست ممکن است کار نکند
• اگر دامنه تغییر کند، لینک‌ها خراب می‌شوند

Relative Path

Relative Path نسبت به فایل فعلی است. با ./ (همان پوشه) یا ../ (پوشه بالاتر) شروع می‌شود.

<!-- همان پوشه -->
<img src="logo.png" alt="لوگو">

<!-- پوشه بالاتر -->
<img src="../images/logo.png" alt="لوگو">

<!-- پوشه فرعی -->
<img src="./assets/images/logo.png" alt="لوگو">

مزایا:

• قابل انتقال به سرورهای دیگر
• کوتاه‌تر است

معایب:

• اگر ساختار پوشه تغییر کند، لینک‌ها خراب می‌شوند
• پیچیده‌تر برای فهمیدن

مسیرهای نسبی خاص

• filename.ext — فایل در همان پوشه
• ./filename.ext — فایل در همان پوشه (صریح)
• ../filename.ext — فایل در پوشه بالاتر
• ../../filename.ext — فایل در دو پوشه بالاتر
• folder/filename.ext — فایل در پوشه فرعی
• /folder/filename.ext — مسیر از ریشه

URL کامل

می‌توان از URL کامل استفاده کرد:

<img src="https://example.com/images/logo.png" alt="لوگو">
<link rel="stylesheet" href="https://cdn.example.com/style.css">

بهترین شیوه‌ها

• برای فایل‌های داخلی: از relative path استفاده کنید
• برای فایل‌های CDN: از URL کامل استفاده کنید
• برای فایل‌های اصلی: از absolute path استفاده کنید
• از نام‌های معنادار: از فاصله و کاراکتر خاص استفاده نکنید
• حروف کوچک: نام فایل‌ها را با حروف کوچک بنویسید

نکات مهم

• در ویندوز از \ و در لینوکس/مک از / استفاده می‌شود
• در وب همیشه از / استفاده کنید
• فاصله در نام فایل مشکلات ایجاد می‌کند
• از کاراکترهای خاص مثل # ? & در نام فایل استفاده نکنید
• برای لینک‌های داخلی از relative path استفاده کنید

مثال ساختار پوشه

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── logo.png
└── pages/
    └── about.html

از index.html:

• css/style.css — فایل CSS
• js/script.js — فایل JS
• images/logo.png — تصویر
• pages/about.html — صفحه درباره ما

از pages/about.html:

• ../css/style.css — فایل CSS
• ../js/script.js — فایل JS
• ../images/logo.png — تصویر
• ../index.html — صفحه اصلی