layouts/_partials/head.html

Hugoのlayouts/_partials/head.htmlについて

$ cat themes/my-theme/layouts/_partials/head.html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
{{ partialCached "head/css.html" . }}
{{ partialCached "head/js.html" . }}

このコードは、Hugoテーマのhead.html部分テンプレート（パーシャル）で、HTMLの<head>セクションを定義しています。各行の説明は以下の通りです：

  1. <meta charset="utf-8">:

    • ウェブページの文字エンコーディングをUTF-8に設定します。これは特殊文字や多言語対応に必要です。

  2. <meta name="viewport" content="width=device-width">:

    • レスポンシブデザイン用のビューポート設定です。
    • デバイスの画面幅に合わせてページを表示します（モバイル対応）。

  3. <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>:

    • ページタイトルを動的に設定します。
    • もしホームページなら、サイトタイトルのみ表示
    • それ以外のページなら、「ページタイトル | サイトタイトル」の形式で表示

  4. {{ partialCached "head/css.html" . }}:

    • CSSスタイルシートを読み込むためのパーシャルテンプレート
    • partialCachedはパフォーマンス向上のためキャッシュ機能を使用

  5. {{ partialCached "head/js.html" . }}:

    • JavaScriptファイルを読み込むためのパーシャルテンプレート
    • 同じくキャッシュ機能を利用

この部分テンプレートは各ページの<head>セクションに挿入され、メタデータ、タイトル、スタイルシート、JavaScriptを適切に設定する役割を持っています。