简单方法（手动输入整个文件名）

Question

我正在使用Reveal.js进行演讲。它可以很好地在运行时加载外部markdown文件。有没有办法设置一个主index.html文件，允许我选择要加载的外部文件？我想到的就像一个目录，但每个主题都是一个单独的降价文件。我怀疑javascript会是这样做的方式，但是虽然我有能力（不专家）使用HTML和CSS，但我不能写一行javascript（我可以复制，粘贴和加载）。

Google不是我的朋友。

Answer 1

这也让我烦恼，所以我决定看看我是否可以通过谷歌搜索并拼凑我的方式。

基本的Reveal.js div如下所示：

<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>字段。这里有两个小问题：我们必须在创建元素之后执行它，但在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直接在包含所有幻灯片的目录中运行本地网络服务器，那么这不是太糟糕。

复杂方式（文件选择器对话框）

简单的方法是一个很好的开始，但它不如完全图形选择器那么方便。幸运的是，事实证明我们也可以做到这一点。这里的难点在于我们必须在页面完全加载和渲染后运行文件选择器，这意味着我们必须做一些事情来让Reveal.js的状态用DOM备份。 API中有一个sync()方法，它应该对这种情况很有用，但由于某些原因它在这里不起作用。相反，我们会延迟Reveal.js的完全初始化，直到我们设置外部Markdown文件：

<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>

这是三个变化领域： 1.添加<input>元素以驱动文件选择器。 2.中间额外的Javascript。 3.使用虚函数包含对Reveal.initialize()的调用以延迟初始化。

所有这一切都适用于我当前发布的Reveal.js（9cf7de54b8f）。请注意，我将所有Reveal.js内容保存在子文件夹reveal.js中，因此您可能需要相应地调整上面的路径。

显示中的多个Markdown文件选择

1 个答案:

简单方法（手动输入整个文件名）

复杂方式（文件选择器对话框）