作成日:  (更新日: )

Hugo のスニペット集

このページは、Hugo のスニペットなどをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。

スニペット

URLフィンガープリント

※ resources.Get で取得するファイルは /themes/***/assets 内に配置されている必要があります。

CSS

{{- $css := resources.Get "test.css" -}}
{{- $secureCSS := $css | resources.Fingerprint "sha512" -}}
<link rel="stylesheet" href="{{ $secureCSS.Permalink }}" integrity="{{ $secureCSS.Data.Integrity }}">

JavaScript

{{- $js := resources.Get "test.js" -}}
{{- $secureJS := $js | resources.Fingerprint "sha512" -}}
<script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>

JSON 読み込み

{{- $json := getJSON "data/test.json" -}} <!-- サイトのルートフォルダからのパスを指定してファイル読み込み -->
{{ $json }} <!-- ダンプ確認 -->
{{- range $key, $val := $json -}} <!-- ループ (Mapの場合) -->
    {{ $key }} {{ $value }}
{{- end -}}

JSON出力

1. config.toml に出力形式の設定を追加します。 (例: meta)

[outputFormats.meta]
baseName = "meta"
isPlainText = true
mediaType = "application/json"
notAlternative = true

[outputs]
home = [ "HTML", "RSS", "meta" ]

2. themes/***/layouts/_default/list.形式名.json を配置します。

{{- $.Scratch.Add "index" slice -}}
{{- range .Data.Pages -}}
  {{- if and (not .Draft) -}}
    {{- $item := newScratch -}}
    {{- $item.SetInMap "item" "uniqueID" .File.UniqueID -}}
    {{- $item.SetInMap "item" "date" .Date.UTC.Unix -}}
    {{- $item.SetInMap "item" "description" .Description -}}
    {{- $item.SetInMap "item" "permalink" .Permalink -}}
    {{- $item.SetInMap "item" "publishDate" .PublishDate -}}
    {{- $item.SetInMap "item" "title" .Title -}}
    {{- $item.SetInMap "item" "tags" .Params.Tags -}}
    {{- $item.SetInMap "item" "categories" .Params.Categories -}}
    {{/*- $item.SetInMap "item" "content" .Plain -*/}}
    {{- $.Scratch.Add "index" ($item.Get "item") -}}
  {{- end -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

項目の意味は下記のとおりです。

項目 意味
.Draft 下書きかどうか (not .Draft = 「下書きでない記事」)
.File.UniqueID 記事のユニークID (古いバージョンでは .UniqueID)
.Date.UTC.Unix 記事の作成日時 (UNIXタイムスタンプ)
.Description 記事の概要
.Permalink 記事のパーマリンク (古いバージョンでは .URL)
.PublishDate 記事の作成日時
.Title 記事のタイトル
.Params.Tags 記事のタグ
.Params.Categories 記事のカテゴリ
.Plain 記事本文のテキスト

3. hugo server 実行後、http://localhost:1313/形式名.json を開いて出力されているか確認します。

ショートコードのエスケープ

{{</* test */>}}

{{%/* test */%}}

ショートコード

<div>

テーブルやリストなどを Markdown 形式で記載しつつクラス付きの <div> タグで囲いたい時に使用します。

themes/xxx/layouts/shortcodes/div.html
<div {{ with .Get "class" }}class="{{ . }}"{{ end }}>
{{ .Inner }}
</div>
使用例
{{% div class="test-table" %}}
列1	|	列2	|	列3
---	|	---	|	---
a	|	1	|	A
b	|	2	|	B
c	|	3	|	C
{{% /div %}}

<script>

ページ固有のスクリプトを記載したい時に使用します。

themes/xxx/layouts/shortcodes/script.html
<script>
{{ .Inner | safeJS }}
</script>
使用例
{{< script >}}
document.addEventListener('DOMContentLoaded', function(){
    // ...
});
{{< /script >}}