4

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

谷歌不是我的朋友。

4

1 回答 1

3

这也困扰着我，所以我决定看看我是否可以通过谷歌搜索并拼接我的方式。

基本的 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>这里有两个小问题：我们必须在创建元素之后，但在 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中，因此您可能需要相应地调整上面的路径。

于 2013-10-09T21:38:51.080 回答