calendar

Hugoで特定の記事のみ外部CSSファイルを読み込ませる方法

category Hugo
tag Hugo tag 設定
toc目次

特定の記事のみ外部CSSファイルを読み込む

フロントマター（Front matter）を使用することで、特定の記事のみ外部CSSファイルを読み込むことができるようになります。

外部CSSファイルの配置

読み込ませるCSSファイルをassetsフォルダー内に配置します。

以下はassets/cssにsample1.css、sample2.cssを配置する例です。

Hugoプロジェクト/
  ├── archetypes/
  │   └── default.md
  ├── assets/
  │   └── css/
  │        ├── sample1.css
  │        └── sample2.css
  ├── content/
  ├── data/
  ├── layouts/
  ├── public/
  ├── static/
  ├── themes/
  └── hugo.toml

フロントマターの編集

外部CSSファイルを読み込みたい記事のフロントマターにページ変数を追加し、外部CSSファイルのパスを設定します。

以下はページ変数（css）を作成し、外部CSSファイルのパスを設定しています。

---
title: サンプル
date: 2024-04-14
draft: false
css:
  - css/sample1.css
  - css/sample2.css
---

YAML形式でなくTOML形式を利用している場合は、以下のように記載します。

+++
title = "サンプル"
date = "2024-04-14"
draft = false
css = [ "css/sample1.css", "css/sample2.css" ]
+++

ベーステンプレートの編集

ベーステンプレート（_default/baseof.html）の<head>内に、フロントマターで設定したCSSファイルを読み込む処理を追加します。

<head>

{{- range .Page.Params.css }}
  {{- with resources.Get . }}
    <link rel="stylesheet" href="{{ .RelPermalink }}" />
  {{- end }}
{{- end }}

</head>

Minifyも合わせて行う場合は、以下のようにします。

<head>

{{- range .Page.Params.css }}
  {{- with resources.Get . }}
    {{- with . | minify }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" />
    {{- end }}
  {{- end }}
{{- end }}

</head>

テンプレート修正後、フロントマターで外部CSSファイルのパスを設定したページでは、外部CSSファイルが読み込まれるようになります。

<head>

<link rel="stylesheet" href="/css/sample1.css" />
<link rel="stylesheet" href="/css/sample2.css" />

</head>