スライド機能をHugoに追加する

スライド機能を
Hugoに追加する

背景

記事投稿サービスを用いて記事を書いていた

サービスが終了する
フォーマットを強制される
自由度が少ない

静的サイトジェネレーターで
セルフホスティングすることにした
(Hugoを使うことにした)

Hugo

静的サイトジェネレーター
Goで実装されている
静的ページの生成が速い
ThemeにはHugo-PaperModを使用することにした

モチベーション

今まで書いた記事の大部分は
セルフホスティングしたサイトに取り込めた
スライドはスライド表示できなくて取り込めない

スライドも取り込みたい

Webブラウザでスライドとして表示できれば
今まで作成したスライドも取り込める

Webブラウザでスライドとして
表示できるものはある

reveal.js

HTMLで記述されたものをスライドとして表示する
JavaScriptで実装されている
Markdownなどのフォーマットにも対応している

Hugoが出力するHTMLなどでreveal.jsを読み込み
利用できる形式のテキストを出力できれば
Hugoにスライド機能を組み込める

HugoのThemeを
カスタマイズする

baseof.htmlテンプレートで表示するブロックを分岐

        
          {{- if (eq .Params.REVEALJS "true") }}
             {{- block "slide" . }}{{ end }}
          {{- else }}
             
                 {{- block "main" . }}{{ end }}
             
          {{- end }}

reveal.jsはbodyの下に.revealクラス属性の要素がないとスライドとして認識できなかった。

single.htmlテンプレートに
スライド用のブロックを追加

        
          {{- define "slide" }}
            {{ .Content }}
          {{- end }}

single.htmlは各単一ページの出力に使われる

reveal.jsを使用する場合は
いくつかのcssとjsを読み込み
Reveal.initialize()を実行する必要がある

single.htmlテンプレート内の{{ .Content }}を
挟みこむような形で必要な処理を行う

          
{{- define "slide" }}
  (1) スタイルシートの読み込み

  {{ .Content }}

  (2) JavaScriptの読み込み
  (3) reveal.jsの初期化
{{- end }}

(1)(2)(3)については↓に記述

(1) スタイルシートの読み込み

          
<link rel="stylesheet" href="/static/dist/reset.css">
<link rel="stylesheet" href="/static/dist/reveal.css">
<link rel="stylesheet" href="/static/dist/theme/league.css">
<link rel="stylesheet" href="/static/plugin/highlight/monokai.css">

(2) JavaScriptの読み込み

          
<script src="/static/dist/reveal.js"></script>
<script src="/static/plugin/notes/notes.js"></script>
<script src="/static/plugin/markdown/markdown.js"></script>
<script src="/static/plugin/highlight/highlight.js"></script>

(3) reveal.jsの初期化

          
<script>
  Reveal.initialize({
      hash: true,
      plugins: [
        RevealMarkdown,
        RevealHighlight,
        RevealNotes
      ]
  });
</script>

reveal.jsを用いるかを
ページ属性で指定

        
          #+REVEALJS: true

この例ではorg-modeを使用している

スライド自体は

        
#+begin_export html
<div class="reveal">
  <div class="slides">
    <section>
    ....
  </div>
 <div>
#+end_export

この例ではorg-modeを使用している

その他ヘッダーやフッターを調整

完成

まとめ

Hugoで生成しているサイトに
スライドを取り込みたかった。
HugoのThemeをカスタマイズし
スライドを表示できるようになった。
スライドの表示にはreveal.jsを利用した。

{{- if (eq .Params.REVEALJS "true") }} {{- block "slide" . }}{{ end }} {{- else }} {{- block "main" . }}{{ end }} {{- end }}

<link rel="stylesheet" href="/static/dist/reset.css"> <link rel="stylesheet" href="/static/dist/reveal.css"> <link rel="stylesheet" href="/static/dist/theme/league.css"> <link rel="stylesheet" href="/static/plugin/highlight/monokai.css">

<script src="/static/dist/reveal.js"></script> <script src="/static/plugin/notes/notes.js"></script> <script src="/static/plugin/markdown/markdown.js"></script> <script src="/static/plugin/highlight/highlight.js"></script>