HUGO

Add a specific css to each page

Hello
I try to reduce css in my site as much as possible I tried to use {{ block "mycss" . }}{{ end }} and {{ define "mycss" }}{{ end }}
For example I added define in partials/share.html and I added block in partials/head.html and I added {{ partial "head" . }} in _default/daseof.html and _default/home.html and I added {{ partial "share" . }} in _default/single.html
The problem is that css appears on all pages, even on the main page. Is there a solution to this?
thank you

1 - I have a generic code on my css_partial.html on every page.
2 - I have on certain pages a variable on front matter.

<!-- SLICK CAROUSEL : UNIQUEMENT SUR CERTAINES PAGES -->
{{- if $.Params.css_slick }}
   {{- $css := resources.Get "plugins/slick-carousel/slick/slick.css" }}
   <!-- process my css asset -->
   {{- partial "partials/css-process" (dict "context" . "css" $css) }}
{{- end }}

the page with this css

---
url         : presse
date        : 2019-05-21T12:37:52+06:00
draft       : false
css_slick   : true
---

And if you want to take care of both home and pages you can have something like this:


{{- if or .IsHome $.Params.css_slick }}

See this post with same principle for .js

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.