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>セクションを定義しています。各行の説明は以下の通りです:
<meta charset="utf-8">:- ウェブページの文字エンコーディングを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" . }}:- CSSスタイルシートを読み込むためのパーシャルテンプレート
partialCachedはパフォーマンス向上のためキャッシュ機能を使用
{{ partialCached "head/js.html" . }}:- JavaScriptファイルを読み込むためのパーシャルテンプレート
- 同じくキャッシュ機能を利用
この部分テンプレートは各ページの<head>セクションに挿入され、メタデータ、タイトル、スタイルシート、JavaScriptを適切に設定する役割を持っています。