Jak přidat custom CSS do Hugo site

V hugo.toml přidejte

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

Nyní musíte najít soubor ve vaší theme, kde se generuje layout head. Použijte např.

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

pro nalezení, který soubor to je

Pro mě (tailbliss theme) je to themes/tailbliss/layouts/partial/head.html a věřím, že je to docela podobné i pro ostatní themes.

V tomto souboru přidejte

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

Nyní vytvořte skutečný statický CSS soubor v static/css/myblog.css.

Když nyní spustíte hugo serve, uvidíte změny zavedené vaším custom CSS souborem okamžitě.


Podívejte se na podobné články podle kategorie: Hugo