Need some guide to create my search page

1

I would like to create a separate search page where the user enters a keyword on any page and then jumps to a page like /search/ or /search.html to display the results. The place where the user’s search behavior occurs may not be the search page, so I’m currently unsure how to get the search results and pass the data. I can think of a couple of solutions, but they all have problems that I can’t solve:

  1. Get the URL query parameter as a keyword, search using Fuse.js, and then pass the results via input to the template. Since the template generates the results before the Javascript is executed, this solution is clearly impractical I guess.

  2. Generate results with Fuse.js when the user clicks the search button and sets them into .Site.Scratch, and the next search template gets the data and generates the corresponding results. This seems to work, but I’m not sure how to put the result data into .Site.Scratch after the Javascript works it out.

  3. Forget about the Fuse.js search and create a search myself in the search page template using the JSON data format used by Fuse.js and display the results. The problem with this is that I haven’t found any way that allows me to get the URL query parameter for the current page (violate Hugo’s goal as a static site generation tool?), and as a result, I can’t do any searches either.

Will any of the above solutions work if I know more about Hugo? Or is there any workaround that will do the job?

2

I’m not sure that this answers your question, but Pagefind by Cloud Cannon is a no-brainer.

1 Like
3

Thanks for the advice. I suddenly realize that I totally misunderstood what Hugo is in this case, I should use the Javascript solutions like Pagefind or Fuse.js. I will go on discover how I can solve my problem. Thank you.

4

Try this solution which also has an option to configure multilingual support. It uses fuse.js.

5

Thank you for your help!
I roughly read the code in the repository and then created my own standalone functioning search page that can be controlled by the query parameters in the URL. It uses Fuse.js to retrieve items from the index.json file via the query parameter, and then inserts the HTML content corresponding to the result into the list. I don’t know if there is a more elegant way, but now the page I created seems working well. I’ll keep improving it in the future by trying cleaner code.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.