Hugoの「render hooks」がかなり良さげな感じ！

2025年8月9日

カテゴリ: 技術

タグ: Hugo Blog

最近Hugoブログのテーマを作ってみようする中で知ったのですが・・・

render hooks機能がかなり良さそうでした！！

Render hooks

https://gohugo.io/render-hooks/

「テーマを変えてみよう」として気づいたこと・・・

テーマを変えてみる中で気づいたのですが・・・「ショートコード、移行するのめんどい！！！」

ショートコードを利用するとテーマが持っていたり、事前に設定したテンプレートのようなものを埋め込むことができるのですが、これって要するに使えるショートコードは「使っているテーマ」に依存するわけで・・・

そのテーマが持っているショートコードを多用していると、

「ちょっとテーマを変えてみよ～」

ということがやりにくくなるのですね・・・テーマを変えるためにマークダウンの方に書いているショートコードの利用部分も置き換えていく必要が出てくる・・・いざテーマを作ってみる中で初めて気づいた問題点です・・・

でも、ちょこっと出力結果を加工したい・・・

ということなので、「テーマを変えること」を考えると、マークダウンで書いている内容は「一般的なマークダウンで使われている記法」にとどめておいた方よさそうな感じです。

そんな時にもしかすると「Render hooks」を活用できるかもしれないです！

Render hooksっていうのがマークダウンのリンク部分とか、画像部分とかをhtmlタグに変換するときに「こんな風に変換してほしい」っていうのを記述して置ける仕組み？という理解です。

それを利用してかなり強引ですが・・・

リンクカードっぽくしたり↓

alt text

    text
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


{{ $text := .Text | plainify }}
{{ $url := .Destination | safeURL }}

{{ $useCard := strings.HasPrefix $text "*" }}

{{ if not $useCard }}
  <a href="{{ $url }}">{{ .Text }}</a>
{{ else }}
  {{ $title := (replace $text "*" "") }}
  <!-- カード化ロジック -->
    {{ $url := .Destination | safeURL }}
    {{ $title := "" }}
    {{ $description := "" }}
    {{ $image := "" }}

    {{ with try (resources.GetRemote $url) }}
    {{ with .Err }}
        {{ $title = "情報の取得に失敗しました( ;∀;)" }}
    {{ else with .Value }}
        {{ $content := .Content }}
        {{ $head := index (findRE `(?s)<head[^>]*>.*?</head>` $content ) 0 }}

        {{ $titleMatch := findRE `<title[^>]*>(.*?)</title>` $content 1 }}
        {{ if $titleMatch }}
        {{ $title = replaceRE `<title[^>]*>(.*?)</title>` "$1" (index $titleMatch 0) }}
        {{ end }}

        {{ range $meta := findRE `<meta.*?>` $head }}
        {{ $name := findRE `name=["']([^"']+)["']` $meta 1 }}
        {{ if $name }}{{ $name = replaceRE `name=["']([^"']+)["']` "$1" (index $name 0) }}{{ end }}

        {{ $property := findRE `property=["']([^"']+)["']` $meta 1 }}
        {{ if $property }}{{ $property = replaceRE `property=["']([^"']+)["']` "$1" (index $property 0) }}{{ end }}

        {{ $metaContent := findRE `content=["']([^"']+)["']` $meta 1 }}
        {{ if $metaContent }}{{ $metaContent = replaceRE `content=["']([^"']+)["']` "$1" (index $metaContent 0) }}{{ end }}

        {{ if eq $property "og:title" }}{{ $title = $metaContent }}
        {{ else if eq $property "og:description" }}{{ $description = $metaContent }}
        {{ end }}
        {{ end }}
    {{ end }}
    {{ end }}

    <a href="{{ $url }}" class="link-card-wrapper">
    <div class="link-card-inner">
        <div class="link-card-content">
        {{ if $title }}
            {{ $max := 40 }}
            {{ $shortTitle := cond (gt (len $title) $max) (printf "%s…" ($title | truncate  $max)) $title }}
            <div class="link-card-title" title="{{ $title }}">{{ $shortTitle | plainify }}</div>
        {{ end }}
        {{ if $description }}
            {{ $max := 80 }}
            {{ $shortDesc := cond (gt (len $description) $max) (printf "%s…" ($description | truncate $max)) $description }}
            <div class="link-card-description">{{ $shortDesc | plainify }}</div>
        {{ end }}
        <div class="link-card-url">{{ $url }}</div>
        </div>
    </div>
    </a>
{{ end }}

「ブログカード」というものを利用したい！ | かもしかのお部屋…

https://www.forrexlapis.win/posts/2025/05/creating_blog_card/

alt text

リンクの記述を書く際に「*」を頭につけるとリンクカード用の記述になるようにしたり・・・(前作ったものを流用した！)

alt text

    text
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


{{ $src := .Destination }}
{{ $sourceImage := .Page.Resources.GetMatch $src }}
{{ $ext := (delimit (last 1 (split $src ".")) "") | lower }}

{{ if and $sourceImage (ne $ext "webp") }}
  {{ $webpImage := $sourceImage.Process "webp" }}
  <img class="image-in-markdown"
    src="{{ $webpImage.RelPermalink }}"
    width="{{ $sourceImage.Width }}"
    height="{{ $sourceImage.Height }}"
    loading="lazy"
    {{ with .Title }} title="{{ . }}"{{ end }}
    {{ with .PlainText }} alt="{{ . }}"{{ end }}
  >
{{ else if $sourceImage }}
  <img class="image-in-markdown"
    src="{{ $sourceImage.RelPermalink }}"
    width="{{ $sourceImage.Width }}"
    height="{{ $sourceImage.Height }}"
    loading="lazy"
    {{ with .Title }} title="{{ . }}"{{ end }}
    {{ with .PlainText }} alt="{{ . }}"{{ end }}
  >
{{ else }}
  <img class="image-in-markdown"
    src="{{ $src | safeURL }}"
    loading="lazy"
    {{ with .Title }} title="{{ . }}"{{ end }}
    {{ with .PlainText }} alt="{{ . }}"{{ end }}
  >
{{ end }}