HugoとPaperModでブログカードを実装する
ブログカードって何? 「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。 実際にはこんな感じです。 時間が溶ける C++、Python、TypeScriptをよく使います。取り留めのない内容を振り返れるように残します。 ZennやQiitaではリンクを貼り付けると自動で作ってくれますが、 Hugoにはその機能はありません。 Hugoで実装を考える 今回はこちらのサイトを参考にさせていただきました。 HugoにはShortCodeという仕組みが用意されています。 PaperModではTwitterやYouTubeなど簡単に埋め込めるよう、用意されています。 このShortCodeは自分で拡張することも可能なので、この仕組みを使ってブログカードを実装するのが良さそうです。 実装手順 layouts/shortcodes にbolog-card.html を作る $ mkdir -p layouts/shortcodes $ touch layouts/shortcodes/blog-card.html blog-card.htmlの中身 {{- $url := (.Get 0) -}} {{- with $result := resources.GetRemote $url -}} {{- with $result.Err -}} {{- warnf "%s" . -}}{{- . -}} {{- else -}} {{- $title := "" -}} {{- $description := "" -}} {{- $image := "" -}} {{- with $findHead := index (findRE "<head>(....