HUGO v0.90.0で追加されたimages.TextでブログカードとOGP画像を自動生成する

{{ $img := resources.Get "/images/background.png"}}
{{ $img = $img.Filter (images.Text "Hugo rocks!" (dict
    "color" "#ffffff"
    "size" 60
    "linespacing" 2
    "x" 10
    "y" 20
))}}

---
title: 福岡の美味しいラーメン
image: ramen.jpg
---

## 福岡といえばとんこつ

$ tree content
content
└── post
    ├── _index.md  # 一覧ページ
    ├── gourmet.jpg
    ├── ramen.jpg
    ├── ramen.md  # 記事ページ
    ├── udon.jpg
    └── udon.md  # 記事ページ

{{- define "main" }}
<h1>{{ .Title }}</h1>
{{ $font := resources.Get "https://github.com/google/fonts/raw/main/ofl/notosansjp/NotoSansJP-Black.otf" }}
{{ range .RegularPages }}
<div>
  {{- $img := .Page.Parent.Resources.GetMatch (.Params.image) }}
  {{- $title := .Title }}
  {{- with $img }}
    {{- $options := images.Text $title (dict "color" "#eee" "size" 30 "y" 120 "font" $font) }}
    {{- $img = $img.Fill "600x315 Center"  | images.Filter $options }}
    <div><img src="{{ $img.RelPermalink }}" alt="ブログカード" ></div>
  {{- end }}
  <div>
    <a href="{{ .Permalink }}">{{ .Date.Format "2006-01-02" }} | {{ .Title }}</a>
  </div>
</div>
{{ end -}}
{{ end -}}

<meta property="og:type" content="article">
<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ .Description }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
{{- $font := resources.Get "https://github.com/google/fonts/raw/main/ofl/notosansjp/NotoSansJP-Black.otf" }}
{{- $img := "" }}
{{- if .IsPage }}{{- $img = .Page.Parent.Resources.GetMatch (.Params.image) }}
{{ else if .IsSection }}{{- $img = .Page.Resources.GetMatch (.Params.image) }}
{{ end }}
{{- $title := .Title }}
{{- with $img }}
  {{- $option := images.Text $title (dict "color" "#eee" "size" 30 "y" 120 "font" $font) }}
  {{- $img = $img.Fill "600x315 Center"  | images.Filter $option }}
  <meta property="og:image" content="{{ $img.RelPermalink }}">
{{ end -}}