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

Fügen Sie in hugo.toml hinzu

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

Nun müssen Sie die Datei in Ihrem Theme finden, in der der Layout-Head generiert wird. Verwenden Sie z. B.

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ügen Sie in dieser Datei hinzu

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

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

Wenn Sie nun hugo serve ausführen, sehen Sie die Änderungen durch Ihre benutzerdefinierte CSS-Datei sofort.