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

投稿日: 2017-12-13 更新日: 2018-07-24

Hugo

やりたいこと

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

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

前提条件

以下で確認しています。

Hugo 0.31
reveal.js 3.5.0

手順

Custom Output Formatsを使います。

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

reveal.jsはMarkdownをそのまま解釈する機能がありますが、その機能は使いません¹。理由は、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で書いたので長いですが、要はh1〜h6およびhrを区切りとして、 sectionで囲んでいるだけです。

試したけどしっくり来なかった。 ↩︎

マニュアル

Hugo