کتابخانه
@algolia/autocomplete-theme-classic یه بسته CSS آماده برای کتابخونه Algolia Autocomplete هست. ظاهر کادر جستجو و پنل پیشنهادها رو بدون طراحی از صفر درست می کنه. اگه جستجوی زنده با Autocomplete می سازی و یه ظاهر تمیز و سریع می خوای، از همین شروع کن. مجوزش MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۶۰ کیلوبایت · ۳ فایل · انتشار
دانلود هفتگی جهانی
۱۳۲٫۵ هزار
هفته ۲۵ مهر تا ۱ آبان۰٫۱٪ بیشتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: 599fe70427feb7a1305a804a51b57360286c6bd13898605ebf36ab4bcabe8cfa
@algolia/autocomplete-theme-classic فقط یه کار می کنه: به المان هایی که Algolia Autocomplete می سازه ظاهر می ده. خود Autocomplete کتابخونه ای برای ساخت کادر جستجو با پیشنهاد زنده است. منطق و رفتار رو خودش مدیریت می کنه، ولی ظاهر رو تقریبا به عهده تو می ذاره. این بسته همون لایه ظاهره: یه فایل CSS با استایل آماده برای کادر ورودی، پنل پیشنهادها، آیتم ها و حالت های مختلفشون.
فرض کن یه فروشگاه ایرانی داری و می خوای وقتی کاربر چند حرف تایپ کرد، اسم محصول ها و دسته ها زیر کادر بیاد. یا یه سایت مستندات یا وبلاگ پرمطلب داری که جستجوی پیش فرضش کنده و کاربر رو خسته می کنه. تم کلاسیک کمک می کنه بدون نوشتن CSS از صفر، یه ظاهر مرتب بگیری. بعدش فقط تفاوت ها رو با رنگ و فاصله خودت بازنویسی می کنی و لازم نیست به کل استایل دست بزنی.
جاهایی هم هست که به کارت نمی آد. این بسته بدون خود Autocomplete چیزی برات نمی سازه، چون استایله، نه موتور جستجو. اگه یه افزونه جستجوی آماده وردپرس داری که ظاهر خودش رو داره، اضافه کردن این تم فقط استایل ها رو قاطی می کنه. اگه هم طراحی کاملا اختصاصی داری، شاید بهتر باشه از اول CSS خودت رو بنویسی. برای سایت های فارسی یه نکته مهم هست: حالت راست به چپ رو حتما تست کن. ممکنه جای آیکون ها و فاصله ها درست نباشه و چند خط CSS اضافه لازم بشه.
موقع انتخاب این رو هم در نظر بگیر که Autocomplete به یه منبع داده خاص قفل نیست. می تونی پیشنهادها رو از API خودت بگیری، که برای روزهای اینترنت محدود به دردت می خوره. فایل CSS رو هم بهتره از روی سرور خودت سرو کنی، نه از یه CDN خارجی. نسخه رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم در دسترسه، پس اگه دسترسی به npm مشکل داشت، می تونی از همین جا برداری.
کار با این تم ساده است، ولی ترتیب قدم ها مهمه:
توی وردپرس فایل رو با enqueue از طریق پوسته یا افزونه خودت لود کن و دستی توی هدر نچسبون. اینطوری مدیریتش راحت تره و با کش و بهینه سازی سایت هم بهتر کار می کنه.
آخرش سایت رو با زبان فارسی و حالت راست به چپ تست کن، چون اینجا بیشتر وقت ها یه تنظیم کوچیک لازم می شه.
این بسته فقط یه فایل CSS با استایل آماده است و برای المان هایی طراحی شده که Algolia Autocomplete تولید می کنه. خودش کادر جستجو نمی سازه و فقط ظاهرش رو تنظیم می کنه. بدون Autocomplete چیزی برای استایل دادن وجود نداره، پس اول باید خود کتابخونه توی پروژه ات باشه.
نه، خود تم فقط استایله و به حساب یا سرویس خاصی وصل نیست. منبع داده Autocomplete رو هم خودت تعیین می کنی، مثلا یه API داخلی. فقط اگه بخوای از جستجوی خود Algolia استفاده کنی، به حساب اون سرویس نیاز پیدا می کنی و اون بحث جداست.
بله، به شرطی که صفحه ات Autocomplete رو لود کنه. فایل CSS رو با enqueue توی پوسته یا افزونه خودت اضافه کن. اگه افزونه جستجوی آماده ای با استایل خودش داری، این تم رو بهش اضافه نکن تا استایل ها قاطی نشن.
ساده ترین راه اینه که CSS خودت رو بعد از فایل تم لود کنی و فقط چیزهایی رو که می خوای عوض کنی بازنویسی کنی، مثل رنگ، فاصله و فونت. توی ابزار توسعه دهنده مرورگر به کلاس ها و متغیرهای CSS تم نگاه کن و همون ها رو هدف بگیر.
نمی شه قول داد که همه جزئیات بدون تغییر برای راست به چپ درست باشه. بهتره روی سایت خودت تست کنی. اگه جای آیکون ها یا فاصله ها به هم ریخت، معمولا با چند خط CSS اضافه درست می شه.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.