آموزش استفاده از کتابخانه های CSS روی CDNهای داخلی (آروان کلود، چابکان، رانفلر) - قسمت دوم

در آموزش قبلی من ادرسهای کتابخانه های شبکه توزیع محتوا روی ابراروان یا اروان کلود رو معرفی کردم. اکنون میخواهم روش استفاده عملی در پروژه و روش کشف نسخه ها روی CDN های داخلی رو آموزش بدم.

در شرایط اینترنت ملی، یکی از راههای رایج برای استفاده از کتابخانه های CSS و JavaScript، لود مستقیم فایلها از شبکه توزیع محتوا (CDN) است. برخی سرویس دهنده های داخلی مثل آروان کلاد، نسخه هایی از کتابخانه های معروف را روی CDN خودشان منتشر کرده اند که بدون نیاز به npm و registry قابل استفاده هستند.

این روش مخصوصاً برای:

پروژه های ساده

تمرین UI

صفحات HTML استاتیک

یا محیطهایی که Node.js در دسترس نیست

بسیار کاربردی است.

1️⃣ استفاده عملی از کتابخانه ها از CDN داخلی

مثال 1: Bootstrap Grid (بدون npm)

آدرس:

https://lib.arvancloud.ir/bootstrap/5.3.0-alpha1/css/bootstrap-grid.css

استفاده در پروژه HTML:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Grid CDN</title>
  <link rel="stylesheet" href="https://lib.arvancloud.ir/bootstrap/5.3.0-alpha1/css/bootstrap-grid.css">
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-6">ستون اول</div>
    <div class="col-6">ستون دوم</div>
  </div>
</div>

</body>
</html>

📌 نکته:
اینجا فقط grid system لود شده، نه کل Bootstrap.

مثال 2: Materialize CSS

آدرس:

https://lib.arvancloud.ir/materialize/1.0.0-rc.2/css/materialize.css

استفاده:

<link rel="stylesheet"
      href="https://lib.arvancloud.ir/materialize/1.0.0-rc.2/css/materialize.css">

<button class="btn waves-effect waves-light">
  دکمه متریالایز
</button>

📌 Materialize کامپوننت محور است و برای پروژه های سریع مناسب است، اما نسخه های CDN معمولاً قدیمی هستند.

مثال 3: MUI (Material UI CSS)

آدرس:

https://lib.arvancloud.ir/mui/3.7.1/css/mui.css

استفاده:

<link rel="stylesheet"
      href="https://lib.arvancloud.ir/mui/3.7.1/css/mui.css">

<button class="mui-btn mui-btn--primary">
  دکمه MUI
</button>

⚠️ نکته مهم برای مقاله:
نسخه های جدید MUI (v5+) کاملاً ری اکت-محور هستند و CSS خالص ندارند.
این نسخه CDN بیشتر برای پروژه های قدیمی یا تمرینی مناسب است.

مثال 4: Ant Design Pro

آدرس:

https://lib.arvancloud.ir/ant-design-pro/2.3.2/ant-design-pro.css

استفاده:

<link rel="stylesheet"
      href="https://lib.arvancloud.ir/ant-design-pro/2.3.2/ant-design-pro.css">

📌 Ant Design در عمل بدون ری اکت کاربرد زیادی ندارد،
ولی برای مشاهده استایلها یا صفحات استاتیک قابل استفاده است.

مثال 5: DaisyUI (بر پایه Tailwind)

آدرس:

https://lib.arvancloud.ir/daisyui/2.9.0/full.css

استفاده:

<link rel="stylesheet"
      href="https://lib.arvancloud.ir/daisyui/2.9.0/full.css">

<button class="btn btn-primary">
  DaisyUI Button
</button>

⚠️ نکته خیلی مهم:
DaisyUI ذاتاً وابسته به تیلویند است.
نسخه CDN فقط برای دمو یا تست ظاهری مناسب است، نه پروژه واقعی.

Modernizr (JavaScript)

آدرس:

https://lib.arvancloud.ir/modernizr/2010.07.06dev/modernizr.js

استفاده:

<script >

Modernizr برای تشخیص قابلیتهای مرورگر است، نه طراحی رابط کاربری UI.

2️⃣ چگونه بفهمیم چه نسخه هایی روی CDN داخلی وجود دارد؟

این بخش خیلی مهمه و کمتر گفته شده 👇

🔍 روش بررسی نسخه ها در لینوکس

روش 1: استفاده از curl

curl https://lib.arvancloud.ir/mui/

یا:

curl https://lib.arvancloud.ir/ant-design-pro/

اگر directory listing فعال باشد:

  • لیست نسخه ها نمایش داده میشود

  • میتوانی ببینی چه ورژنهایی موجودند

روش 2: با wget

wget -qO- https://lib.arvancloud.ir/materialize/

روش 3: مرور دستی با browser یا lynx

lynx https://lib.arvancloud.ir/bootstrap/

یا ساده تر:

  • آدرس را مستقیم در مرورگر باز کن

  • اگر Index فعال باشد، فولدرها دیده میشوند

🪟 روش بررسی نسخه ها در ویندوز

روش 1: PowerShell (بدون ابزار اضافی)

Invoke-WebRequest https://lib.arvancloud.ir/mui/

یا کوتاهتر:

iwr https://lib.arvancloud.ir/ant-design-pro/

روش 2: نصب curl در ویندوز

در ویندوز 10 و 11 معمولاً curl نصب است:

curl https://lib.arvancloud.ir/bootstrap/

3️⃣ بررسی نسخه ها در چابکان و رانفلر (npm-based)

برای این دو سرویس، چون mirror npm هستند، روش بررسی فرق میکند. فرض میکنم شما راهنما و پست قبلی برای تنظیم دانلود و نصب پکیجها رو خوندین:

https://vrgl.ir/qo5gU

بررسی نسخه یک پکیج از npm mirror

npm view @mui/material versions

یا:

npm view antd versions

📌 اگر registry روی چابکان یا رانفلر تنظیم شده باشد:

npm config get registry

و ادامه دستور را برای چابکان لینک زیر را میگذاریم مثلاً:

https://mirror.chabokan.net/repository/npm-proxy/

یعنی:

  • نسخه هایی که npm نشان میدهد

  • از همان mirror دانلود خواهند شد

تست نصب بدون نصب واقعی

npm info antd
npm info @mui/material

اگر اطلاعات برگشت:
✔️ پکیج روی mirror موجود است
اگر timeout شد:
❌ mirror آن نسخه را ندارد

4️⃣ جمع بندی مهم برای مقاله

CDNهای داخلی مثل Arvan:

  • مناسب HTML ساده

  • نسخه ها معمولاً قدیمی

  • بدون npm

چابکان و رانفلر:

  • مناسب پروژه های واقعی

  • پشتیبانی از نسخه های جدید

  • مخصوص npm و Node.js

Tailwind، MUI جدید، Ant Design مدرن:

  • بهتر است از npm استفاده شوند

  • CDN فقط برای دمو یا تمرین سطحی مناسب است

مرا دنبال کنید و روی دکمه عضویت در خبرنامه کلیک کنید.