これはなに
TRPGのログを公開するためにHugoで静的サイトを作ることにしたのですが、HTMLファイルをいい感じに表示する方法がググってもなかなか見付からなかったので備忘録がわりにこの記事を残しておきます。
結論としては埋め込んでみるに書いたHTMLファイルを埋め込むやり方が一番良さそうでした。
環境
- Hugo: v0.92.0
- theme: hugo-book(https://github.com/alex-shpak/hugo-book)
- OS: Windows11
config.tomlはhugo new siteしたときのままいじっていない。
contentディレクトリ内にHTMLファイルを置いてみる
contentディレクトリ内の適当な位置にhtmlファイルを置いたら読み込んでくれた。（今回はcontent/logsディレクトリ内に配置）
……とりあえず表示するだけならばこれで良いのだが、やっぱりテーマが適用されてないのは統一感に欠けるしなんか寂しい。
埋め込んでみる
HugoのShortcodesを利用してHTMLファイルをmarkdownファイルに埋め込んでみる。
layouts/shortcodes/embedLOG.htmlに以下の記述をした。
{{ $baseurl:= .Page.Site.BaseURL }}
<iframe {{with .Get "src"}}src="{{ $baseurl }}/logs/{{ . }}"{{ end }} width="100%" height="300em" frameborder="0">
</iframe>
（base urlの取得はhttp://staff.feedtailor.jp/2016/06/15/hugo_09/ を参考にした）
そしてhugo new logs/logembedtestでmarkdownファイルを作成。以下のようにする。
---
title: "Logembedtest"
date: 2022-02-14T22:43:58+09:00
draft: false
---
test
{{<embedLOG src="testlog.html">}}
testlog.htmlファイルの位置：
content/
└ logs/
└ logembedtest.md
└ testlog.html
実行結果はこんなかんじ（実際の卓のログ使って確認したのでモザイクをかけてます）。
課題
見てくれがよろしくない。
iframe使って埋め込んでるので仕方ないのだがページ中にもう一つ別のページがあるというのは想像以上に見てくれが悪い。iframe要素の高さを埋め込み対象の高さに合わせたい。
課題の解決
このサイト（↑）を参考にembedLOG.htmlを変更したら、うまくいった。埋め込み対象のファイルに手を加える必要がないのがとてもありがたい。
実行結果はこんなかんじ：
スクリプトは上記サイトのものをほぼコピペ（とくに理由はないがidをmyframeに変更している）。それに合わせてHTML部分を若干変更。width属性の値は<style>タグの内部で指定した（widthの値は先程と変わらず100%）。
{{ $baseurl:= .Page.Site.BaseURL }}
<iframe id="myframe" {{with .Get "src"}}src="{{ $baseurl }}/logs/{{ . }}"{{ end }} frameborder="0" scrolling="no">
</iframe>
ちなみに、コピペそのままだと子ページの一番下の部分が見切れる（scrolling="no"が原因と思われる）ので、子ページの高さにぴったり合わせるのではなく100px余分に表示されるよう指定している。
注意
scrolling属性およびframeborder属性はHTML5で廃止されています。
CSSでの代用が推奨されています。