hugoのショートコード（shortcode）でリンク先のタイトルを自動取得する

• Hugo

このブログはhugoを使って作成しています。

Hugoの何がいいかと言われれば、一番は静的なので軽いってところです。

ReactやVueでちょっとSPA作ろうとすると、すぐもっさりした動作になっちゃう＆コンポーネント管理が大変なので、僕にはHugoが結構刺さっています。

（まぁコンポーネント管理に関してはアトミックデザインで作ろうとした僕の自業自得なんですが。。）

Hugoをいろいろいじりつつ、最近の記事でも早速Hugoを活用してSEO対策などを行っていました。

その中で、ShortCodeという機能がプログラマーの僕としてはワクワクが止まらない機能だったので、ちょっと作りたいものもあったのでついでに使いつつここで紹介します。

ShortCodeとは

markdownファイルから、関数などを組み込んだテンプレートHTMLを呼び出せる機能です。

デフォルトでは以下のようなshortcodeが用意されています。（詳細はこちら）

• figure
• gist
• highlight
• param
• ref (relref)
• instagram
• tweet
• vimeo
• youtube

youtubeを表示したい場合、shortcodeを使って動画のIDを引数として渡してあげれば簡単に実装できます。

{{< youtube w7Ft2ymGmfc >}}

これ以外にも自分でshortcodeを作成して、組み込むことも可能です。

shortcodeで使われる構文はGo Templateというみたいです。

参考：

Go Template、最高のプログラミング言語 - Qiita

URLからタイトルを取得したaタグを生成するshortcode

では本題です。

（前提として、Hugoのサイトはすでに用意してあるものとします。）

まずはshortcodeの実装のためのディレクトリとHTMLファイルを準備します。

mkdir layouts/shortcodes
touch layouts/shortcodes/url_title.html

ファイルの準備ができたら、以下のようなコードを実装します。

resources.GetRemoteを使用してリンク先のコンテンツを取得し、titleタグと組み合わせてaタグを生成するshortcodeです。

早速使ってみましょう。

{{< url_title url=“https://gohugo.io/hugo-pipes/introduction/#get-resource-with-resourcesget-and-resourcesgetremote" >}}

↓

Hugo Pipes | Hugo

表示されました！！！！やったね！！！

感想

めっちゃ簡単に使えて面白い機能、それがshortcode。

今後も活用していきたいです。