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!)

[evanescente-ondine]

Thanks, I understood, and it works as intended. You are very nice, and this project really shines, if a js hater like me can do exactly what he wants with it in two days. And the work you've done to appeal and make it really easy to SSG users among other things... Just fabulous. Have a nice day..