چرا یک صفحه جستجو اضافه کنید؟
من همیشه دوست دارم که یک وب سایت دارای یک صفحه جستجو باشد، پیدا کردن محتوای مرتبط مورد نظر شما را آسان می کند.
این به ویژه زمانی مفید است که وب سایت شما شروع به رشد کند، و برای مثال شما یک دسته کامل پست وبلاگ نوشته اید (این من هستم 😅).
در کار آژانس خود، وب‌سایت‌هایی را برای شرکت‌های بزرگ با بودجه‌های کلان ایجاد می‌کنم، و معمولاً در آنجا به Algolia می‌رویم، زیرا استفاده از آن بسیار آسان است و دارای اجزای غیرعادی React و غیره است.
اما Algolia خیلی سریع گران می‌شود، بنابراین من می‌خواستم به دنبال چیزی باشم که برای وب‌سایت من میزبانی شده است.
من به آنچه تیم Astro در وب سایت Starlight خود انجام می دهد نگاه کردم و متوجه شدم که آنها از Pagefind استفاده می کنند، “یک کتابخانه جستجوی کاملا ثابت که هدف آن عملکرد خوب در سایت های بزرگ است، در حالی که از پهنای باند کاربران شما تا حد ممکن استفاده می کند، و بدون استفاده از آن. میزبانی هر زیرساخت».
به نظر من خوب است، بیایید استفاده از آن را شروع کنیم!
راه اندازی ادغام Astro
این قسمت است خیلی آسان
ابتدا نصب می کنیم astro-pagefind و pagefind
npm install astro-pagefind pagefind
سپس آن را به پیکربندی Astro خود اضافه می کنیم
import pagefind from "astro-pagefind";
import { defineConfig } from "astro/config";
export default defineConfig({
integrations: [pagefind()],
});
حتما به آن توجه کنید pagefind ادغام به عنوان آخرین عنصر در ایندکس، برای اطمینان از اجرای آن بعد از ادغام های دیگر
با افزودن ادغام، Pagefind به عنوان آخرین بخش فرآیند ساخت شما اجرا می شود و تمام محتوای خروجی استاتیک شما را فهرست می کند.
در پایان فرآیند ساخت چیزی شبیه به این را خواهید دید:
Running Pagefind v1.1.0 (Extended)
Running from: "/Users/thomasledoux/Documents/website-thomas-astro"
Source: ".vercel/output/static"
Output: ".vercel/output/static/pagefind"
[Walking source directory]
Found 58 files matching **/*.{html}
[Parsing files]
Did not find a data-pagefind-body element on the site.
↳ Indexing all elements on the site.
1 page found without an element.
Pages without an outer element will not be processed by default.
If adding this element is not possible, use the root selector config to target a different root element.
[Reading languages]
Discovered 1 language: en
[Building search indexes]
Total:
Indexed 1 language
Indexed 56 pages
Indexed 3345 words
Indexed 0 filters
Indexed 0 sorts
Finished in 0.197 seconds
ایجاد رابط کاربری جستجو
برای رابط کاربری جستجو، فعلاً ترجیح دادم یک صفحه جستجوی مجزا ایجاد کنم، عمدتاً به این دلیل که نمی‌خواستم با مدل‌های جستجو و غیره به خود زحمت بدهم.
Pagefind CSS و JS پیش‌فرض را برای عنصر جستجو فراهم می‌کند، بنابراین می‌توانید در عرض چند دقیقه راه‌اندازی و اجرا کنید.
بنابراین من یک صفحه در زیر ایجاد کردم pages/search.astro
---
import Layout from "~/layouts/Layout.astro";
---
همانطور که می بینید، فقط تماس بگیرید new PagefindUI() سازنده با عنصر صحیح ارجاع شده تنها کاری است که باید انجام دهید تا اصول اولیه را انجام دهید.
تنها کد اضافی که اضافه کردم، کدی برای رسیدگی به پارامترهای پرس و جو است، هم از پارامترهای پرس و جو می خواند و هم آن را در عنصر جستجو در بارگذاری صفحه وارد می کند و هم هنگام جستجو برای پارامترهای پرس و جو می نویسد.
من همچنین یک کلیک شنونده به صورت پیش فرض اضافه کردم clear دکمه ای که در لحظه ای که چیزی را در ورودی جستجو وارد کردید ظاهر می شود تا مطمئن شوید که پارامترهای پرس و جو نیز پاک شده اند.
نتیجه پس از اجرای جستجو به صورت زیر خواهد بود:
چیزهایی مانند برجسته کردن نحو، تشخیص تصویر و زیربخش‌ها برای عناوین خود را خارج از جعبه دریافت می‌کنید!
پیکربندی نمایه سازی
پس از انجام جستجو بر روی کلمه کلیدی remix، که من چند بار در وب سایت خود از آن استفاده می کنم، متوجه شدم که برخی از نتایج در حال بازگشت هستند که من انتظار نداشتم برگردانده شوند.
من دیدم که تمام صفحات برچسب من که به طور خودکار ایجاد شده اند به عنوان نتایج برای این عبارت جستجو برگردانده می شوند.
این به دلیل بخش برچسب‌های من در بالای صفحه بود که همیشه شامل تمام برچسب‌های استفاده شده در وبلاگ من می‌شود.
بنابراین باید به نحوی مطمئن شوم که این محتوا ایندکس نمی شود.
خوشبختانه Pagefind چیزی برای این کار در اختیار شما قرار می دهد، می توانید از آن استفاده کنید data-pagefind-ignore="all" ویژگی روی تگ HTML که نمی خواهید ایندکس شود. همچنین تمام کودکان زیر آن را نادیده می گیرد.
با این راه‌اندازی، من اکنون یک جستجوی ساده صرفاً بر اساس محتوای ثابت خود دارم، بدون نیاز به راه‌اندازی یک محصول SaaS برای این کار و کاملاً رایگان!
نتیجه
برای یک وب سایت با محتوای تقریباً کاملاً ثابت مانند من، Pagefind راه حل ایده آلی برای ادغام جستجو در وب سایت من بود. این واقعیت که رایگان است و نیازی به تنظیم مکانیزم نمایه سازی پیچیده ندارد، عالی است.
این پست وبلاگ از پست وبلاگ الکس تروست الهام گرفته شده است.
میخواهید آنرا در عمل ببینید؟ آن را در سایت من پیدا کنید.
تفاوت کدی که برای این کار باید اضافه کنم را می توان در GitHub من یافت
