これも私を悩ませていたので、Googleで検索して、これを自分のやり方でつなぎ合わせることができるかどうかを確認することにしました.
基本的な Reveal.jsdiv
は次のようになります。
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-markdown="somefile" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:">
</section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
. . .
});
</script>
</body>
シンプルな方法 (ファイル名全体を手動で入力)
JavaScript を使用data-markdown
して要素内のフィールドなど、属性を動的に設定できます。<section>
ここには 2 つの小さな問題があります。要素が作成された後、Reveal.js が完全な初期化を行う前に行う必要があります。そうしないと、DOM の状態と Reveal.js の内部状態が一致しなくなります。これは簡単です (変更されたセクションのみを表示します)。
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section id="presentation" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:">
</section>
<script type="text/javascript">
document.getElementById("presentation").setAttribute("data-markdown",prompt("Filename:","default-filename.md"));
</script>
ページをロードすると、完全なファイル名を入力する小さなアラート/プロンプトが表示されます (Web サーバーのルートに関連する)。私のようにpython -m'SimpleHTTPServer
、すべてのスライドを含むディレクトリでローカル Web サーバーを直接実行している場合、これはそれほど悪くはありません。
複雑な方法 (ファイル選択ダイアログ)
単純な方法は良い出発点ですが、完全にグラフィカルなセレクターほど便利ではありません。幸いなことに、私たちにもそれができることがわかりました。ここで難しいのは、ページが完全に読み込まれてレンダリングされた後にファイル チューザーを実行する必要があることです。つまり、Reveal.js の状態を DOM に戻すために何かをする必要があります。sync()
API には、まさにそのような状況で役立つはずのメソッドがありますが、何らかの理由でここでは機能しません。代わりに、外部 Markdown ファイルを設定するまで、Reveal.js の完全な初期化を遅らせます。
<body>
<!-- Choose file button -->
<input type="file" id="external_md" name="markdown" >
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section id="presentation" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:">
</section>
<script type="text/javascript">
function selectFile(evt) {
// the file chooser actually returns a list
// (in case you enabled multiple selection)
file = evt.target.files[0].name;
document.getElementById("presentation").setAttribute("data-markdown",file);
// now it's time to init!
delayed_init();
// remove file selector button
fileSelector = document.getElementById("external_md");
fileSelector.parentNode.removeChild(fileSelector);
}
document.getElementById('external_md').addEventListener('change',selectFile,false);
</script>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
// we have to wrap the init function both to delay it and to make it
// easier to call later, all without moving big blocks of code around
function delayed_init(){
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
. . .
});
}
</script>
</body>
それが 3 つの変更点です。 1.<input>
ファイル チューザーを駆動する要素の追加。2. 真ん中に追加の Javascript。3. への呼び出しをReveal.initialize()
ダミー関数でラップして、初期化を遅らせます。
これはすべて、Reveal.js ( 9cf7de54b8f
) の現在のリリースで機能しました。すべての Reveal.js をサブフォルダーに保存しているreveal.js
ため、上記のパスを適宜調整する必要がある場合があることに注意してください。