layouts/_partials/head/css.html

Hugoのlayouts/_partials/head/css.html解説: CSS読み込みの部分

このコードは、Hugoテーマにおいて最適化されたCSSファイルの読み込みを行う部分です。開発環境と本番環境で異なる処理を行っています。

$ cat themes/my-theme/layouts/_partials/head/css.html
{{- with resources.Get "css/main.css" }}
  {{- if hugo.IsDevelopment }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}

コードの流れ

  1. {{- with resources.Get "css/main.css" }} - サイトの “assets” ディレクトリ内の “css/main.css” ファイルを取得します
  2. 環境に応じた処理を分岐します:
    • 開発環境の場合: CSSをそのままリンク
    • 本番環境の場合: CSSを最小化(minify)し、整合性チェック用のハッシュ(fingerprint)を生成

詳細解説

{{- with resources.Get "css/main.css" }}

  • resources.Get は指定されたファイルをリソースとして取得する関数
  • - は出力時の余分な空白を削除するための指示子
  • このブロック内では取得したCSSファイルが . として参照可能

{{- if hugo.IsDevelopment }}

  • hugo.IsDevelopment は現在の環境が開発モードかどうかを確認
  • 開発中は hugo server コマンドで実行する場合が該当

開発環境時

<link rel="stylesheet" href="{{ .RelPermalink }}">
  • CSSファイルをそのままリンク (最適化なし)
  • .RelPermalink はリソースのURLパスを生成

本番環境時

{{- with . | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
  • minify: CSSファイルを最小化して容量を削減
  • fingerprint: ファイルの内容に基づくハッシュ値を生成
  • integrity: Subresource Integrity (SRI) 用のハッシュ値を出力
  • crossorigin="anonymous": クロスオリジンリクエストの処理方法を指定

メリット

  • 開発時は元のコードを保持して作業効率を上げる
  • 本番環境ではファイルサイズ縮小とキャッシュ最適化
  • SRIによるセキュリティ強化

このような処理により、開発のしやすさと本番環境でのパフォーマンス・セキュリティの両方を確保しています。