Hugoを使った小説同人サイトの運営 小説の目録ページ

tech 1351字：読了まで約2分30秒

Hugo アイキャッチ画像

当サイトではHugoを使った個人サイトの作り方として制作ログを作ってきましたが、運営するうちに目次ページなどももっと小説サイトらしく使いやすくしたい！　と思うようになりました。今回は目録ページについてです。

完成イメージ

このような完成形をイメージしています。

小説の目録ページ完成形[hugo-noveltoc.png(276917byte)]

枠で囲ってあるあたりが小説サイトにほしい機能かと思います。

今回はこれらの機能をショートコードで作っていこうと思います！

タイトルから小説個別ページへリンク

Hugoで記事を指定したらタイトルも表示されるshortcodeを作った #Hugo - Qiita を参考にして、タイトルから小説の個別ページに飛べるようにしてみたいと思います。

このサイトでは目録本体は定義リストで表現するようにしているので、ほぼ上の記事を丸取りしました。<dl class=“novelnav”>の開始タグと終了タグは目次ページのマークダウンにベタ書きします。

layouts/shortcodes/postlink.html
 1{{ $post_number := index .Params "id" }}
 2{{ $description := index .Params "description" }}
 3
 4<dt>
 5<a href='./novel/{{ $post_number }}/'>{{ with .Site.GetPage $post_number }}{{ .Title }}</a>
 6</dt>
 7<dd class="novelsummary">
 8{{ if $description }}{{ $description }}
 9{{ else }}
10{{ .Description }}
11{{ end }}
12</dd>

簡単な説明またはあらすじ

目録ページのみの個別説明を書きたい場合、目録ページからショートコードを{{< postlink id=“seiya01-1” description=“オリジナルBLファンタジー小説。祈月清矢と櫻庭詠、十一歳の出会い編。はじめての獣化”>}}のように書いて、名前付きパラメータを渡します。（参考：Hugo で独自のショートコードを作成する - まくまく Hugo ノート）それがない場合は、それぞれの小説ページのページ変数にある説明文を返すようになっています。

分類タグ

分類タグを表示したい場合は以下のようになります。

layouts/shortcodes/postlink.html
1<dd class="noveltags">
2{{- if .Params.tags }}
3{{ with .Params.tags }}{{ range . }}
4 <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="tags tag-{{ . }}"><i class="fa-solid fa-tag"></i>{{ . }}</a>{{ end }}{{ end }}
5{{ end }}
6</dd>

ここで、tag-R18など特定のタグだけにbackground-color: #ff4060;などのCSSを当ててやると、特定タグのみの色分けができます。個々のマークダウンでしっかり設定している場合はそのまま表示されると思います。

おおまかな字数、投稿日時

layouts/shortcodes/postlink.html
1<dd class="novelinfo"><span class="wordcount">{{ .WordCount }}字</span> <time>{{ .PublishDate }}</time></dd>{{ end }}

単純にページ変数（参考：ページ変数 · Go & Hugo ドキュメント v5.3）を呼び出しているだけです。ほかにもジャンルを書いたカテゴリなどを表示させることができるかと思います。

完成shortcode

layouts/shortcodes/postlink.html
 1{{ $post_number := index .Params "id" }}
 2{{ $description := index .Params "description" }}
 3
 4<dt>
 5<a href='./novel/{{ $post_number }}/'>{{ with .Site.GetPage $post_number }}{{ .Title }}</a>
 6</dt>
 7<dd class="novelsummary">{{ if $description }}{{ $description }}{{ else }}{{ .Description }}{{ end }}</dd>
 8<dd class="noveltags">{{- if .Params.tags }}{{ with .Params.tags }}{{ range . }} <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="tags tag-{{ . }}"><i class="fa-solid fa-tag"></i>{{ . }}</a>{{ end }}{{ end }}{{- end }}
 9</dd>
10<dd class="novelinfo"><span class="wordcount">{{ .WordCount }}字</span> <time>{{ .PublishDate }}</time></dd>{{- end }}

これを目録ページから呼び出します。

content/original/_index.md
1<!--記事の名前がseiya01-1の時-->
2<dl class="novelnav">
3{{< postlink id="seiya01-1" description="オリジナルBLファンタジー小説。祈月清矢と櫻庭詠、十一歳の出会い編。はじめての獣化" >}}
4</dl>

あとはCSSなどで装飾をすれば完成イメージのような表示になると思います！

関連記事