Hugo: can I apply a custom css style to a specific post?

user_399637 0
Viewed 371

The css properties of a post are related to post and post-content classes if I am not wrong so if I override some of their properties this will apply to all posts in my site.

I would like to apply apply some css properties only to a particular post, how can I do this?

hugo css
1 Answers

Solution 1: extra css file

The nicest way to do this is with page resources. You can walk over the files in the page bundle and look for a CSS file. You should then add the CSS file to your head/content using:

{{ with .Resources.GetMatch "*.css" }}
  <style>{{ .Content | safeCSS }}</style>
{{ end }}

Solution 2: body class

A simpler (but messier) way is to add a class to your body. This looks like this:

<body class="{{ File.BaseFileName }}">

This will add a class to the body with the slug of your page. This way you can apply page specific styling, by adding rules to your main stylesheet.

user_23975500
Related