Hugoでブログカードを作成する(resources.GetRemote利用)
更新日:2022.09.04
作成日:2022.08.29
以前、
HugoでAMP対応のブログカードを作る
でAPIサーバを利用したブログカードの作成方法を紹介した。このときは、getJSON
を利用していた。
Hugo v0.91.0
でresources.GetRemote
が実装され、getJSON
やgetCSV
以外にもresources.GetRemote
を利用できるようになった。
Release v0.91.0 · gohugoio/hugo
resources.GetRemote
を利用したブログカードの作り方のメモ。
resources.GetRemote
を利用したブログカードの作り方
resources.GetRemote
を利用して、ビルド時に指定したURLへアクセスして、OGPを取得する。
結果は、以下のような形となる。

markdownファイル
{{< blogcard "http://example.com" >}}
のように記述する。
content/blog/blogcard.md
{{< blogcard "https://www.meganii.com/blog/2022/08/14/migration-from-github-to-cloudflare-pages/" >}}
{{< blogcard "https://www.meganii.com/blog/2022/08/11/proxying-cloudinary-with-cloudflare-workers/" >}}
{{< blogcard "http://example.com" >}}
Shortcodeの中身は次のとおり。
layouts/shortcodes/blogcard.html
{{- $url := (.Get 0) -}}
{{- with $result := resources.GetRemote $url -}}
{{- with $result.Err -}}
{{- warnf "%s" . -}}{{- . -}}
{{- else -}}
{{- $title := "" -}}
{{- $description := "" -}}
{{- $image := "" -}}
{{- with $head := index (findRE `<head>(.|\n)*?</head>` $result.Content) 0 -}}
{{- range $meta := findRE `<meta.*?>` $head -}}
{{- $name := replaceRE `<.*name=\"(.*?)\".*>` "$1" $meta -}}
{{- $property := replaceRE `<.*property=\"(.*?)\".*>` "$1" $meta -}}
{{- $content := replaceRE `<.*content=\"(.*?)\".*>` "$1" $meta -}}
{{- if eq $property "og:title" -}}
{{- $title = $content -}}
{{- else if eq $property "og:description" -}}
{{- $description = $content -}}
{{- else if eq $property "og:image" -}}
{{- $image = $content -}}
{{- end -}}
{{- if and (eq $description "") (eq $name "description") -}}
{{- $description = $content -}}
{{- end -}}
{{- end -}}
{{- if eq $title "" -}}
{{- with index (findRE `<title>(.*?)</title>` $head) 0 -}}
{{- $title = replaceRE `<title>(.*?)</title>` "$1" . -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- $thumbnail_url := "" -}}
{{- with $image -}}
{{- with $thumbnail := resources.GetRemote $image -}}
{{- with $thumbnail.Err -}}
{{- warnf "%s" . -}}{{- . -}}
{{- else -}}
{{- $thumbnail_url = $thumbnail.RelPermalink -}}
{{- end -}}
{{- end -}}
{{- end -}}
<div style="margin-top: 10px;">
<a href="{{- $url -}}" style="padding: 12px;border: solid 1px #eee;display: flex;text-decoration: none;color: #000;" onMouseOver="this.style.opacity='0.9'">
<div style="flex-shrink: 0;">
<img src="{{ with $thumbnail_url }}{{- . -}}{{- else -}}/noimage.png{{- end -}}" alt="" width="100" height="100" style="object-fit: contain;" />
</div>
<div style="margin-left: 10px;">
<h2 style="margin: 0;padding-bottom: 13px;border: none;font-size: 16px;">
{{- $title -}}
</h2>
<p style="margin: 0;font-size: 13px;word-break: break-word;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">
{{- $description | plainify | safeHTML -}}
</p>
</div>
</a>
</div>
{{- end -}}
{{- end -}}
参考
Related contents

TECH
2020.02.02
HugoでAMP対応のブログカードを作る

TECH
2022.09.03
【Hugo】Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する

TECH
2022.08.14
GitHub PagesからCloudflare Pagesへの移行

TECH
2022.06.29
AMP Service WorkerでPrefetch Linksを実現する

TECH
2023.02.03
Hugo v0.109.0でパンくずリストをシンプルに実装する

TECH
2021.02.11
Git pre-commitフックでFrontmatterの「更新日時」を自動更新する

TECH
2021.01.24
「Hugoで始める静的サイト構築入門 静的サイトジェネレーターで作る自作サイト」を出版しました

TECH
2021.01.09
GitHub Actionsのスケジューラ実行を利用して定期的にビルドする