hugo でスライド作成

@snowcrush

hugo のSectionリスト表示を使う

Section List

# Hugoのソースファイルのディレクトリ構造
HUGO_ROOT/content/section/.../content1.md
HUGO_ROOT/content/section/.../content2.md

=> このとき、https://yourdomain/section/ を表示するとsectionに含まれるページのリストが表示される

Section Listのレイアウトは実は自由に変えられる

layouts/_default/list.html

• デフォルトのテンプレートでは見出しを表示するが、各ページの内容を全部表示するように変更
• Hugo のヘルパーメソッドでsection内の各ページの内容を取り出す
• 取り出した各コンテンツはsectionタグで囲む（後述）

      {{ range .Data.Pages.ByTitle }}
        <section>
          {{ .Content }}
        </section>
      {{ end }}

記法はgo-template

reveal.js

HTMLとjsでスライドを作るためのツール

https://github.com/hakimel/reveal.js/

reveal.jsのHTML

sectionタグで囲まれた部分が一枚のスライドに相当する

<div class="reveal">
  <div class="slides">
    <section>
      ここにスライド一枚分の内容をHTMLで入れると
      いい感じにスライド表示に変換してくれる
    </section>
    <section>二枚目</section>
    <section>...</section>
  </div>
</div>
<script>Reveal.initialize();</script>

つまり、

• section以下のHTMLページ1ページが、スライド一枚に相当する
• 各ページをセクションリスト・ページで結合することで一ページのHTMLにする
• 結合したHTMLをreveal.jsでいい感じのスライドに変換する

上記の仕組みを、HugoのThemeとして組み込むことで、Hugoでスライドを作ることが出来る！

sample

https://github.com/minoritea/hugo-revealjs-generator