[Hugo] サイト内リンクで別記事のタイトルとリンクを自動出力するショートコード

更新: 2024-01-26 (金) 投稿: 2023-12-15 (金)

別記事へのクロスリファレンスのリンクを貼りたい場合、標準の shortcode の ref だと、URL が取得できます。しかし、記事タイトルは自分で入力する必要があります。記事タイトルとリンクの両方を自動出力する shortcode を作成する方法です。

環境

Hugo 0.121.1

結果

layouts/shortcodes/link-corss-ref.html を作成します。

{{- $path := .Get 0 -}}
{{- with .Site.GetPage $path -}}
<a title="{{ .Title }}" href="{{ .Permalink }}">{{ .LinkTitle | default .Title }}</a>
{{- else -}}
  <!-- Page not found: {{ $path }} -->
  {{ errorf }}
{{- end -}}

各記事のマークダウンで以下のように使用します。

{{< link-corss-ref "/post/xxx/index.md" >}} へのリンクです。

説明

標準の shortcode の ref のメリットは、該当の記事が見つからない場合にビルドエラーとなります。

{{ ref "/post/xxx/index.md" }}

今回作成した shortcode は、該当の記事が見つからない場合に、エラーを出力してくれます。
エラーとなった場所が分かるようにエラーページを表示したかったので、何でも良いのですが {{ errorf }} を使用してエラーを意図的に発生させています。

{{- $path := .Get 0 -}}
{{- with .Site.GetPage $path -}}
  <!-- ページが見つかった場合 -->
{{- else -}}
  <!-- ページが見つからない場合は、意図的にエラーを発生させる -->
  {{ errorf }}
{{- end -}}

感謝

同じ課題

参考

更新履歴

2024/01/26
- パス指定を /post/xxx/ から /post/xxx/index.md に修正

Hugo Hugo

更新: 2024-01-26 (金) 投稿: 2023-12-15 (金)