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 .Title }}- {{ . }} {{ end }}</title>
    <link rel="stylesheet" type="text/css" href="{{ "css/fonts.css" | absURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/fontawesome.css" | absURL }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
    {{ with resources.Get "css/userstyles.css" }}
    <link rel="stylesheet" type="text/css" href="{{ .Permalink }}">
    {{ end }}
    {{ 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 }}
    {{ with .Site.Params.favicon }}
    <link rel="icon" href="{{ . | absURL }}">
    {{ end }}
    <meta charset="UTF-8">
    <meta name="author" content="{{ .Site.Params.Author }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{ range .AlternativeOutputFormats -}}
        {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
    {{ end -}}
</head>

static/css/docker.css

各カテゴリごとに読み込まれるCSSを作成します。今回はCSSアニメーションしたかったので下記のようにしました。

dockerのクジラが海の上でユラユラしている背景を作ってみます。

画像は static/images/ 配下に設置します。 (static配下のファイルはドメイン直下にそのまま配置されます)

今回ハマった点としては main と docker-whale の奥行きの指定でした。

z-index コンテンツの奥行き(値が小さい方が後ろに表示される)
position 文章はスクロールして欲しいが、背景は固定にしたい、そういった挙動を指定

body {
    background: url('https://www.chill-out.dev/images/sea-background.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#docker-whale {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    /* https://icons8.jp/icons/set/docker-container */
    background: url('https://www.chill-out.dev/images/docker.png') center/contain no-repeat;
    animation: wave 20s infinite;
    z-index: 0;
}

main {
    position: relative;
    z-index: 100;
}

@keyframes wave {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(10deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(-10deg);
    }
}

layouts/_default/single.html

html側でCSSの要素を読み込む必要があったので下記のタグを追加するためにテンプレートにも修正しました。

<div id="docker-whale"></div>

ページのテンプレート。使っているテーマからコピーして使いました。 themes/hugo-theme-notrack/layouts/_default/single.html を layouts/_default/single.html にコピー。

テーマのデフォルト

{{ define "main" }}
    <main>
        <article>
            {{ if in site.Params.mainSections .Page.Section }}
            <h1 class="page-title blog">{{ .Title }}</h1>
            {{ else }}
            <h1 class="page-title">{{ .Title }}</h1>
            {{ end }}

            {{- /* Show post information if it's a post, otherwise just the content */ -}}
            {{ if in site.Params.mainSections .Page.Section }}
                <p class="blog-post-info">Posted: <time>{{ .Date.Format "2006-01-02" }}</time>
                {{ partial "blog-taxonomy-info" . }}</p>
                <div class="blog-post-content">
                {{ .Content }}
                </div>
                {{ template "_internal/disqus.html" . }}
            {{ else }}
                {{ .Content }}
            {{ end }}
        </article>
    </main>
{{ end }}

次のように追加します

    {{ if in .Params.categories "docker" }}
    <div id="docker-whale"></div>
    {{ else if in .Params.categories "aws" }}
    <div id="aws-image"></div>
    {{ end }}

下のほうに追加。

{{ define "main" }}
    <main>
        <article>
            {{ if in site.Params.mainSections .Page.Section }}
            <h1 class="page-title blog">{{ .Title }}</h1>
            {{ else }}
            <h1 class="page-title">{{ .Title }}</h1>
            {{ end }}

            {{- /* Show post information if it's a post, otherwise just the content */ -}}
            {{ if in site.Params.mainSections .Page.Section }}
                <p class="blog-post-info">Posted: <time>{{ .Date.Format "2006-01-02" }}</time>
                {{ partial "blog-taxonomy-info" . }}</p>
                <div class="blog-post-content">
                {{ .Content }}
                </div>
                {{ template "_internal/disqus.html" . }}
            {{ else }}
                {{ .Content }}
            {{ end }}
        </article>
    </main>
    {{ if in .Params.categories "docker" }}
    <div id="docker-whale"></div>
    {{ else if in .Params.categories "aws" }}
    <div id="aws-image"></div>
    {{ end }}
{{ end }}

assets/css/userstyles.css

使っているテーマ hugo-theme-notrack が参照しているCSS。文章が書いてあるmainの背景を透過し、更に後ろの背景がうっすら見えるようにします。

main {
      background-color: rgba(255, 255, 255, 0.8);
}

markdown

下記のようにcategoriesを指定。

categories:
- "docker"

下記のようなmarkdownです。

---
title: docker
date: "2021-08-08T21:39:03.284Z"
description: "DockerfileやDocker一般"
categories:
- "docker"
tags:
- "docker"
- "Dockerfile"
---

test

できあがったページ

https://www.chill-out.dev/docker/docker-common/