hugoでカテゴリによって背景を変える
Posted: | Categories: hugo | Tags: hugo
背景 カテゴリごとに背景を変えられたら少し分かりやすいし、 背景がアニメーションしたら更に楽しそう、という訳でやってみた。 hugoでの分岐 hugoでは.Paramsオブジェクトを経由してサイト、ページの変数を取得可能です。 ページごとのパラメータとしては .Params.categories カテゴリ .Params.tags タグ あたりが使えそう(参考 Page Variables | Hugo ) 条件によってタグを分岐する処理を追加します。今回はカテゴリで分岐しました。 変更箇所 layouts/partials/head.html 読み込むCSSを切り替える layouts/_default/single.html ページのテンプレート static/css/docker.css そのままドメイン配下に設置される、各カテゴリごとにcssを用意する assets/css/userstyles.css 使っているテーマ hugo-theme-notrack が参照しているCSS layouts/partials/head.html {{ if in .Params.categories "docker" }} <link rel="stylesheet" href="/css/docker.css"> {{ else if in .Params.categories "aws" }} <link rel="stylesheet" href="/css/aws.css"> {{ end }} 次の場所に追加しました。 <head> <title>{{ .Site.Title }} {{ with . Read more...