Day22：Blowfishテーマのarticle ShortCodeと外部ページへのリンクを使ってShortCodeを自作せずにイイ感じに外部リンクを表示する

本記事の概要

Blowfishテーマ組み込みのatricle ShortCodeと、外部ページへのリンク方法について説明する入門的記事です。

前提

Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)

article ShortCodeについて

Blowfishに組み込まれたShortCodeであり、自分のサイト内の他ページをブログカードのように表示することが出来ます。
つまり、ある記事から他の記事をいい感じに表示できます。

article ShortCodeの使用方法

{{< article link="/contact/" >}}

linkという形で、baseURLを基準とした相対アドレスでリンク先を記載します。
上記の例では、baseURL/contact/の記事へのリンクを生成します。
平たく言えば、実際のURLからbaseURLを取り除いたような形ですが、/から始まることに注意してください。

先頭が/から始まっていないと正しく機能しません。

例えば、下記のように表示されます。
記事のサムネイルなどが表示され、ブログカードの様な見た目になります。

外部リンク機能

Blowfishには下記の公式サイトの記載のように外部サイトにジャンプする記事を作成する機能があります。
本来の使い方としては、外部の(例:Qiitaなど)で書いた記事を自分のサイトの記事一覧として表示するために使用します。
記事一覧で、当該の記事をクリックすると、Qiitaなどの外部サイトにジャンプできるという形です。

外部サイトにジャンプする記事を作成するためには、下記のようにコマンドを打ってmdファイルを作成すればよいです。

外部サイトにジャンプする記事を作成する

hugo new -k external sns/x/index.md

通常のhugo new コマンドに、 -k externalが追加されていることに注意してください。
これを使うことで、blowfishテーマ側で、外部サイトにジャンプするためのFrontMatter項目が追記されたmdファイルを生成します。

実際にやってみると下記のようになります。

content/sns/x/index.mdのFrontMatter

---
title: "X"
date: 2025-12-24T08:32:26+09:00
externalUrl: ""
summary: ""
showReadingTime: false
_build:
  render: "false"
  list: "local"
---

「---」となっているため、tomlではなく、yaml形式で生成されることに注意してください。

書き換えてみる

Blowfishテーマの問題なのか、_buildという古いパラメーターが使われています。
(注：この記事ではHugo v0.153.0を使用しています)
下記を参考に、現在使用されているbuildに変更するのと、externalURLに対してジャンプ先のURLを設定してみましょう。

ジャンプ先のURLを設定してみる

---
title: "X"
date: 2025-12-24T08:32:26+09:00
externalUrl: "https://x.com/dokokanoradio"
summary: ""
showReadingTime: false
build:
  render: link
---

変更点としては下記になります。

• externalURLに対象のURLを設定
• _buildからbuildに変更(Hugo側が_buildからbuildに変更されたため)
• renderをlinkに変更(""は不要)
• listを削除(デフォルトのalways相当の設定)

他の記事からarticle ShortCodeを使用してみる

他の記事からArticle ShortCodeを呼び出してみましょう。
生成されたarticleをクリックすることで、外部サイト(上記例ではX)にジャンプできます。

article ShortCodeの使用方法

{{< article link="/sns/x/" >}}

(上記とほぼ同様なので画像は省略します)

補足

実際に書き換えて試すと分かりますが、renderをlinkにするのには理由があります。
renderをデフォルトのalwaysにすると、baseURL/sns/x/にアクセスする時、意図しない記事が表示されるためです。
renderをlinkにすると、baseURL/sns/x/にアクセスすると意図通り404エラーになります。

また、listオプションに対してlocalとしてしまうと、外部からarticleShortCodeで参照できないので、デフォルト値(always)にしています。
逆に言えば、外部からarticle ShortCodeで参照せず、親ページのリストに表示されていれば良いだけならば、localとすれば良いです。

実験する際は、publicフォルダにファイルが残った状態だと意図しない結果になるので、一度publicフォルダを削除してからビルドしなおした方が良いです。

サムネイルを設定する

Xの外部リンク記事に対してもサムネイルが設定できますので、それを利用すると、より美しい見た目になります。
blowfishテーマでは、ページリソースとしてfeature*.jpgなどといったファイル名で配置すると自動的にサムネイルとして認識します。

まとめ

外部サイトにジャンプする記事とarticle shortcodeを利用することで、ShortCodeを自作せずとも、外部サイトへのリンクを美しく表示することが出来ます。
欠点を挙げるとすれば、上記で言えば、snsページが勝手に作られることなどがありますが、イイ感じに表示できる外部サイトへのリンクをお手軽にできます。

上記の欠点を解消したければ、ShortCodeを自作して、画像リソースを参照してリンクを表示するような形にした方が良いです。

もっと言うのであれば、Cloudfrare functionsなどでキャッシュ機能を実装し、外部サイトのOGP画像などを表示することもできますが、そこまでやると完全な静的サイトから外れてしまいますし、ある程度のスキルが要求されることになるので、自分のスキルやメリット・デメリットなどを勘案したうえで選ぶのが理想的だと思います。