Custom CSS and raw HTML in Hugo posts
Great article on the web as personal design playground: https://colly.com/articles/this-used-to-be-our-playground
One slow moving project of mine is about posting some longer-form, art-directed posts to royscholten.nl, starting with 3 “dossier” pages for each of the main areas currently listed there.
Two technical pieces I had to get in place to be able to do that:
- Load custom css for a specific post.
- Allow plain html in the body of a post
Load custom css for a specific post
For this I had to connect some dots across multiple pedantic comments on stackoverflow. The apparently more common usecase is to automatically include a css file that is specific to a certain type of post. I want to include a css file with a single post.
I did not bookmark or document where I found this. I think I remember making Hugo choke on not correctly commenting the url I did want to add as documentation, so I left it out.
Anyway, in the front matter of that specific post you create a customcss parameter that has the URL to the CSS file you want to include:
customcss: "/css/specific-styles-for-just-that-post.css"
And in /layouts/partials/head/extra.html add this line:
{{ with .Params.customcss }}<link rel="stylesheet" href="{{ . }}" />{{ end }}
This takes care of adding the link to the stylesheet to the generated HTML of that specific post.
Allow plain html in the body of a post
Much easier. Thank you Ana Ulin for explaining and documenting how to do that.