Hugo で外部のサイトの JSON を取得する

どうも、たくチャレ(@takuchalle)です。

Hugoを使って生成しているこのブログのリンクを Twitter Card みたいにかっこよく表示させたいと思い、その下調べをしてみました。

こういうサムネイルみたいな感じですね。

そのためにはリンク先のメタ情報を見て、OGP 情報を取ってくる必要があります。 先ほどのサイトですと、この部分ですね。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="プログラマになりたい人生">
<meta property="og:url" content="https://blog.takuchalle.me/post/2018/05/07/emacs_symbol_highlight/">
<meta property="og:title" content="Emacs で同じシンボルをハイライトする - プログラマになりたい人生">
<meta property="og:description" content="highlight-symbol を使って Emacs で同じシンボルをハイライトする">
<meta property="og:image" content="https://blog.takuchalle.me/images/thumb/emacs.jpg">

しかし、Hugoにはそんな機能はありません。調べてみるとぴーさんがそれっぽいことをしていたので参考にしました。 Data-Driven Content 機能を使えば JSON を記事生成時に取得することはできそうなので、手元で試してみました。1

基本的に公式サイトの方法をすれば問題なくできるのですが少しハマったので、同じようにハマる人がいないように残しておきます。

Markdown ファイルには書けない!

公式サイトにあるように Gist の一覧を取得するようなコードを書いて試してみましたが、全然表示されない…と困っていました。

<ul>
  {{ $urlPre := "https://api.github.com" }}
  {{ $gistJ := getJSON $urlPre "/users/takuyaohashi/gists" }}
  {{ range first 5 $gistJ }}
    {{ if .public }}
      <li><a href="{{ .html_url }}" target="_blank">{{ .description }}</a></li>
    {{ end }}
  {{ end }}
</ul>

20分くらいずっと悩んでたんですけど、どうやら*.mdではなく*.htmlに書くようでした… なのでlayoutsディレクトリ以下の HTML ファイルに JSON 取得するコードを書いてください…ショートコードとして書いて*.mdから呼び出すのが良いと思います。

僕のアホみたいなミスを晒すことでみんながミスらないといいな、と思いこの記事を書きました。

参考サイト


  1. 別途 JSON サーバが必要なので後日書きます。

同じカテゴリの記事