デザイン部分を部品化する Partial Templates

メモ:

Paper というテーマを設定してみましたが、デザイン部分についてもう少し掘り下げていきます。 Hugo には、ヘッダーやフッターなど、どのページでも共通する部分を部品として用意し共有できる Partial Templates と呼ばれる機能があります。Paper テーマを例に Partial Templates の使い方を見ていきます。

Partial Templates のイメージ

Partial Templates

部品として用意するテンプレートは、 layouts ディレクトリの中に partial ディレクトリを用意し partial ディレクトリに配置します。

Paper テーマの場合、themes\hugo-paper\layouts\partials ディレクトリに header.html と footer.html が作成されています。

partials\
    |- footer.html
    |- header.html

例えば、 header.html は次のよう共通して使えそうな宣言部分や <head> タグ、 <body> タグの一部が定義されています。

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Title -->
  <title>
    {{- if not .IsHome }}
    {{- if eq .Kind "page" }}{{ .Title }}
    {{- else if eq .Data.Singular "tag" }}{{ .Data.Term }}
    {{- else }}Posts
    {{- end }} - {{ end }}
    {{- .Site.Title -}}
  </title>
  <!-- Meta -->
  {{- if eq .Kind "page" }}
  <meta name="description" content="{{ .Summary }}">
  <meta name="author" content="{{ .Params.author | default .Site.Params.author }}">
  {{ else }}
  <meta name="description" content="{{ .Site.Params.description }}">
  <meta name="author" content="{{ .Site.Params.author }}">
  {{ end -}}
  <!-- Styles -->
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
  <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">
  <!-- Favicons -->
  <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
  <link rel="icon" href="/img/favicon.ico">
  <!-- Generator -->
  <meta name="generator" content="Hugo {{ .Hugo.Version }}">
  <!-- RSS -->
  <link rel="alternate" type="application/atom+xml" href="/index.xml" title="{{ .Site.Title }}">
</head>
<body class="{{if eq .Kind `page` }}single{{else}}list{{end}}">
  <header class="header">
    {{ if .IsHome }}
    <h1 class="title"><a href="{{ `/` }}"><span>🍱</span>{{ .Site.Title }}</a></h1>
    {{ else }}
    <p class="title"><a href="{{ `/` }}"><span>🍱</span>{{ .Site.Title }}</a></p>
    {{ end }}
    <button class="menu-toggle" type="button"></button>
    <nav class="menu">
      <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
        <li class="{{ if $currentPage.IsMenuCurrent `main` . }}active{{ end }}">
          <a href="{{ .URL }}">{{ .Name }}</a>
        </li>
        {{ end }}
      </ul>
    </nav>
  </header>
  <main class="main">

実際の html ファイルが生成される場合、次の定義により header.html ファイルが結合され出力されます。

{{ partial "header.html" . }}