Custom css for certain page using Page Resources

support
1

Hi,

I am using hugo v0.101.0.

I am trying to use Page Resources to customize style for certain pages. I have tried to add the following snippet to layouts/partials/style.html but it made no effect.

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

in content/english/blog/ directory, I have the following files and hope to apply custom style to these posts only.

_index.md
post-1.md
post-2.md
custom.css

I must have missed something. Please help.

Thanks!

2

I assumed you created a template _default/single.html and the partial is loaded.

post-1.md and post-2.md do not have custom.css as the page bundle.
See this.

I recommend that you test if this works for post-1 (but not post-2) at first.

        ├── post-1
        │   ├── custom.css
        │   └── index.md
        └── post-2.md

If you want to keep the structure and use the page resource, Headless bundle might be an option. Change layouts/partials/style.html,

{{ $headless := .Site.GetPage "/english/blog/" }}
{{ with $headless.Resources.GetMatch "custom.css" }}
  <style>{{ .Content | safeCSS }}</style>
{{ end }}

But I recommend that you simply load custom.css with link tag in this case.
In layouts/partials/style.html

<link rel="stylesheet" href="/english/blog/custom.css">