逆引きマニュアル: Hugoテンプレート: スライドを作成する方法

投稿日: 更新日:

やりたいこと

Hugoを使ってスライドを作成する方法です。

このページにつけてたのですが廃止しました。

前提条件

以下で確認しています。

  • Hugo 0.31
  • reveal.js 3.5.0

手順

Custom Output Formatsを使います。

  • テンプレートを作成
  • config.tomlにスライドの設定を追加
  • 出力したHTMLをreveal.jsで解釈できるようにするためのJavaScript

reveal.jsはMarkdownをそのまま解釈する機能がありますが、 その機能は使いません1。理由は、Hugoのshortcodeが使えなくなるからです。

テンプレート

テーマディレクトリ以下のlayouts/_default/以下に single.slide.htmlというファイルを作成します。

面倒なのでそのまま載せちゃいます。

  • link-css<link>を作成、link-script<script>を作成します。
  • タイトルは<h1>で囲んでください。1ページ目に使われます。
<html>
  {{ "<!-- _default/single.slide.html start -->" | safeHTML }}
  <head>
    <meta charset="utf-8" />
    {{ partialCached "link-css" "reveal/css/reveal.css" "reveal.css" }}
    {{ partialCached "link-css" "reveal/css/theme/white.css" "white.css" }}
    {{ partialCached "link-css" "css/reveal-custom.css" "reveal-custom.css" }}
    {{ with .OutputFormats.Get "html" -}}
    <base href="{{ .Permalink }}" />
    {{- end }}
    <title>{{ .Title }}</title>
  </head>
  <body>
    <div id="contents">
      {{ .Content }}
    </div>
    <div class="reveal">
      <div class="slides">
        <section><h1>{{ .Title }}</h1></section>
      </div>
    </div>
    {{ partialCached "link-script" "js/reveal.js" "reveal-custom.js" }}
    {{ partialCached "link-script" "reveal/js/reveal.js" "reveal.js" }}
    <script>
      Reveal.initialize();
    </script>
  </body>
  {{ "<!-- _default/single.slide.html end -->" | safeHTML }}
</html>

config.toml

outputFormatsの定義と、outputsの定義(SLIDEを追加)が必要です。

[outputFormats.slide]
name = "SLIDE"
mediaType = "text/html"
path = "slide"
isHTML = true

[outputs]
page = ["HTML", "SLIDE", "ATOM", "PDF"]

JavaScript

reveal.jsにinitialize()というメソッドを定義しています。 生のJavaScriptで書いたので長いですが、要はh1h6およびhrを区切りとして、 sectionで囲んでいるだけです。


  1. 試したけどしっくり来なかった。 [return]

マニュアル