افزودن جستجو به یک سایت ثابت با Lunr و Preact

وب سایتی که این مطلب را در آن می خوانید، از مجموعه ای از دارایی های ثابت ارائه شده با Hugo تشکیل شده است. این پست به اضافه کردن یک ویژگی جستجوی اساسی به این سایت می پردازد که به صورت محلی در مرورگر شما اجرا می شود. من می خواستم جستجو را به گونه ای بسازم که با رویکرد استاتیکی فعلی همسو باشد، از هرگونه منطق سمت سرور اجتناب کند و پرس و جوها را به طور کامل در مرورگر اجرا کند. علاوه بر این، من می خواستم فرآیند ساخت سایت را ساده نگه دارم، بنابراین از افزودن هر مرحله خاصی در فرآیندهای توسعه محلی یا ساخت تولید خودداری کنم. این پست نشان می دهد که چگونه من آن را برای این سایت انجام دادم و چگونه می توانید همین کار را انجام دهید.

برای انجام این کار، باید سه مرحله اساسی را طی کنیم:

1. برای افزودن صفحات و عناصر UI برای ویژگی جستجو، ساختار صفحه ثابت سایت را تقویت کنید. ما می توانیم این کار را با استفاده از قابلیت بومی Hugo انجام دهیم.
2. یک کتابخانه جاوا اسکریپت سمت سرویس گیرنده را با فرآیند نمایه سازی سایت ادغام کنید. من Lunr را برای این منظور انتخاب کردم. در حالی که گزینه های دیگری وجود دارد که در پایان پست به آنها اشاره خواهم کرد، Lunr تمام ویژگی های اساسی مورد نظر من را داشت و در مرحله توسعه خود در نقطه پایداری قرار دارد.
3. لایه رندر نتیجه جستجو را برای نمایش نتایج از نمایه تولید شده پیاده سازی کنید. برای این کار من استفاده از Preact را انتخاب کردم که یک نسخه سبک تر از React است که عملکرد مشابهی را ارائه می دهد.

تعدادی پروژه وجود دارد که این نوع کارها را انجام داده اند. من می خواستم بر روی آن ها بسازم تا با عملکرد لوله های جاوا اسکریپت که Hugo ارائه می کند، ادغام نزدیک تر شود، که لایه رندر پیچیده تری را اضافه می کند.

افزودن رابط کاربری جستجو

ساختار اصلی که من برای اجرای جستجو استفاده کردم به شرح زیر است:

1. به هر صفحه در سایت یک فرم جستجو اضافه کنید. من انتخاب کردم که آن را به عنوان بخشی از نوار پیمایش قرار دهم. می توانید آن را در سمت راست بالای این صفحه ببینید!
2. یک صفحه نتایج جستجو اضافه کنید که کاربران در هنگام نمایش نتایج به آن هدایت شوند. این در /search/ میزبانی می شود.
3. هنگامی که در صفحه نتایج جستجو هستید، از جستجوی مطابق با نوع شما پشتیبانی می کند.

فرم درخواست جستجو بسیار ساده است. این به عنوان یک Hugo Partial نوشته شده است که می تواند به هر جایی که ما بخواهیم در سایت تزریق شود، شامل دو عنصر اصلی، یک فیلد ورودی و یک دکمه ارسال است. برای سایت من، این قسمت را در نوار ناوبری قرار خواهم داد.

در مرحله بعد ، ما به صفحه ای نیاز داریم که این فرم پس از ارائه پرس و جو ، کاربر را به سمت خود هدایت کند. قطعه کد در بالا به این صفحه جدید در برچسب عمل فرم ، اشاره می کند ، جایی که ما از متغیر صفحه . relpermalink برای مشخص کردن محل تغییر مسیر استفاده می کنیم.

ایجاد یک صفحه سطح ریشه واحد در هوگو می تواند به چند روش مختلف انجام شود ، اما ایده اصلی این است که شما به دو پرونده نیاز دارید: یک فایل علامت گذاری که وجود صفحه را نشان می دهد ، و یک الگوی چیدمان که با آن فایل علامت گذاری مطابقت دارد از طریقدستور جستجوی الگوی. دو قطعه کد زیر آن دو پرونده را نشان می دهد که برای این سایت ایجاد شده اند.

پرونده Markdown باعث می شود صفحه نمایش داده شود. خالی است زیرا هیچ محتوای خاصی وجود ندارد که ما به طور پیش فرض در آنجا ارائه می دهیم. تمام محتوا در پرونده طرح است. برای اینکه این رویکرد کار کند ، به خط نوع = "جستجو" در پرونده نیاز دارید تا سفارش جستجو الگوی "تک" مربوطه را پیدا کند.

این الگوی داربست اساسی برای صفحه نتایج را فراهم می کند. خالی است زیرا ما محتوای اصلی را با JavaScript ارائه خواهیم داد. این عنصر نقطه ضمیمه را فراهم می کند که نتایج به صفحه تزریق می شود. ما فقط در یک لحظه این موضوع را با جزئیات پوشش خواهیم داد.

برای تنظیم صفحه اصلی در هوگو ، این است! اکنون می توانیم کار خود را برای ایجاد شاخص جستجوی واقعی شروع کنیم.

ساخت فهرست جستجو

مرحله بعدی در فرآیند ما تولید شاخصی است که ما جستجو خواهیم کرد. برای این مورد استفاده ، من می خواهم قبل از اینکه توسط هوگو به HTML منتقل شوند ، می توانم در صفحات موجود در وب سایت ، که در Markdown نوشته شده اند ، جستجو کنم. با استفاده از Templating Hugo ، می توانیم مستقیماً از صفحات تکرار کنیم و داده های مورد نیاز برای ساخت شاخص را جمع کنیم.

جمع آوری محتوا از هوگو

اول ، ما باید از هوگو استفاده کنیم تا تمام اطلاعات مورد نیاز خود را در مورد صفحات موجود در وب سایت که می خواهیم جستجو کنیم ، جمع آوری کنیم.

برای اجرای این منطق قالب بندی ، من این فهرست را به یک پرونده JavaScript با نام index. tpl. js تقسیم کردم. در زمان ساخت ، این پرونده با فرمت نام index. js با داده های موجود در آن از هوگو به یکی از آنها تبدیل می شود. با انتقال منطق قالب بندی از پرونده منطق جستجو به پرونده خاص خود ، ما برخی از کیفیت های زندگی را دریافت می کنیم ، مانند غیرفعال کردن خطای خطای برای آن پرونده.

اگر خط به خط بروید ، منطق قالب بندی در این پرونده نسبتاً ساده است. ابتدا ، ما یک متغیر الگوی فروشگاه $ ایجاد می کنیم تا محتوای صفحه مورد نظر خود را ضبط کنیم ، روی آدرس اینترنتی آنها کلید می زنیم تا بعداً بعداً جستجوهای سریع از ورودی های اصلی را فعال کنیم. سپس ما در صفحات مورد علاقه در سایت تکرار می کنیم ، که در مورد من از عملکرد WHERE برای پیاده روی در صفحات موجود در بخش وبلاگ استفاده می کند. برای هر یک از این صفحات ، ما با استفاده از عملکرد DICT یک شیء ایجاد می کنیم و سپس از عملکرد ادغام برای اضافه کردن آن به $ فروشگاه استفاده می کنیم. تاکنون ، همه اینها در داخل حالت متغیر الگوی داخلی اتفاق افتاده است ، و هیچ چیز به پرونده نهایی JS ارائه نمی شود. به عنوان آخرین مرحله ، ما فروشگاهی را که ساخته ایم می گیریم و آن را از طریق عملکرد Jsonify اجرا می کنیم و آن را در سطح جهان به عنوان Windows. store ذخیره می کنیم ، که ما برای ساختن شاخص جستجوی واقعی با LUNR در یک لحظه به آن اشاره خواهیم کرد.

برای اینکه هوگو واقعاً این الگوی را اجرا کند ، باید از منابع استفاده کنیم. قطعه کد زیر نشان می دهد که چگونه ما این کار را برای پرونده index. tpl. js انجام می دهیم و آن را به عنوان برچسب اسکریپت اضافه می کنیم. نتیجه نهایی در اینجا این است که ما شیء JSON را برای Windows. Store در سراسر صفحه برای استفاده در ساخت شاخص جستجوی واقعی در حافظه در دسترس داریم!

ساخت فهرست LUNR

اکنون که محتوای موجود در Windows. Store را در اختیار ما قرار داده ایم ، می توانیم در سایر پرونده های JavaScript که در صفحه بارگیری می شوند ، اشاره کنیم. قطعه کد زیر یک lunr. index را به محتوایی که ما برای این وب سایت جستجو می کنیم ، سفارشی می کند. زمینه ها با توجه به اهمیت نسبی تقویت می شوند. این اعداد بیشتر مبتنی بر یک حس شهودی از آنچه برای یک پست به نظر می رسد مهم است ، و با آزمایش کمی تغییر یافته است ، که بعداً در مورد آن صحبت خواهیم کرد. علاوه بر این ، ما یک ویژگی بدون سند در LUNR را قادر می سازیم تا اطلاعات موقعیتی را برای استفاده در برجسته کردن به عنوان کمی اعتبار اضافی فعال کنیم ، که به زودی با جزئیات بیشتری خواهیم دید. در حال حاضر ، ما یک شاخص کار داریم و در حال اجرا هستیم!

اگر می خواهید در مورد LUNR و گزینه هایی که مستقیماً از منبع ارائه می دهد ، اطلاعات بیشتری کسب کنید ، توصیه می کنم راهنمای شروع کار آنها را که از طریق اصول اجرای جستجوی بسیار ساده قدم می زند ، بررسی کنید و شامل پیوندهایی به منابع LUNR دقیق تر است.

اجرای نمایش داده های جستجو

ما اکنون یک شاخص داریم ، اما ما در واقع هنوز کاری با آن انجام نمی دهیم. به منظور تعامل با شاخص ، ما یک عملکرد GetResults ایجاد می کنیم. برای اجرای جستجوی اساسی با LUNR ، فقط می توانید با عملکرد جستجو در فهرست خود تماس بگیرید و در رشته پرس و جو خود عبور کنید. LUNR همچنین از انواع نحوی پرس و جو که از شخصیت های خاص استفاده می کند ، پشتیبانی می کند. ما استفاده از هر یک از کسانی را که دارای Lunrquerychars Regex هستند ، بررسی می کنیم و در این صورت پرس و جو را مستقیماً به LUNR منتقل می کنیم.

با این حال ، برای سایر موارد ، ما رفتار پیش فرض را کمی سفارشی می کنیم تا عملکرد "جستجو را تایپ کنید" در صفحه نتیجه جستجو ارائه دهیم. برای این کار خوب ، ما باید حداقل در مورد آخرین کلمه در پرس و جو از پیشوند پشتیبانی کنیم ، این همان چیزی است که منطق تجزیه در بخش دوم این قطعه کد انجام می دهد.

ارائه نتایج با preact

اکنون ما یک شاخص جستجو ساخته شده و تابعی برای بازیابی نتایج حاصل از آن داریم ، بنابراین مرحله بعدی ما این است که در واقع نتایج را به صفحه ارائه دهیم. ما می توانیم این کار را مستقیماً با ایجاد عناصر HTML از طریق Basic JavaScript انجام دهیم ، اما من می خواستم با ادغام Preact به عنوان یک روش سبک وزن برای نشان دادن آسان تر آنچه که رفتار خواسته شده است ، آزمایش کنم. من همچنان به PreAct اشاره خواهم کرد اما این مفاهیم با استفاده از React نیز کار می کنند ، و احتمالاً اجرای آن را کمی ساده می کند زیرا ابزار مختلف با React از جعبه ، با هزینه یک بسته نرم افزاری کمی بزرگتر کار می کند.

قطعه زیر مؤلفه عملکردی نتیجه را نشان می دهد که یک نتیجه جستجوی واحد را ارائه می دهد ، و همچنین مؤلفه نتیجه لیست که لیستی از نتایج را ارائه می دهد. این عناصر بخشهای اساسی رابط نتیجه جستجوی ما خواهند بود.

شایان ذکر است که در نگاه اول این روش خشک ترین رویکرد قابل تصور نیست ، زیرا الگوی نمایش محتوای هوگو را که قبلاً برای ارائه نمای خلاصه از پست های وبلاگ در اینجا داریم ، تکرار می کند. با این حال ، از آنجا که این نتایج باید به صورت پویا ساخته شود ، و ما در حال انجام برجسته های سفارشی با مؤلفه برجسته هستیم ، به نظر نمی رسد راهی روشنی از این امر وجود داشته باشد ، و ما هنوز هم از همان CSS استفاده خواهیم کرد تا در اینجا سازگاری به یک ظاهر طراحی کلی را ارائه دهیم. و در سراسر سایت

این قطعه که کمی عمیق تر در اجرای آن قرار می گیرد ، نشان می دهد که چگونه ما شرایط را در محتوای نتیجه که مطابق با پرس و جو است برجسته می کنیم. ما یک مؤلفه عملکردی برجسته جدید ایجاد می کنیم که ورودی متن را به قطعه های برجسته تبدیل می کند. LUNR یک ویژگی بدون مدارک برای ارائه اطلاعات موقعیتی به عنوان بخشی از مسابقات برگشتی دارد ، که ما در زمان نمایه سازی در بالا فعال کردیم. آنچه این برای ما فراهم می کند ، یک جفت شماره ، یک جبران و طول ، برای هر اصطلاح در مواردی که مطابق با پرس و جو ورودی است. در این مؤلفه ، ما متن قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعه قطعهایشان را دوباره ساختیم و به کاربر نشان می دهد که چه اصطلاحاتی با پرس و جو آنها مطابقت دارد. پس از تکرار در کل رشته به این روش ، مقادیر حاصل بازگردانده می شوند تا به مؤلفه نتیجه ارائه شوند تا به عنوان یک بلوک متناسب از متن به DOM منتقل شوند.

با وجود آن مؤلفه ها ، نتیجه نهایی به این شکل به نظر می رسد! عناصر درج شده در نتیجه برجسته را ارائه می دهند.

یکی از قابلیت های شسته و رفته از peact (و خود React) این است که می تواند در چارچوب یک سایت موجود که کاملاً مبتنی بر چارچوب نیست ، یکپارچه شود ، دقیقاً همان کاری است که ما در اینجا انجام می دهیم.

عملکرد زیر روش اولیه سازی را برای صفحه ای که در زمان بار اجرا می شود ، نشان می دهد. ابتدا هر پرس و جو را از URL جدا می کنیم ، و سپس منطق را برای ارسال مجدد صفحه برای تسهیل یک تجربه "جستجو به عنوان تایپ" ثبت می کنیم. از آنجا که این سایت در اطراف Bootstrap 4 ساخته شده است ، ما در حال حاضر jQuery در دسترس هستیم ، بنابراین ما از آن برای به روزرسانی ارائه پرس و جو هنگام استفاده کاربر استفاده می کنیم.

دلیل اینکه ما باید با استفاده از jQuery (یا چیز مشابهی) منطق پیش بینی را در سایت قرار دهیم (یا چیزی مشابه) این است که در حالی که کتابخانه های نوع پیش از این توانایی خارق العاده ای برای مدیریت DOM مستقیماً تحت کنترل خود دارند ، اما آنها واقعاً توانایی نظارت بر عناصر موجود را ندارند. که آنها 2 ایجاد نکردند (هرچند اگر شما از یک روش خوب برای انجام این کار مطلع هستید ، دوست دارم در مورد آن بشنوم!). پر کردن این شکاف جایی است که jQuery وارد می شود. در حالی که جاوا اسکریپت بومی می توانست کاری مشابه انجام دهد ، jQuery فقط زندگی ما را کمی ساده تر می کند.

عملکرد به روزرسانی که در آن ذکر شده است کاملاً ساده است و در صورت تغییر ، پرس و جو را از جعبه نتیجه گرفته است ، نتایج مربوطه را بازیابی می کند و آنها را دوباره ارائه می دهد.

گردآوری JSX با Preact و Esbuild در هوگو

بنابراین اکنون ما برخی از پرونده های JavaScript را داریم که این همه موارد مرتب را انجام می دهند ، اما چگونه می توانیم آنها را در وب سایت بگنجانیم؟اکنون ما به مشخصات چگونگی اهرم لوله های Hugo JavaScript ، که از ابزار ESBuild فوق العاده سریع برای تدوین استفاده می کند ، می پردازیم. من اجرای خود را از یک نمونه فوق العاده فوق العاده که پیدا کردم ، مبتنی بر این بود که بسیاری از نقاط را برای من وصل کردم. این دعوت چند مورد را انجام می دهد:

1. محیط node_env را برای تدوین جاوا اسکریپت تعریف کنید.
2. گزینه های JSXFective و JSXfragment را که برای سفارشی کردن ترکیب JSX برای کار با Preact به جای واکنش وانیل به Esbuild منتقل می شوند ، نادیده بگیرید.
3. فقط در محیط های توسعه ، ما نقشه های منبع درون خطی را فعال می کنیم. اینها در تولید غیرفعال هستند زیرا در صورت قرار دادن درون خطی ، اندازه بسته نرم افزاری را به شدت افزایش می دهند. در آینده اگر پرونده های نقشه جداگانه پشتیبانی شوند ، می توانیم بیشتر به آن تغییر کنیم و شرط را حذف کنیم.
4. سپس یک هش سری را روی پرونده اعمال می کنیم و آن را در یک برچسب اسکریپت قرار می دهیم!

با این کار ، ما یک صفحه جستجوی کاملاً عملیاتی داریم. احساس راحتی کنید که امتحان کنید!

تست های نوشتن

در حالی که ما در اینجا پیشرفت زیادی داشته ایم ، کد بیشتر به معنای چیزهای بیشتری است که می توانند اشتباه کنند! در تلاش برای نگه داشتن این سایت کم نظیر و پایدار ، من می خواستم تست هایی را اضافه کنم تا اطمینان حاصل شود که تکرارهای آینده با قابلیت جستجو چیزها را نمی شکند. من یک رویکرد دوگانه در این مورد انجام دادم ، ابتدا قابلیت جستجو را با آزمایش واحد تأیید کردم و سپس با آزمایش مبتنی بر مرورگر روی آن بنا کردم.

برای تنظیم تست های واحد ، ما دو قطعه اصلی از خود وب سایت ، DOM و شاخص جستجو را مسخره می کنیم. من قبلاً JEST را تنظیم کردم که ما به عنوان دونده تست خود از آن استفاده خواهیم کرد. این کار با آزمایش بر اساس JSDOM که JEST از طریق پیکربندی مشاهده شده در این پرونده پیکربندی برای ما فراهم می کند ، یکپارچه می شود. این پرونده همچنین حاوی چند سفارشی سازی برای Preact است که آینه پیکربندی را برای Esbuild انجام دادیم که تجزیه و تحلیل JSX را در آزمایشات تسهیل می کند.

برای تنظیم محیط DOM ، ابتدا پرونده HTML ارائه شده را از خروجی هوگو وارد می کنیم (این بدان معنی است که مرحله ساخت باید برای کار تست ها اجرا شود). ما همچنین می خواهیم کمی از داده های جستجو را بخواهیم که بتوانیم نتایج قطعی را از آن ادعا کنیم. برای این کار ، من توضیحات مربوط به یک سریال تلویزیونی را کشیدم که وقت بیشتری را در روزهای ابتدایی خود صرف کردم تا اینکه بتوانم اعتراف کنم. این امر شاخص موجود در سایت را مسخره می کند و این امکان را برای ما فراهم می کند که رفتارهای مختلف خاصی را ادعا کنیم.

با این کار ، می توانیم نوشتن تست را شروع کنیم. در اینجا ما عملکرد جستجو را وارد می کنیم و ادعاهای اساسی را در مورد عملکرد GetResults و سپس عملکرد به روزرسانی ارائه می دهیم ، دومی که در آن قرار دارد ، جایی است که ما شروع به مراجعه به DOM می کنیم که از طریق JSDOM تزریق شده در دسترس ما است.

برای دور کردن کارها ، ما همچنین آزمایشی را برای اولیه سازی و عملکرد "جستجو همانطور که تایپ می کنید" اضافه می کنیم. یکی از محدودیت های JSDOD این است که ناوبری در درون آن پشتیبانی نمی شود. برای کار در این زمینه ، من در یک پست وبلاگ رویکردی پیدا کردم که چگونه می توان پنجره را مسخره کرد. شیء موقعیت مکانی در شوخی ، که در اینجا استفاده می شود. با این کار ، می توانیم پارامتر پرس و جو URL را برای تقلید از ارسال فرم جستجو در سایر صفحات سایت بدون شکایت از JSDOD تنظیم کنیم. سپس آزمایشات دوم همچنین می توانند تأیید کنند که مکانیسم به روزرسانی مبتنی بر jQuery به طور صحیح هنگام به روزرسانی پرس و جو نتیجه می گیرد ، با کمی گنگ ، وقایع موجود در JSDOD به درستی ایجاد می شود.

تست مبتنی بر مرورگر

آزمایش فوق اعتماد به نفس بسیار بالایی را برای ما فراهم می کند که جستجو همانطور که انتظار می رود کار می کند. از آنجا که من قبلاً آزمایش مبتنی بر مرورگر را از طریق Puppeteer Up و در حال اجرا برای این سایت انجام داده ام ، به اندازه کافی ساده بود که یک مورد آزمایش اضافی اضافه کنم که ادعا می کند وقتی فرم جستجو را در یک صفحه ارسال می کنیم ، در صفحه ای قرار می گیریم که نتایج را نشان می دهد ،و در این نتایج ، یک قطعه از پست قبلی من در ساخت یک شبکه عصبی از ابتدا وجود دارد.

گزینه های دیگر و کار آینده

در حالی که عملکرد اصلی جستجوی ارائه شده در اینجا برای میزان محتوای موجود در این سایت کاملاً خوب است ، روش های زیادی وجود دارد که رویکرد اساسی در اینجا می تواند متفاوت باشد ، یا گسترش یافته و بیشتر تصفیه شود ، که من به طور خلاصه در اینجا به آن اشاره خواهم کرد.

پیشرو هرگونه تکرار معنی دار در سیستم جستجو راهی برای ارزیابی کیفیت نتایج است."جدیت" این ارزیابی می تواند با اهمیت برنامه مقیاس مقیاس داشته باشد. به عنوان مثال ، برای تصحیح منطق ساختمان پرس و جو در بالا ، من از موارد آزمایشی که در بالا نشان داده شده است و همچنین آزمایش دستی با نمایش داده شدگان مختلف علیه صفحات خاص در سایت خود استفاده کردم که انتظار دارم برگردانده شود. برای ارائه یک ارزیابی رسمی تر ، ما می توانیم سوئیت های تست فوق را تقویت کنیم تا به شاخص ساخته شده واقعی از سایت متصل شویم و اقدامات آفلاین مختلفی را اضافه کنیم که ویژگی های کیفیت را بالاتر از یک آستانه خاص و در موارد مختلف قرار می دهد. این امر نیاز به ایجاد مجموعه داده های آزمایشی برای پرس و جوهای جستجو و نتایج مورد انتظار دارد که عملکرد سایت در برابر آن اندازه گیری شود. از آنجا که این سایت محتوای بیشتری اضافه کرده است ، یا اگر سایت شما قبلاً انجام داده است ، تنظیم چیزی شبیه به آن یک مرحله بعدی عالی خواهد بود!

علاوه بر این ، در حالی که LUNR برای قابلیت هایی که ما در اینجا ایجاد کرده ایم مناسب است ، اما اجرای جستجوی جایگزین وجود دارد که می تواند برای اثر مشابه استفاده شود زیرا آنها همچنین برای سایت های استاتیک در نظر گرفته شده اند. fuse. js ابزاری مشابه با جستجوی فازی جاوا اسکریپت است که می تواند تجربه کاربری کمی متفاوت را شبیه به ویرایشگر ارائه دهد. Stork گزینه دیگری است که می تواند قابلیت های غنی تری را با نکات برجسته مسابقه ، که در زنگ زدگی و کامپایل در WebAssembly نوشته شده است ، فراهم کند. پروژه TinySearch از یک معماری مشابه Rust/WebAssembly استفاده می کند ، اما یک رویکرد جالب از فیلترهای شکوفه برای اجرای شاخص دارد. آزمایش با پیاده سازی های مختلف جستجوی با هدف سایت های استاتیک مانند اینها یک قدم بعدی جالب در اینجا خواهد بود ، و اگر به دنبال اضافه کردن جستجو به سایت خود هستید ، ممکن است به خوبی علاقه مند به انتخاب یکی از این موارد دیگر باشید!

من به عنوان برجسته به عنوان ویژگی Stork در بالا اشاره کردم و در حال حاضر اجرای برجسته ای که در اینجا داریم نسبتاً اساسی است. الگوریتم برجسته می تواند با انتخاب هوشمندانه تر قطعه قطعه ها از درون محتوای نتایج مختلف به جای استفاده از آغاز متن ، بهبود یابد. این می تواند با اطمینان بیشتری اطلاعات کاربر را در مورد دلیل ارتباط اسناد خاص به شما بدهد. این یک منطقه غنی است و تحقیقات نسبتاً خوبی در مورد خلاصه متن مبتنی بر پرس و جو وجود دارد که می تواند برای آزمایش این برنامه 3 جالب باشد.

در جبهه عملکرد ، یک نکته در مورد اجرای ما در اینجا این است که خود این شاخص در زمان بار از اسناد خام ساخته شده در مرورگر ساخته می شود. ما می توانیم در زمان ساخت سایت ، شاخص را تشکیل دهیم و سپس شاخص پیش ساخته را ارائه دهیم. LUNR مستنداتی را در مورد شاخص های پیش ساخت ارائه می دهد که ما می توانیم برای انجام این کار دنبال کنیم. یک رویکرد فانتزی برای ادغام این سایت با ساخت سایت می تواند اهرم از افزونه های Esbuild آزمایشی باشد اما هوگو هنوز از آنها پشتیبانی نمی کند و ظاهراً اضافه کردن پشتیبانی سخت است. این امر باعث می شود زمان محاسبه در مرورگر کاهش یابد ، با این حال ، به هزینه یک پرونده شاخص بزرگتر که باید از طریق شبکه ارائه شود (حدود 4 برابر قبل از فشرده سازی برای سایت من در زمان این نوشتار ، هر چند فشرده سازی و بزرگترسایت ها احتمالاً نسبت بهتری به دست می آورند) ، این همان چیزی است که من را از انجام این کار برای اجرای من منصرف کرده است ، زیرا زمان ساخت شاخص کمتر از 50ms طول می کشد. در حالی که من برای پهنای باند پرداخت می کنم ، من آن چند چرخه CPU اضافی را در مرورگر شما پرداخت نمی کنم ، بنابراین تصمیم گرفته ام که اکنون به رویکرد فعلی بپردازم.

اگر به نظر می رسد دیگران با من موافق هستند که این یک روش خوب برای اجرای جستجوی LUNR در سایت HUGO شما است ، این رویکرد همچنین ممکن است ارزش لیست در فهرست رویکردهای جستجو را که در اینجا ذکر شده است لیست کنید: Gohugo. io/tools/search/ ، شایدبه شکل ساده

در هر صورت ، من دوست دارم افکار این رویکرد را بشنوم! در صورت تمایل می توانید نظر ، سؤال یا شاید شکایتی را در زیر بگذارید.

این پست وبلاگ Victoria. dev/blog/add-search-to-hugo-static-sites-with-lunr/ به ویژه در شروع کار با این پروژه بسیار مفید بود و الهام بخش برای رویکرد کلی بود. سایر پروژه های موجود در آنجا مانند github. com/dgrigg/hugo-lunr و codewithhugo. com/hugo-lunrjs-search-index/ از یک مرحله ساخت JavaScript به عنوان بخشی از گردش کار خود استفاده می کنند ، که برخی از امکانات را از نظر نحوه شاخص باز می کندتولید می شود ، اما اینگونه نبود که من می خواستم به این پروژه نزدیک شوم زیرا پیچیدگی را به روند ساخت اضافه می کند ، و فرصتی برای تولید شاخص جستجو از نحوه مدیریت هوگو در محتوا است ، زیرا این امر باعث ایجاد هوگو در فرآیند ساخت نمی شود. همه.↩︎

دو ویژگی که به نظر می رسد ممکن است این نوع توانایی را فراهم کنند ، قلاب و زمینه ای هستند که من با آنها آزمایش کردم. با این حال ، هر دو این دیدگاه را دارند که برنامه Preact اصلی اصلی UI شما است ، و هنگامی که سعی می کنید از آن روش ها برای دسترسی یا اصلاح حالت از خارج از یک مؤلفه خاص استفاده کنید ، خطاها پرتاب می شوند. حتی بخش از عوارض جانبی در مورد راه دیگر صحبت می کند ، و به جای اینکه عملیات خارجی دارای عوارض جانبی بر روی خود اجزای preach باشد ، عوارض جانبی خارجی را تحریک می کند.↩︎