Hugo theme component for implementing static site search using Fuse.js
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.
To use this theme component, follow these steps:
Add the following code to your site’s TOML config file:
[module]
[[module.imports]]
path = "github.com/kaushalmodi/hugo-theme-components/search"
Run the following command in your main site directory to tidy the Hugo modules:
hugo mod tidy
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>
Create a file named search.md in the content directory with the following parameters:
layout set to “search”output set to ["html", "json"]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.
If your main theme does not have a baseof.html, you have two options:
search.html to fit your theme.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 */}}
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.