آموزش ایجاد یک ویژگی جستجو برای وب سایت استاتیک 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
کهکشان رنگارنگ سرگرم کننده با آبرنگ: آموزش نقاشی با آبرنگ های مایع
Fun Colorful Galaxy with Watercolor: Learn to Paint with Liquid Watercolors
در این کلاس، یک نقاشی آسان کهکشانی با آبرنگ مایع را به شما آموزش خواهم داد. من نحوه استفاده از مایع ماسک، نحوه تهیه کاغذ و نحوه استفاده را توضیح خواهم داد. ..
آموزش کره ای سفر کنید
Travel Korean
«به دوره کوتاه «سفر در کره، صحبت کردن به زبان کره ای» خوش آمدید! 1. این دوره در مورد چیست؟ 1) این دوره برای مسافران کوتاه مدت کره ساخته شده است. Th. .."
آموزش کپی رایتینگ برای مبتدیان قسمت 3 از 3: چگونه متقاعد کنیم
Copywriting for Beginners Part 3 of 3: How to Persuade
"موفقیت شما به عنوان یک کپی رایتر به توانایی شما در متقاعد کردن بستگی دارد. به عنوان یک فروشنده پشت صفحه کلید، وظیفه شما متقاعد کردن مردم برای خرید محصولات و خدمات است. .."
آموزش طراحی سبک کاراکتر: اصولی برای منحصر به فرد کردن شخصیت های شما
Character Style Design: Basics to Make Your Characters Unique
" بیایید با هم الگوها را بازی کنیم و از آنها برای دادن سبکی منحصر به فرد به شخصیت‌های شما استفاده کنیم. تنها ابزاری که نیاز دارید آمپر سیاه است. خودکار قرمز. محتوای کلاس خواهد بود. .."
Sean Emerson
توسعه دهنده وب و متخصص سایت استاتیک
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.