Aboutなどに書いてあるがこのブログはHugoを用いて、いわゆるSSGの手法で構築されている。
セキュリティなどの面での安心感とサーバー管理不要のメンテコスト、金銭コストなどメリットが多いので気に入っている。

今回ちょっと思うところがありテーマを変更したのだが、前々からreveal.jsで作成したスライドをどこかにホストして公開する仕組みがほしいと思っていたので、テーマをカスタマイズして機能追加してみました。
なお、ひとまず完成したは良いが、肝心のスライドは探しても見つからなかった。(何個か作った記憶あるんだけど…)

reveal-hugo などすでに専用のテーマはあるがHugoを複数管理するのはめんどうなので同梱させたかった。

修正内容

やったこととしてはこのような感じで独自のレイアウトテンプレートをいくつか追加しただけでOKでした。
本当はJSファイルも一つ追加しましたが、それは割愛。

$ tree layouts 
layouts
├── partials
│   └── extended_footer.html
└── slide
    ├── _markup
    │   └── render-heading.html
    ├── list.html
    └── single.html

4 directories, 5 files

この中で重要なものは layouts/slide/single.html と layouts/slide/_markup/render-heading.html です。

single.htmlはこんな感じで、必要なライブラリを読み込んでスライドになるメインコンテンツを吐き出しているだけ。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Language" content="{{ .Site.Language.Lang }}" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <meta name="application-name" content="{{ .Site.Title }}" />

  <title>{{ .Site.Title }}</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reset.min.css" integrity="sha512-Mjxkx+r7O/OLQeKeIBCQ2yspG1P5muhAtv/J+p2/aPnSenciZWm5Wlnt+NOUNA4SHbnBIE/R2ic0ZBiCXdQNUg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reveal.min.css" integrity="sha512-A5PKBHoJQHdKjxpwyV+VhMsK7L3MMV1Ch2++rS0bn3xX8+5qJb3WpPvwJH1eqb6iMRtotfiOO7Jhl1qQ02Rwuw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/theme/moon.min.css" integrity="sha512-mzpbI+YpB+bIH9gpH3cBq4u5+YvyAikkgAR4SODr5ZpzBZZtLddurEa5LoJRqRfVc6IUfqj6klr0e9KJjUtKHw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/highlight/monokai.min.css" integrity="sha512-z8wQkuDRFwCBfoj7KOiu1MECaRVoXx6rZQWL21x0BsVVH7JkqCp1Otf39qve6CrCycOOL5o9vgfII5Smds23rg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>

  <div class="reveal">
    <div class="slides">
      <section>
        <h1>{{ .Page.Title }}</h1>
{{ .Content }}
      </section>
    </div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reveal.min.js" integrity="sha512-uQGK5PLqAxTaCXSpiQXLYo93HzIRCBUek4jab5gDky9RN621pYpOh1oSxfmG301wW6OU4s8Bk0JDfi77JMZRuQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/highlight/highlight.min.js" integrity="sha512-PrMZUaiqYqRQyi4D71cIxqg/nyiclXEBLlR6A76tQP81iq6vrz9DBa+vLkn2efw3ECfYbKH1G+uLLpq6ZZ4dLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/markdown/markdown.min.js" integrity="sha512-ik0i3CQNgrNfRPUyZGlVqKGpxWR//UV0Y+4y6FHeHvaX/T/TM2nLyjCDQr6Nl/VZrNF8zjkiQ/YL0bsT9GsbVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/markdown/markdown.min.js" integrity="sha512-ik0i3CQNgrNfRPUyZGlVqKGpxWR//UV0Y+4y6FHeHvaX/T/TM2nLyjCDQr6Nl/VZrNF8zjkiQ/YL0bsT9GsbVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="application/javascript" src='{{ relURL "start-reveal.js" }}'></script>

</body>
</html>

コンテンツはMarkdownで書いているのだが、HugoによってHTMLに変換されて吐き出されている。
そのままMarkdownを吐き出させる方法が見つかれば reveal.js 側のMarkdownプラグインを導入して食わせるだけだったのが、そのような方法は見つけられなかった。(あっても面倒そうだった。)

reveal.jsのHTML解釈ではsectionタグによってスライドの1ページを認識する仕様になっているのだが、HugoのHTML変換はsectionタグを吐き出す仕様になっていないため、このままでは上手くスライドを表示できない。
そこでひと工夫をして以下の layouts/slide/_markup/render-heading.html を作成し、無理やりsectionタグを吐き出すようにした。

{{ if eq .Level 1 }}
</section>
<section>
{{ end }}
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
<a href="#{{ .Anchor }}" class="h-anchor" aria-hidden="true"></a>
</h1>

_markupディレクトリ配下には定められたいくつかの名前のファイルを置くことで、対応するタグの変換結果を変更することが可能になっている。
この仕組みを用いてh1タグの場合のみsectionタグを吐き出すようにしている。

弊害

上記のような都合上、reveal.jsのMarkdownプラグインで改ページ指定として使われている --- のhrタグ相当の記法が利用できず、h1タグによって改ページが行われる仕様になってしまっている。
気持ち悪いが、まあそんなに面倒ではないはず…