This app builds upon Bootstrap Studio's Blog components and Healthy Colors template to bring a search interface for looking up articles.

The search bar has intelligent fuzzy search (powered by Fuse.js) that looks for keywords in the blog article's titles and descriptions. The fuzzy search algorithm handles typos and approximate matches gracefully - searching for "chiken suop" will still find all recipes featuring the phrase "chicken soup".

Customization

The included JavaScript works by looking for Blog Loop components and hiding any article cards whose text doesn't match the search query. The amount of search fuzziness can be adjusted in recipe-search.js, by changing the Fuse options object, most notably the threshold and minMatchCharLength properties.

Our demo is for a food blog but the app can be customized to fit any blog theme.

Get started

Download the .bsdesign file from the button above, and open it in Bootstrap Studio to start building your next blog project.