PageFind

Table of Contents

Pagefind
How to show the search box on the UI pages for Hugo themes?

Pagefind

https://pagefind.app/

~~Install PageFind: https://pagefind.app/docs/installation/~~

Don’t have to install it. Just use the npx version of the command.

This is to use the search functionality in web pages.

The process slightly varies based on the theme that is being used.

Include the function from “Pagefind” documentation in the appropriate html file in the theme.

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>