Put Hugo pipes directly in source


#1

Basically a feature that uses Hugo pipes and instead of calling a .RelPermalink I can put the resource directly in the page source.

I’m mostly thinking of CSS and JS, but I believe SVG would also be a possibility.

This would be very convenient for stuff like AMP (I know, I know), but also for something like embedding small style/js files on certain pages, where it’s kinda hard to justify another network call.


#2

You can. You can inline the content of any resource with .Content. I saw a online tutorial about this some time ago, maybe others can chime in with a link.


#3

I just want to add that .Content in most cases will be a string – so it helps to understand how Go templates works with this, so for CSS you may want to do .Content | safeCSS etc. We may improve on this type handling in the future.


#4

W/r/t SVG, the Hugo docs site does a good job of showing how you can use dict when directly embedding SVGs. I believe @budparr was only using this for partials, but you could very easily do this in a shortcode as well (e.g., if you wanted to embed SVGs directly inside a markdown file’s content).

Here’s the dir of SVGs:

And an example of how to call the SVG inside the partial: