کتابخانه
alpinejs یه کتابخانه جاوااسکریپت سبکه که با چند attribute مستقیم توی HTML به صفحه رفتار تعاملی می ده: منوی باز و بسته، مودال، تب، آکاردئون و فرم زنده. Caleb Porzio ساخته و مجوزش MIT هست. برای سایت هایی مناسبه که به React یا Vue کامل نیازی ندارن.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۶۷۶ کیلوبایت· ۶۸ فایل· انتشار
SHA-256: b4036e9e9ac22fa6f6ae1ba292e015e1f3e9c85d0d79e73e4c8eb9bb139b522e
خیلی از سایت ها فقط چند تا تعامل کوچیک لازم دارن: یه منوی موبایل که باز و بسته بشه، یه مودال، چند تا تب یا فرمی که با انتخاب یه گزینه، بخش های دیگه رو نشون بده. برای این کارها راه انداختن یه پروژه کامل با React یا Vue، همراه با بیلد و بسته بندی، زیادیه. نوشتن همه چیز با jQuery هم کم کم کد رو درهم و برهم می کنه. alpinejs دقیقاً برای همین وسط ساخته شده.
کارش ساده است. state رو با x-data روی یه عنصر HTML تعریف می کنی و بقیه رو با attributeهای همون تگ ها جلو می بری. x-show نمایش و مخفی شدن رو کنترل می کنه، @click یا x-on رویدادها رو می گیره، :class یا x-bind مقدارها رو به ویژگی های تگ وصل می کنه، x-model ورودی فرم رو با داده هماهنگ نگه می داره و x-for لیست می سازه. با عوض شدن داده، صفحه خودش به روز می شه. اگه با Vue کار کرده باشی آشنا به نظر می رسه، فقط بدون مرحله بیلد.
alpinejs جاهایی خوب جواب می ده که HTML رو سمت سرور تولید می کنی و فقط یه لایه تعامل روش می خوای: قالب های وردپرس سفارشی، پروژه های Laravel با Blade، صفحه های فرود و سایت های Tailwind. برای اپلیکیشن بزرگ با روتینگ سمت کلاینت، مدیریت state پیچیده یا کامپوننت های سنگین انتخاب خوبی نیست و یه فریم ورک کامل کارت رو راحت تر می کنه. توی وردپرس هم حواست باشه: بعضی صفحه سازها و افزونه ها attributeهای ناشناس رو از HTML پاک می کنن یا خروجی رو عوض می کنن. قبل از اینکه روی کل سایت پخشش کنی، یه صفحه آزمایشی بساز و تست کن.
موقع استفاده چند نکته رو یادت نره. فایل رو با defer لود کن و فقط یه نسخه ازش توی سایت بذار، چون لود دوباره رفتار عجیب درمیاره. برای قابلیت های اضافه مثل ماسک ورودی، ذخیره state یا انیمیشن باز و بسته شدن، افزونه های رسمی خود پروژه هست، ولی هر کدوم رو باید جدا اضافه کنی. توی سایت های ایرانی بهتره فایل رو از هاست خودت سرو کنی و به CDN خارجی وابسته نباشی، چون وقتی اینترنت بین الملل مشکل داره، منوی سایتت نباید از کار بیفته. نسخه های رسمی و بدون تغییر alpinejs توی مخزن داخلی ما هم در دسترسه.
برای شروع به Node یا بیلد نیازی نداری. مسیر کلی اینه:
توی وردپرس بهتره فایل رو با wp_enqueue_script از functions.php قالب یا یه افزونه کوچیک اضافه کنی تا ترتیب لود درست بمونه و دوبار لود نشه. اگه از bundler مثل Vite استفاده می کنی، بسته رو import کن، روی window.Alpine بذارش و بعد از ثبت افزونه ها و تعریف Alpine.data، متد Alpine.start رو صدا بزن.
اولین تمرین خوب، ساخت یه آکاردئون ساده است. وقتی اون کار کرد، بقیه الگوها هم تقریباً همین شکلی هستن.
یه کتابخانه جاوااسکریپت سبکه که تعامل رو مستقیم با attributeهای HTML به صفحه اضافه می کنه. برای منو، مودال، تب، آکاردئون، فیلتر ساده و فرم های پویا مناسبه و لازم نیست سایتت رو به یه اپلیکیشن SPA تبدیل کنی. کدش هم کنار همون HTML سایت می مونه و خوندنش راحته.
بله. فایل رو با wp_enqueue_script توی قالب یا یه افزونه کوچیک لود کن و attributeها رو توی خروجی HTML بذار. فقط مراقب باش صفحه ساز یا افزونه ای که داری attributeهای ناشناس رو حذف نکنه. قبل از انتشار، روی یه صفحه آزمایشی تست کن.
توی jQuery خودت DOM رو دستکاری می کنی، ولی توی alpinejs وضعیت رو تعریف می کنی و صفحه خودش به روز می شه. Vue معمولاً با بیلد و ساختار کامپوننتی کار می شه، alpinejs ولی روی HTML موجود می شینه. برای پروژه های بزرگ، Vue یا React انتخاب بهتریه.
نه. می تونی فایل رو روی هاست خودت آپلود کنی و از همون لود کنی، یا با npm نصبش کنی. برای سایت های ایرانی همین بهتره، چون وقتی دسترسی به منابع خارجی مشکل داره، سایتت بهشون وابسته نمی مونه. فایل رو کنار بقیه فایل های قالب نگه دار تا همیشه دم دستت باشه.
alpinejs فقط رفتار صفحه رو کنترل می کنه و به زبان یا جهت متن کاری نداره. ظاهر فارسی و RTL به CSS قالب سایتت بستگی داره. فقط انیمیشن ها و جهت باز شدن منوها رو توی نسخه راست به چپ هم تست کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.