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.