Allow custom css files to be loaded by configuration

Previously adding custom css files would require the end user to copy
the header or footer partial into their overrides. They would then
need to maintain that partial into the future.

This config allows a user to provide a list of custom css files to load
into the theme, meaning they do not need to clone the partial.

```
[params]
  custom_css = ["css/foo.css", "css/bar.css"]
```

Inspiration taken from https://discourse.gohugo.io/t/how-to-override-css-classes-with-hugo/3033/4
This commit is contained in:
Matthew Taylor 2020-03-09 15:50:24 +00:00 committed by Matthew Taylor
parent eb0f29ee44
commit d4abb3c9a1
3 changed files with 17 additions and 11 deletions

View file

@ -12,7 +12,7 @@ Note that some of these parameters are explained in details in other sections of
```toml ```toml
[params] [params]
# Prefix URL to edit current page. Will display an "Edit this page" button on top right hand corner of every page. # Prefix URL to edit current page. Will display an "Edit this page" button on top right hand corner of every page.
# Useful to give opportunity to people to create merge request for your doc. # Useful to give opportunity to people to create merge request for your doc.
# See the config.toml file from this documentation site to have an example. # See the config.toml file from this documentation site to have an example.
editURL = "" editURL = ""
@ -24,12 +24,12 @@ Note that some of these parameters are explained in details in other sections of
showVisitedLinks = false showVisitedLinks = false
# Disable search function. It will hide search bar # Disable search function. It will hide search bar
disableSearch = false disableSearch = false
# Javascript and CSS cache are automatically busted when new version of site is generated. # Javascript and CSS cache are automatically busted when new version of site is generated.
# Set this to true to disable this behavior (some proxies don't handle well this optimization) # Set this to true to disable this behavior (some proxies don't handle well this optimization)
disableAssetsBusting = false disableAssetsBusting = false
# Set this to true to disable copy-to-clipboard button for inline code. # Set this to true to disable copy-to-clipboard button for inline code.
disableInlineCopyToClipBoard = false disableInlineCopyToClipBoard = false
# A title for shortcuts in menu is set by default. Set this to true to disable it. # A title for shortcuts in menu is set by default. Set this to true to disable it.
disableShortcutsTitle = false disableShortcutsTitle = false
# When using mulitlingual website, disable the switch language button. # When using mulitlingual website, disable the switch language button.
disableLanguageSwitchingButton = false disableLanguageSwitchingButton = false
@ -41,6 +41,8 @@ Note that some of these parameters are explained in details in other sections of
ordersectionsby = "weight" ordersectionsby = "weight"
# Change default color scheme with a variant one. Can be "red", "blue", "green". # Change default color scheme with a variant one. Can be "red", "blue", "green".
themeVariant = "" themeVariant = ""
# Provide a list of custom css files to load relative from the `static/` folder in the site root.
custom_css = ["css/foo.css", "css/bar.css"]
``` ```
## Activate search ## Activate search
@ -54,5 +56,5 @@ home = [ "HTML", "RSS", "JSON"]
Learn theme uses the last improvement available in hugo version 20+ to generate a json index file ready to be consumed by lunr.js javascript search engine. Learn theme uses the last improvement available in hugo version 20+ to generate a json index file ready to be consumed by lunr.js javascript search engine.
> Hugo generate lunrjs index.json at the root of public folder. > Hugo generate lunrjs index.json at the root of public folder.
> When you build the site with `hugo server`, hugo generates it internally and of course it doesnt show up in the filesystem > When you build the site with `hugo server`, hugo generates it internally and of course it doesnt show up in the filesystem

View file

@ -24,12 +24,12 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres
showVisitedLinks = false showVisitedLinks = false
# Désactive la fonction de recherche. Une valeur à true cache la barre de recherche. # Désactive la fonction de recherche. Une valeur à true cache la barre de recherche.
disableSearch = false disableSearch = false
# Par défaut, le cache Javascript et CSS est automatiquement vidé lorsqu'une nouvelle version du site est générée. # Par défaut, le cache Javascript et CSS est automatiquement vidé lorsqu'une nouvelle version du site est générée.
# Utilisez ce paramètre lorsque vous voulez désactiver ce comportement (c'est parfois incompatible avec certains proxys) # Utilisez ce paramètre lorsque vous voulez désactiver ce comportement (c'est parfois incompatible avec certains proxys)
disableAssetsBusting = false disableAssetsBusting = false
# Utilisez ce paramètre pour désactiver le bouton copy-to-clipboard pour le code formatté sur une ligne. # Utilisez ce paramètre pour désactiver le bouton copy-to-clipboard pour le code formatté sur une ligne.
disableInlineCopyToClipBoard = false disableInlineCopyToClipBoard = false
# Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher. # Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher.
disableShortcutsTitle = false disableShortcutsTitle = false
# Quand vous utilisez un site multi-langue, utilisez ce paramètre pour désactiver le bouton de changement de langue. # Quand vous utilisez un site multi-langue, utilisez ce paramètre pour désactiver le bouton de changement de langue.
disableLanguageSwitchingButton = false disableLanguageSwitchingButton = false
@ -37,6 +37,8 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres
ordersectionsby = "weight" ordersectionsby = "weight"
# Utilisez ce paramètre pour modifier le schéma de couleur du site. Les valeurs par défaut sont "red", "blue", "green". # Utilisez ce paramètre pour modifier le schéma de couleur du site. Les valeurs par défaut sont "red", "blue", "green".
themeVariant = "" themeVariant = ""
# Fournissez une liste de fichiers css personnalisés à charger par rapport depuis le dossier `static/` à la racine du site.
custom_css = ["css/foo.css", "css/bar.css"]
``` ```
## Activer la recherche {#activer-recherche} ## Activer la recherche {#activer-recherche}
@ -50,5 +52,5 @@ home = [ "HTML", "RSS", "JSON"]
Le thème *Learn* utilise les dernières améliorations d'Hugo pour générer un fichier d'index JSON, prêt à être consommé par le moteur de recherche lunr.js. Le thème *Learn* utilise les dernières améliorations d'Hugo pour générer un fichier d'index JSON, prêt à être consommé par le moteur de recherche lunr.js.
> Hugo génère lunrjs index.json à la racine du dossier `public`. > Hugo génère lunrjs index.json à la racine du dossier `public`.
> Quand vous générez le site avec `hugo server`, Hugo génère le fichier en mémoire, il n'est donc pas disponible sur le disque. > Quand vous générez le site avec `hugo server`, Hugo génère le fichier en mémoire, il n'est donc pas disponible sur le disque.

View file

@ -19,8 +19,11 @@
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/hugo-theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/hugo-theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{with .Site.Params.themeVariant}} {{with .Site.Params.themeVariant}}
<link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{end}} {{end}}
{{ range .Site.Params.custom_css -}}
<link href="{{(printf "%s" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- end }}
<script src="{{"js/jquery-3.3.1.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script> <script src="{{"js/jquery-3.3.1.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
@ -71,7 +74,7 @@
{{if $showBreadcrumb}} {{if $showBreadcrumb}}
{{ template "breadcrumb" dict "page" . "value" .Title }} {{ template "breadcrumb" dict "page" . "value" .Title }}
{{ else }} {{ else }}
{{ .Title }} {{ .Title }}
{{ end }} {{ end }}
</span> </span>
</div> </div>
@ -101,9 +104,8 @@
{{$parent := .page.Parent }} {{$parent := .page.Parent }}
{{ if $parent }} {{ if $parent }}
{{ $value := (printf "<a href='%s'>%s</a> > %s" $parent.RelPermalink $parent.Title .value) }} {{ $value := (printf "<a href='%s'>%s</a> > %s" $parent.RelPermalink $parent.Title .value) }}
{{ template "breadcrumb" dict "page" $parent "value" $value }} {{ template "breadcrumb" dict "page" $parent "value" $value }}
{{else}} {{else}}
{{.value|safeHTML}} {{.value|safeHTML}}
{{end}} {{end}}
{{end}} {{end}}