don't understand how to modify pagefind-ui. and how to keep it between reindexing

[evanescente-ondine]

Hi,
I know very little about javascript. I can't copy/paste and understand basic grammar, so I deduced that the configuration I need is this:

new PagefindUI({
element: "#search",
showImages: false,
excerptLength: 12,
resetStyles: false
});

But otherwise I don't know where to put this. I thought it would be in "pagefind.js", I wrote it as such at the end of the file, but then it does nothing. Also I am bothered, could this be written in a config file instead ? Because if it's under pagefind/, everytime I redo the indexing -by running npx pagefind, those modifications will be erased, am I right ?

Thanks.

[bglw]

👋 Hey @evanescente-ondine

That JavaScript can go inside one of your existing (non-Pagefind) JavaScript files, or if you have none, within a <script> element anywhere in your HTML.

For example, Pagefind's website uses a Hugo template. Hugo uses the baseof.html layout file to render all pages to the static site, so in this file we insert the PagefindUI JavaScript inside a <script> element:

https://github.com/CloudCannon/alto-hugo-template/blob/14ea7320838fb004d23d49bbf60d557822a0090b/layouts/_default/baseof.html#L71-L75

Putting it inside a window.addEventListener('DOMContentLoaded' ... block ensures that Pagefind's scripts have loaded before this initialization is executed.

This layout also references the pagefind-ui.js script, and adds the #search container to the page:

https://github.com/CloudCannon/alto-hugo-template/blob/14ea7320838fb004d23d49bbf60d557822a0090b/layouts/_default/baseof.html#L56-L59

Let me know if that helps explain things! If not, feel free to send through a link to a repo or some example files and I can help illustrate how to integrate Pagefind 🙂

(PS: I'll convert this issue into a discussion so it can stay around a little longer!)