Michael's Blog 📜

Add a search bar to your Bear blog

I saw in Herman's blog page that he has a search bar. This is useful when you've collected a great number of posts and you want to search the keyword of the title.

I couldn't find the feature in the Bear Documentation. Luckily, Yordi made a documentation about it.

To add a search bar in your blog page, paste the following code in your footer directive.

<script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.5/bear/blog-search.js"></script>

I have customized the styles to the following so that it's a bit longer on laptops. You can customize this to your preference.

/* Added CSS */

input#searchInput {
	width: 75%;
  	font: var(--font-main);
}

@media (max-width: 480px) {
  input#searchInput {
    width: 95%;
  }
}

Tell me how it goes for you. Happy blogging!

#blog #tutorial