What's the best practice of browser-side templating?

support
1

My Case

I’m building a search function for my theme. Search results are generated by browser scripts and rendered into a list of HTML components (eg. a card with title and summary).

What I’ve tried

Writing html as strings is the most straight-forward solution, but it’s not for my case: I used tailwind css, which detects HTML source and purges unused styles. If I write HTML strings in my script, their styles would broke.

I’m currently doing: Write HTML of one card in the source. Use eta, a ejs-like template engine to read the outerHTML of the written card and compile it, then remove it from page. Render with eta when needed.

This method is somehow working. For example, if I write src="<%= it.url %>", hugo will refuse to render the page, for it can’t parse the attribute. I did managed to find a workaround, but it’s still annoying to work like this.

I’d like to know if there is any elegant solution to my requirements.

2

While it’s not exactly the answer you seek, you might instead try Pagefind for search; this would allow you to avoid any non-standard templating that might otherwise run afoul of Hugo’s “wishes,” so to speak.

1 Like