Hugo

gohugoio/hugo: The world’s fastest framework for building websites.

Variables

テーマをカスタマイズする際に、特定条件で挙動を変えたいシーンが多々発生するが、その際に使い勝手のよい変数。

参照サイト

Page methods

Use these methods with a Page object.

By gohugo.io

関連メソッド

• .IsSection : true if .Kind is section
• .IsPage: always true for regular content pages.
• .IsHome: true in the context of the homepage.

上記の表での前提

• technologies という名前のセクション名に記事を配置しているとする。意識していなければ、デフォルトは posts に作成される。
• ページデザインのレイアウトは layouts/original_blog を適用しているとする。
  • レイアウトの指定は記事本文（ページ）の Markdown ファイルに記載してもよいし、セクション配下に一律で適用したい場合は、セクションディレクトリ直下の _index.md に cascade を用いて以下の記載をするのが手っ取り早い。

---
title: "Technologies (技術ブログ)"
cascade:
- type: "original_blog"
---

Docsy theme

• Hugo Modules に依存している。
• hugo server したときに Themeファイルのダウンロードがされる
  • 依存関係を変更していなくても一定日数が過ぎて起動すると改めてダウンロードが走るのでキャッシュ関連の動作がある模様
  • 正しくダウンロードできたはずなのに以下の通りエラーが出ることあり

Error: Error building site: "/Users/path/to/project/content/docs/article/_index.md:8:1": failed to extract shortcode: template for shortcode "alert" not found

このケースでは、 Docsy が提供している shortcode が見つからないとのこと（何故か）。手元の macOS環境にて発生。

hugo mod clean にてキャッシュクリアしたら起動できる（細部未確認のため再現性不明）

Twitter Card

• Ladicle/tcardgen: Generate a TwitterCard(OGP) image for your Hugo posts.
• HugoでもTwitterCard画像を自動生成したい

多言語

• Hugoでのi18n+Dataファイル機能を使う時のユースケースまとめ - Qiita

Variables

https://gohugo.io/templates/introduction/#the-dot

1. Define a Variable Independent of Context

The most easily overlooked concept to understand about Go Templates is that {{ . }} always refers to the current context.

• In the top level of your template, this will be the data set made available to it.
• Inside an iteration, however, it will have the value of the current item in the loop; i.e., {{ . }} will no longer refer to the data available to the entire page.

2. Use $. to Access the Global Context

$ has special significance in your templates. $ is set to the starting value of . (“the dot”) by default. This is a documented feature of Go text/template. This means you have access to the global context from anywhere. Here is an equivalent example of the preceding code block but now using $ to grab .Site.Title from the global context:

遅延ロード

To lazy load images within Hugo two things are required:

• Add the loading="lazy" attribute
• Where possible add the image size to prevent repainting

参照サイト

Native image lazy loading

A little bit of history on the lazy loading attribute and how to implement it on a Hugo website

By jloh.co

参照サイト

Native lazy-loading of images on Hugo based website | pawelgrzybek.com

The implementation of lazy-loading images using Hugo is equally simple as adding it to an HTML file and you don’t have a good reason not to …

By pawelgrzybek.com

Markdown Render Hooks

参照サイト

Render hooks

Create render hooks to override the rendering of Markdown to HTML.

By gohugo.io

検索

RSSページテンプレートで日付の逆順にソートしたい場合

• ページ全てをRSSにしてしまうと意図せず余計なページを含んでしまうことがあるので、明示的に対象セクションをしておいたほうが間違いが少ない
• $pages に表示したい対象のページを where で絞り込んで変数化
• 繰り返し処理 range の部分では .ByParam "date" を用いてソートキーとして利用
  • 最後に .Reverse することで逆順（最新日付を最上部）としている

{{/* $filterSections には任意のセクション名を入れておく（ホワイトリスト式） */}}
{{ $filterSections := (slice "posts") }}

{{- $pages = where (.Site.RegularPages) "Section" "in" $filterSections -}}

{{/* 中略 */}}

{{ range ($pages.ByParam "date").Reverse }}
  ...

Counter

リストのループでユニークな連番を付与したいケース

https://discourse.gohugo.io/t/how-counting-up-a-variable-in-range/586/8

{{ $.Scratch.Set "counter" 0 }}
  {{range sort .Params.employees}}
    {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
    I am the number {{$.Scratch.Get "counter"}} in loop!
{{end}}