Fatal编程技术网
  • markdown/
  • Markdown 显示中的多个标记文件选择

Markdown 显示中的多个标记文件选择

markdown

Markdown 显示中的多个标记文件选择,markdown,reveal.js,Markdown,Reveal.js,我正在使用Reveal.js进行讲座。在运行时加载外部标记文件非常有效。有没有办法设置一个master index.html文件，让我选择加载哪个外部文件？我想的是一个目录，但每个主题都是一个单独的标记文件。我怀疑javascript是实现这一点的方法，但尽管我能够（不是专家）使用HTML和CSS，但我无法编写一行javascript（我可以复制、粘贴和加载） 谷歌不是我的朋友。这也困扰着我，所以我决定看看是否可以通过谷歌搜索和拼接来解决这个问题 基本的Reveal.jsdiv如下所示： <

我正在使用Reveal.js进行讲座。在运行时加载外部标记文件非常有效。有没有办法设置一个master index.html文件，让我选择加载哪个外部文件？我想的是一个目录，但每个主题都是一个单独的标记文件。我怀疑javascript是实现这一点的方法，但尽管我能够（不是专家）使用HTML和CSS，但我无法编写一行javascript（我可以复制、粘贴和加载）

谷歌不是我的朋友。

这也困扰着我，所以我决定看看是否可以通过谷歌搜索和拼接来解决这个问题

基本的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>
加载页面时，会出现一个小警报/提示，输入完整文件名（相对于web服务器根）。若您像我一样，使用
python-m'SimpleHTTPServer
在目录中直接运行本地Web服务器和所有幻灯片，那个么这还不算太糟糕

复杂方式（文件选择器对话框） 简单的方法是一个很好的开始，但是它没有完全图形化的选择器那么方便。幸运的是，事实证明我们也能做到。这里最困难的部分是，我们必须在页面完全加载和呈现后运行文件选择器，这意味着我们必须做一些事情，使discover.js的状态与DOM保持一致。API中有一个
sync（）
方法，它应该对这种情况很有用，但由于某些原因，它在这里不起作用。相反，我们延迟discover.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>


函数选择文件（evt）{
//文件选择器实际上返回一个列表
//（如果启用了多项选择）
file=evt.target.files[0]。名称；
document.getElementById（“presentation”）.setAttribute（“数据标记”，文件）；
//现在该开始了！
延迟_init（）；
//删除文件选择器按钮
fileSelector=document.getElementById（“外部的”md“）；
fileSelector.parentNode.removeChild（fileSelector）；
}
document.getElementById（'external_md'）。addEventListener（'change'，selectFile，false）；
//我们必须包装init函数来延迟它并使其生效
//以后调用更容易，无需移动大块代码
函数延迟_init（）{
//此处提供的配置选项的完整列表：
// https://github.com/hakimel/reveal.js#configuration
显示。初始化({
. . . 
});
}
这是三个变化领域： 1.添加
元素以驱动文件选择器。 2.中间有额外的JavaScript。 3.用一个伪函数包装对
leave.initialize（）
的调用以延迟初始化

所有这些在当前版本的Reveal.js（
9cf7de54b8f
）中都起到了作用。请注意，我将所有的leaver.js内容保存在子文件夹
leaver.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>