کتابخانه
@shoelace-style/shoelace یه کتابخونه از وب کامپوننت هاست که دکمه، دیالوگ، فرم، تب، منوی کشویی و کلی المان آماده رابط کاربری بهت می ده. چون روی استاندارد خود مرورگر ساخته شده، با وردپرس، ری اکت، ویو یا HTML ساده کار می کنه و به فریم ورک خاصی بند نیست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۷٫۱ مگابایت· ۵۱۹۵ فایل· انتشار
SHA-256: c89692979053a4ac09e2eea9ec8671f22055c91c1962479448100b8572b42428
وقتی می خوای یه صفحه یا قالب وردپرسی رو با رابط کاربری تمیز بسازی، معمولا دو راه داری. یا یه فریم ورک کامل میاری که کل پروژه رو به خودش وابسته می کنه، یا تک تک المان ها رو دستی می نویسی. @shoelace-style/shoelace راه سومه: مجموعه ای از وب کامپوننت ها، یعنی تگ های سفارشی HTML مثل sl-button و sl-dialog که مرورگر خودش می فهمه. مجوزش MIT هست و تو پروژه های شخصی و تجاری می تونی ازش استفاده کنی، ولی متن مجوز رو یه بار خودت هم بخون.
تو این بسته چیزهایی هست که تقریبا هر سایتی دیر یا زود بهشون نیاز پیدا می کنه: دکمه، ورودی متن، select، چک باکس، سوئیچ، تب، dropdown، dialog، drawer، tooltip، alert و ابزارهایی مثل color picker و rating. ظاهر کامپوننت ها با CSS custom properties عوض می شه و برای شخصی سازی عمیق تر می تونی از ::part استفاده کنی. تم روشن و تیره هم داره. دسترس پذیری هم جدی گرفته شده، یعنی کار با کیبورد و صفحه خون ها از اول تو طراحی حساب شده.
برای کی مناسبه؟ اگه یه سایت شرکتی وردپرسی داری که چند بخش تعاملی می خواد، یه پنل سفارشی می سازی، یا پروژه ات چند تکنولوژی رو قاطی کرده، Shoelace خوب جواب می ده. چون کامپوننت ها به فریم ورک وابسته نیستن، تو یه صفحه ساده هم می شه ازشون استفاده کرد. ولی اگه سایتت فقط چند صفحه متن و تصویره، لازم نیست کتابخونه اضافه کنی. اگه هم چیدمان خیلی خاص راست به چپ می خوای، قبل از قطعی کردن انتخاب، چند تا کامپوننت اصلی رو تو پروژه خودت امتحان کن و رفتارشون رو با متن فارسی ببین.
برای سایت های ایرانی یه نکته عملی هم هست. اگه فایل ها رو از یه CDN خارجی بارگذاری کنی، تو روزهایی که اینترنت بین الملل مختل می شه، رابط سایتت هم از کار می افته. بهتره فایل ها رو روی هاست خودت بذاری و فقط کامپوننت های لازم رو import کنی تا صفحه سنگین نشه. فونت فارسی رو هم با متغیرهای CSS خود کتابخونه می تونی عوض کنی تا ظاهر کامپوننت ها با بقیه سایت یکدست بشه. نسخه های رسمی و بدون تغییر این بسته تو مخزن داخلی ما هم در دسترسه. اگه قراره یه پروژه بلندمدت روش بنا کنی، وضعیت نگهداری پروژه رو هم تو صفحه رسمی اش چک کن.
کار با Shoelace سه مرحله اصلی داره: بارگذاری فایل ها، فعال کردن تم و استفاده از تگ ها. کد آماده پایین همین صفحه رو هم می تونی مستقیم تو پروژه ات بذاری.
تو وردپرس، فایل ها رو با wp_enqueue_style و wp_enqueue_script از داخل قالب یا افزونه خودت لود کن. اسکریپت باید از نوع module باشه؛ اگه وردپرست این رو خودش پشتیبانی نمی کنه، با فیلتر script_loader_tag ویژگی type="module" رو بهش اضافه کن. بعد از هر تغییر، کش سایت رو هم پاک کن.
Shoelace یه کتابخونه از وب کامپوننت هاست و به فریم ورک خاصی وابسته نیست. چون از استاندارد مرورگر استفاده می کنه، تو HTML ساده، وردپرس، ری اکت، ویو و پروژه های مشابه هم می شه ازش استفاده کرد. فقط تو بعضی فریم ورک ها ممکنه برای وصل کردن رویدادها چند تنظیم کوچیک لازم باشه.
فایل های CSS و جاوااسکریپت رو از مخزن بگیر و روی هاست خودت بذار. بعد با wp_enqueue_style و wp_enqueue_script تو قالب یا افزونه لودشون کن و اسکریپت رو از نوع module تعریف کن. بعدش می تونی تگ هایی مثل sl-button رو تو قالب یا محتوای صفحه بنویسی.
فونت رو با متغیرهای CSS خود کتابخونه عوض می کنی و معمولا مشکلی پیش نمیاد. ولی ممکنه چیدمان راست به چپ تو همه کامپوننت ها کامل نباشه، پس تو پروژه خودت تستش کن. مخصوصا dropdown، tooltip و آیکون های جهت دار رو با دقت بررسی کن.
اگه فایل ها رو روی هاست داخلی خودت بذاری، بله و به اینترنت بین الملل نیازی نداره. مشکل وقتی پیش میاد که کتابخونه رو از CDN خارجی لود کنی. پس فایل ها رو خودت میزبانی کن و مسیر آیکون ها رو هم روی همون هاست تنظیم کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.