Overview

The Hugo live search using Fuse.js and Mark.js is a theme component for the Hugo website generator. It provides live search functionality and keyword highlighting for Hugo websites.

Features

• Live search using Fuse.js
• Keyword highlighting using Mark.js
• Integration with Hugo modules
• Compatibility with Go version 1.16 and above
• Easy installation and setup

Installation

To use this theme component, follow these steps:

1. Add the following code to your site’s TOML config file:

   [module]
     [[module.imports]]
       path = "github.com/kaushalmodi/hugo-theme-components/search"
   

2. Run the following command in your main site directory to tidy the Hugo modules:

   hugo mod tidy
   

3. Make sure your main site repository is also a Hugo module. If it is not, run the following command in your site repo:

   hugo mod init <your site url or any unique string>
   

4. Create a file named search.md in the content directory with the following parameters:

   • layout set to “search”
   • output set to ["html", "json"]

5. If your main theme does not meet the requirements of using base template and blocks, you may need to edit the search.html partial located in the layouts/_default directory of this component.

6. If your main theme does not have a baseof.html, you have two options:

   • Edit the search.html to fit your theme.
   • Upgrade your theme to use the new “base template and blocks” approach.

7. If your main theme has a baseof.html but does not have the main and/or footer blocks, you can easily add them without breaking your existing theme. Add the following code at the appropriate place in your baseof.html:

   {{/* block "main" . */}}{{/* end */}}
   

   And add the following code if the footer block is missing:

   {{/* block "footer" . */}}{{/* end */}}
   

Summary

The Hugo live search theme component provides live search functionality and keyword highlighting for Hugo websites. It is easy to install and integrates seamlessly with Hugo modules. It requires Go version 1.16 or above and can be customized to fit the requirements of your main theme.