کتابخانه
instantsearch.css یه کتابخانه CSS از Algolia با مجوز MIT هست که ظاهر ویجت های InstantSearch رو استایل می ده. باکس جستجو، لیست نتایج، فیلترها و صفحه بندی فقط با اضافه کردن یه فایل ظاهر مرتبی پیدا می کنن. اگه یه جستجوی زنده ساختی و نمی خوای همه چیز رو از صفر استایل بزنی، نقطه شروع خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۷۵۳ کیلوبایت· ۱۹ فایل· انتشار
SHA-256: 14e2f0ba5f99d9514821eb4c57a120cf925dc157bdadac7b3f64a46f4d1d5a43
instantsearch.css یه بسته CSS هست که Algolia برای استایل دادن به رابط های جستجوی مبتنی بر InstantSearch منتشر کرده. InstantSearch مجموعه ای از کتابخانه های رابط کاربریه که با جاوااسکریپت ساده، ری اکت، ویو و چند فریم ورک دیگه صفحه جستجو می سازه. ویجت هاش، مثل باکس جستجو، لیست نتایج، فیلتر دسته بندی و صفحه بندی، HTML ای تولید می کنن که کلاس هاش با ais- شروع می شه. instantsearch.css همین کلاس ها رو هدف می گیره و بهشون یه ظاهر پیش فرض می ده.
مشکلی که حل می کنه ساده است: ویجت ها بدون استایل فقط یه مشت المان خام هستن و نوشتن CSS برای تک تک شون کلی وقت می بره. با این بسته از همون لحظه اول یه ظاهر تمیز و قابل قبول داری و بعدش فقط چیزهایی رو عوض می کنی که به برند سایتت نمی خوره. مثلاً فروشگاه وردپرسی که صفحه جستجوی محصول با فیلتر قیمت و دسته بندی می خواد، یا سایت مستندات و وبلاگی که جستجوی زنده لازم داره، جای مناسبی برای استفاده ازش هستن.
برای همه موردها جواب نمی ده. اگه طرحت کاملاً سفارشیه و دیزاینر برای هر المان قاعده جدا نوشته، بیشتر وقتت صرف خنثی کردن استایل های پیش فرض می شه. اگه هم اصلاً InstantSearch نداری و فقط یه فرم جستجوی معمولی وردپرس داری، این بسته به دردت نمی خوره. چون روی کلاس های ais- کار می کنه و بدون اون ها اثری نداره.
موقع انتخاب سه چیز رو در نظر بگیر. اول تم ها: بسته چند تم آماده داره، از یه تم ریست که فقط شکل های پیش فرض رو خنثی می کنه تا تم هایی با ظاهر کامل تر. قبل از انتخاب یه نگاه به محتوای بسته بنداز و ببین کدوم به طرحت نزدیک تره. دوم راست به چپ: تم ها اول برای رابط چپ به راست نوشته شدن، پس روی سایت فارسی احتمالاً باید راست به چپ شدن رابط و فاصله ها رو خودت اصلاح کنی. سوم سرویس جستجو: فایل CSS فقط استایله و به سرویس خاصی وصل نیست، ولی بیشتر نمونه ها با Algolia کار می کنن و دسترسی به اون از ایران ممکنه همیشه پایدار نباشه. اگه موتور جستجوت چیز دیگه ای مثل Typesense یا Meilisearch باشه، اون ها آداپتر مخصوص InstantSearch دارن و همین استایل ها روشون هم کار می کنه.
یه نکته هم برای شرایط خودمون: فایل رو از منبع خارجی لود نکن، چون با قطعی اینترنت بین الملل ظاهر جستجو به هم می ریزه. نسخه های رسمی و بدون تغییر instantsearch.css توی مخزن داخلی ما هم هست و می تونی از روی هاست ایرانی خودت سرو کنی.
اول مطمئن شو ویجت های InstantSearch روی صفحه ات درست رندر می شن و موتور جستجوت جواب می ده. استایل بدون خروجی HTML ویجت ها چیزی برای اثر گذاشتن نداره.
بعدش استایل رو به سایتت اضافه کن. ساده ترین راه، استفاده از کد آماده پایین همین صفحه است. اگه پروژه ات با npm و باندلر کار می کنه، بسته رو با نام instantsearch.css نصب کن و فایل CSS تم دلخواه رو توی ورودی پروژه import کن.
مراحل کلی کار:
یه کتابخانه CSS از Algolia هست که کلاس های ویجت های InstantSearch رو استایل می ده. باکس جستجو، لیست نتایج، فیلترها و صفحه بندی با اون ظاهر آماده پیدا می کنن. اگه می خوای صفحه جستجوی زنده بسازی و وقت زیادی برای طراحی نداری، کمک می کنه سریع شروع کنی.
بله، چون خود فایل فقط CSS هست و به سرویس خاصی وصل نیست. فقط باید ویجت های InstantSearch رو استفاده کنی که کلاس های ais- رو تولید می کنن. موتورهایی مثل Typesense و Meilisearch آداپتر InstantSearch دارن، پس استایل ها روشون هم کار می کنه.
خودکار نه، باید تنظیمش کنی. تم ها اول برای چپ به راست نوشته شدن. روی سایت فارسی direction رو rtl کن و بعد فاصله ها، جای آیکون ها و سمت فلش ها رو ببین. معمولاً با چند قاعده CSS اضافه درست می شه.
فایل CSS خودت رو بعد از فایل کتابخانه لود کن و کلاس های ais- رو بازنویسی کن، مثلاً رنگ دکمه ها یا حاشیه باکس جستجو. اگه تغییرها زیاد شد، تم ریست رو بذار و بقیه استایل رو خودت بنویس تا با قاعده های پیش فرض درگیر نشی.
نه. اگه پروژه ات باندلر نداره، می تونی فایل CSS رو مستقیم روی هاست بذاری و با کد آماده پایین صفحه لودش کنی. npm وقتی بهتره که پروژه ات ساختار مدرن جاوااسکریپتی داره و می خوای نسخه ها رو با ابزار مدیریت کنی.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.