okkur / syna

Highly customizable open source theme for Hugo based static websites
https://syna.okkur.org/demo/
Apache License 2.0
250 stars 134 forks source link

injection of custom css #785

Closed bishopnator closed 4 years ago

bishopnator commented 4 years ago

Is this a BUG REPORT or FEATURE REQUEST?: feature

What happened: I would like to use some custom css with my custom fragment(s), but I didn't find a way how to inject those files into html's HEAD section.

What you expected to happen: Syna should have simpel support how to add list of css files from the user side - like placed within 'static' folder.

How to reproduce it (as minimally and precisely as possible): Write custom fragment using own css styles and try to force injection of those css files into resulting index.html

Anything else we need to know?: I already modified syna on my side according to some forum's suggestion - add following code to head.html within syna theme:

  {{ "<!-- User Styles -->" | safeHTML }}
  {{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
  {{- end }}  

and then in config.toml (or whatever format congif file uses) a user can add:

[params]
  custom_css = ["css/main.css"]

This have also advantage that it allows to ovewrite css styles from syna - for example I needed to change the "containment" of the background image in 'hero' fragment so I added .header-image style in my css file.

The above solution can be extended to inject also javascript file if needed using e.g. in config.tompl custom_js = [...]

Environment:

stp-ip commented 4 years ago

We have the config fragment. That might be helpful for this. https://about.okkur.org/syna/fragments/config/

stp-ip commented 4 years ago

Closing this for now, if you @bishopnator feel the config fragment doesn't work as expected or you had something else in mind that isn't solved with it, let us know and reopen :)