Hugo Pipe for HTML Output

support
1

Hi,

I have an idea for something a little, unusual, where I’d generate HTML and once it’s generated, I’d parse it and inject styles and javascript based on the classes, tags etc that are found.

To do this in Hugo, it looks like pipes would be the way to do this, but it would require running on the final HTML output and altering it which it doesn’t look like it’s supported. Is my understanding correct or does anyone have any examples of how I could do this?

Sidenote: I’m not sure that this is a good idea, more of a fun thought experiment.

Thanks for any ideas / input,
Matt

2

I think you need to ask a more specific question first. But at a high level it sounds like you could do this via replace and replaceRE functions in your templates.

3

Thanks for the response.

What I had in my head was hugo outputs a page along the lines of:

<html>
<head>
<title>Example</title>
</head>
<body>
<div class="c-my-element">Hi</div>
</body>
</html>

I would like the opportunity once this page has been rendered to parse the HTML to extract:

Tags: html, head, title, body, div
Classes: c-my-element

From this I can determine the css and javascript needed for the page to render and replace this content with:

<html>
<head>
<title>Example</title>
<style>....INLINE STYLES...</style>
<link rel="stylesheet" href="/css/html/body.css"> 
</head>
<body>
<div class="c-my-element">Hi</div>
<script async defer src="/js/my-element.js"></script>
</body>
</html>

I don’t think I could do this inside the template since it would require changing HTML outside of the template.

4

This could be done with replaceRE.
But I think it’s a better job for JavaScript.