Wie man benutzerdefiniertes CSS zu einer Hugo-Site hinzufügt

Füge in hugo.toml hinzu

hugo.toml
[params]
custom_css = ["css/myblog.css"]

Nun musst du die Datei in deinem Theme finden, in der der Layout-Head generiert wird. Verwende z. B.

find_stylesheet_links.sh
ag '<link rel="stylesheet"'

um herauszufinden, welche Datei dies ist

Für mich (tailbliss-Theme) ist es themes/tailbliss/layouts/partial/head.html und ich glaube, es ist bei anderen Themes ziemlich ähnlich.

Füge in dieser Datei hinzu

themes/mytheme/layouts/partial/head.html
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

Erstelle nun die eigentliche statische CSS-Datei in static/css/myblog.css.

Wenn du nun hugo serve ausführst, siehst du die Änderungen durch deine benutzerdefinierte CSS-Datei sofort.


Ähnliche Beiträge nach Kategorie: Hugo