آموزش ایجاد یک ویژگی جستجو برای وب سایت استاتیک HUGO خود با فیوز. js و جاوا اسکریپت
Creating a Search Feature for your HUGO static website with Fuse. js and JavaScript
- در حال بارگزاری، لطفا صبر کنید...
این کلاس درباره نحوه جستجوی یک سایت ثابت HUGO با جاوا اسکریپت است.
من شما را با اصول اولیه جاوا اسکریپت آشنا می کنم و از یک کتابخانه جستجوی آسان به نام fuse.js استفاده می کنم.
برای شروع به شما یک الگوی HUGO ارائه می کنم. تجربه استفاده از HUGO لازم است. مقدمه من برای دوره HUGO را ببینید.
این پروژه شامل افزودن یک تابع جستجو به یک وب سایت است. من یک الگو در اختیار شما قرار می دهم یا می توانید از وب سایت خود استفاده کنید.
من برخی از گزینه‌های پیکربندی معقول را به شما نشان می‌دهم، یا می‌توانید گزینه‌های خود را برای شرایط خود امتحان کنید.
من چند CSS الگوی اولیه را برای کادر جستجو و نتایج به شما ارائه می‌دهم، لطفاً سعی کنید آن را مطابق میل خود سفارشی کنید.
تصاویری از نتایج خود را در بخش پروژه ارائه دهید تا همه بتوانند ببینند صفحه نتایج جستجوی پروژه های شما چگونه به نظر می رسد. اگر در مورد کد خود به کمک نیاز دارید، پیوندی به کار خود بگذارید.
مخزن GitHub
https://github.com/future-wd/course-hugo-search
برای شروع، کد را از شعبه Master دانلود کنید. هر درس دارای یک شعبه است، بنابراین در صورت نیاز به کمک می‌توانید کد درس را دانلود کنید..
پیوندها به اسناد ارجاع شده:
درس 3.
https://fusejs.io/getting-started/installation.html
https://fusejs.io/getting-started/different-builds.html
https://gohugo.io/hugo-pipes/resource-from-template/
https://gohugo.io/hugo-pipes/fingerprint/
درس 5.
https://getbootstrap.com/docs/5.0/components/navbar/
درس 8. https://fusejs.io/demo.html
درس ها Lessons
-
نمایش نتایج Show results
-
ایجاد فهرست جستجو Create search index
-
Fuse.js را اضافه کنید Add fuse.js
-
شروع شدن Getting Started
-
ایجاد پیوندهایی به طبقه بندی ها Create links to taxonomies
-
مقدمه Intro
-
ایجاد تابع جستجو Create search function
-
بازیابی پارامترهای URL Retrieve URL parameters
-
فهرست جستجوی جداگانه Separate search index
-
گزینه های JS.Build JS.Build options
-
تصاویر را به نتایج سرچ اضافه کنید Add images to serch results
-
HTML جستجو را اضافه کنید Add search HTML
https://donyad.com/d/bf50
Sean Emerson
توسعه دهنده وب و متخصص سایت استاتیک
نمایش نظرات