slides.gohtml

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{.Title}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="/reveal.js/dist/reveal.css">

  {{/* theme: https://revealjs.com/themes/  */}}
  <link rel="stylesheet" href="/reveal.js/dist/theme/{{.Theme}}.css">
</head>
<body>
<div class="reveal">
  <div class="slides">
    <section data-markdown="{{.MDPath}}" {{/* test.md */}}
             data-separator="^\n---\n"
             data-separator-vertical="^\n----\n"

      {{/* plugin */}}
             data-separator-notes="^Note:"
    >
    </section>
  </div>
</div>

<script src="/reveal.js/dist/reveal.js"></script>

{{/* 👇 reveal.js Plugin */}}
<script src="/reveal.js/plugin/markdown/markdown.js"></script>
<script src="/reveal.js/plugin/notes/notes.js"></script>
<script src="/reveal.js/plugin/search/search.js"></script>
<script src="/reveal.js/plugin/zoom/zoom.js"></script>

<link rel="stylesheet" href="/reveal.js/plugin/highlight/monokai.css"/>
<script src="/reveal.js/plugin/highlight/highlight.js"></script>

{{/* 👇 slides Plugin */}}
<link rel="stylesheet" href="/slides/plugin/guessEx/guessEx.css"/>

{{/* 👇 Customize Plugin */}}

<script type="module">
  {{/* slides Plugin */}}
  import SlidesGuessEx from "/slides/plugin/guessEx/guessEx.mjs"
  import SlidesGuess from "/slides/plugin/guess/guess.mjs"
  import {Spotlight} from "/slides/plugin/spotlight/spotlight.js"
  import Marker from "/slides/plugin/marker/marker.mjs"
  // Marker.config.solidPenLineWidth.val = 50 // 如果要改相關設定可以這樣

  {{/* Customize Plugin */}}
  // import YourPlugin from "/plugin/.../.mjs"

  // https://revealjs.com/config/
  const optional = {
    // 調整投影片的尺寸: https://revealjs.com/presentation-size/
    // width: 960, // 1920
    // height: 700, // 1080
    // margin: 0.04,
    // minScale: 0.2,
    // maxScale: 2.0,

    // pdf列印，省略中途的fragment，直接顯示該頁最終結果 https://revealjs.com/pdf-export/#separate-pages-for-fragments
    // pdfSeparateFragments: false,

    showNotes: {{.ShowNotes}},

    // Optional
    plugins: [
      RevealMarkdown,
      RevealNotes,
      RevealHighlight,
      RevealSearch, // CTRL+Shift+F
      RevealZoom, // Alt+click; CTRL+click in Linux

      SlidesGuessEx,
      SlidesGuess.init(5, 1),
      Spotlight,
      Marker.init(),
    ],
    /*
    // dependencies 如果有，那麼裡面的內容不能為空，否則會遇到錯誤: Unrecognized plugin format
    dependencies: [
      {
        // src: "/plugin/spotlight.js" // https://github.com/denniskniep/reveal.js-plugin-spotlight // 可用但效果不好
      }
    ],
    */

    slideNumber: true,

    // 下面都是預設值，其實可以不需要寫，只是為了更加清楚，所以新增它
    jumpToSlide: true,
  }

  {{if gt (len .View) 0 }}
    // Overview <kbd>O</kbd會不能使用
    // Activate the scroll view
    optional["view"] = {{.View}}

    // Force the scrollbar to remain visible
    optional["scrollProgress"] = 'true'
  {{end}}

  {{if gt .AutoSlide 0 }}
    // autoSlide: https://revealjs.com/auto-slide/
    // 需要啟用之後, 使用data-autoslide=""的項目才會生效, 會先跑完預設再跑接續設定的時間
    optional["autoSlide"] = {{.AutoSlide}}
    // optional["loop"] = true // 垂直模式下會再回到一開始
  {{end}}

  Reveal.initialize(optional)

  // Reveal.initialize(optional) 對於每一個plugin的動作相當如下
  // Reveal.addEventListener('ready', SlidesGuessEx().init())
</script>
</body>
</html>