I have been meaning to write a post recently as March kind of got away from me, and when taking a look at this blog website, I noticed that it might be a good idea to add a search bar to the header section. I’m thinking that in future when I have many, many posts (😉) it might be helpful to have a search function to find particular posts. Sadly, setting this up for a Hexo blog is not as straightforward as I had hoped.

Search bar addition

When searching through hexo.io/plugins to find a decent plugin to add search to a Hexo website, I came across this particular one: hexo-generator-search

This particular plugin is fairly simple to set up to generate the search.xml file. You simply run npm install hexo-generator-search --save, add the proper search: settings to your _config.yml file, run hexo generate and boom!…you have a search.xml file.

The tricky part is actually telling Hexo to do something with that search.xml file.

The steps listed here in the How to use this plugin in my Hexo blog? section is a little confusing. To use this plugin without any additional configuration, you can search for a Hexo Theme that uses this plugin. That’s great and all, but what about those that are now emotionally attached to our Hexo Theme?? (which is…no surprise…me, as per this post)

To get the hexo-generator-search plugin working with my theme, I needed to do a couple of things.

  1. Write this search.js file to the source/js folder in my project
  2. Load the /js/search.js script via this configuration section in my project
  3. Write this template code in my header.ejs file like so:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     <% if (config.search) { %>
       <div id="site_search">
         <style>#site_search {
           padding-left: 30px;
         }</style>
         <script src="<%- config.root %>js/search.js"></script> 
         <div class="form-group">
           <style>#local-search-input {
             text-align: right;
           }</style>
          <input type="text" id="local-search-input" name="q" results="0" size="13" placeholder="<%= __('search posts...') %>" class="st-search-input st-default-search-input form-control"/>
         </div>  
        <div id="local-search-result"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script type="text/javascript">      
         var search_path = "<%= config.search.path %>";
       if (search_path.length == 0) {
         search_path = "search.xml";
       }
       var path = "<%= config.root %>" + search_path;
         searchFunc(path, 'local-search-input', 'local-search-result');
       </script>
        </div>
    <% } %>

This code loads both the search.js script and jquery for the hexo-generator-search plugin to successfully query the search.xml file.

After testing locally, I now had a search input and when I type in a string, a URL is shown!

search results!

I will probably write up a PR that updates the hexo-generator-search README with some more straightforward steps on how to add this plugin to any Hexo site’s theme more easily. The steps also list how to add search to the footer ejs file of a Hexo blog which doesn’t really make a lot of sense…who wants to scroll to the bottom of a website just to then search??

Thoughts, feelings and learnings

To be completely honest, I am not a huge fan of this plugin. The search results that are displayed in the header now are not very elegant or aesthetically pleasing, however, it does the minimum of what it says it will do: query the search.xml and return the URL link of the post that matches.

Could I spend more time refining the aesthetic and search result display? Absolutely. However, I have many more interesting posts I wish to write about and those posts are subject areas that I really want to delve into around CI/CD tools. I know that spending my time focussed on those posts rather than the search bar look and feel will be a) much more enjoyable and b) more beneficial for my skill-set and career.

Interestingly, I did learn a little bit about diving into the Chrome developer console to troubleshoot some issues when the plugin wasn’t working and was not displaying results at all during local development. I tend to use the Chrome developer console when other websites are not loading, so it was fun to debug locally why the code I wrote was not working as expected. I also learned a bit about adding padding for the <div> HTML element and properly aligning the text and location of the <input> HTML element using CSS. These are very basic things (I can picture some of my co-workers chuckling at how simple those particular changes are), but frontend work is not really my forte so its nice to get out of my comfort zone and learn some new tricks every now and again 😄

Recap

  • hexo-generator-search will get you search functionality on your Hexo powered blog
  • Sometimes functionality trumps design aesthetic from time to time
  • Hexo needs a more well-rounded search plugin that can be used with all themes