# This is not a tutorial

After seeing the cool search feature on Spotlog, although I knew that Hux created the Hux Blog theme with a principle of simplicity and clarity, I couldn’t resist. Unfortunately, Spotq didn’t release the specific implementation code, and the repository on GitHub was also closed. So, I had to roll up my sleeves and do it myself.

# Not skilled in frontend

Hux used Bootstrap 3.3 when creating the theme, so I tried to directly insert the search box into the Navbar using the convenient framework. However, after multiple attempts, it ended in failure. The code I copied from the internet either didn’t work at all or wasn’t aesthetically pleasing.

After failing for an afternoon, I decided to put the search box in the right sidebar. The only problem was that on mobile devices, the search box appeared at the very bottom of the page. My idea was to have a search icon on the left and an input box on the right, but it ended up displaying directly in the <ul> below.

The first problem encountered was a bug in the sidebar of Hux Blog, where the elements below the Featured Tags section were mistakenly treated as tags. This caused the <hr> below this <section> and my added <input> to be wrapped in <a>, making the search box automatically redirect every time it was clicked. After a long study, I found the issue in this line:


{{ tags | split:'</a>' | sort | join:'</a>'}}

However, I couldn’t fix it because my knowledge of Liquid was too limited. In the end, the compromise was to copy the code from an older version of the Hux Blog theme without this bug, resulting in the tags in the sidebar no longer being automatically sorted.

Edit: This issue has been fixed by Hux in the latest version of the Hux Blog theme. The solution involves modifying part of the code in _includes/featured-tags.html to:


...
<a>...</a>__SEPARATOR__
{% endif %}{% endfor %}
{% endcapture %}
{{ tags | split:'__SEPARATOR__' | sort }}

For specific instructions, please refer to the Hux Blog Commits.

After solving this problem, I proceeded to write the code for the search box. The structure was simple, with a <div> containing a search glyph and an <input> for input. I wanted to make the left <div> and the right <input> the same height, similar to the Bootstrap Docs, but I couldn’t achieve it. The traditional display: inline-block approach made them the same height on PC but different on mobile devices. I found that to make them the same height, I needed to use display: flex, allowing both elements to be within the same container <div> and displayed using the box model, ensuring they maintained a uniform height.

So, I ended up with the following code:

See the Pen Search Bar by DotIN13 (@DotIN13) on CodePen.

# Reinventing the wheel

Sometimes, reinventing the wheel is truly harder for a clumsy carpenter than reaching the sky. However, a great philosopher named Hyt once said, “I think reinventing the wheel is a learning process. By the time you know how to reinvent the wheel, you truly understand how to use it.”

Through continuous trials and errors, isn’t that how people grow?