Reveal.js：是否有一种从数据文件开始在演示文稿中插入字符串的本机方法？

问题描述

假设我有一个 JSON（或其他数据文件），如下所示：

{% load filters %}
...
{% var_exists 'project' as project_exists %}
{% if project_exists %}
  ...
{% endif}

想象一下我想在我的一张幻灯片中放入类似的东西

{"foo": 42,"bar": "less interesting data"}

拥有

<!-- .slide: data-file="./input.json" -->

## The number is ${.foo}

My example test

有办法吗？有没有 ## The number is 42 My example test 的例子？

谢谢

解决方法

从 JSON 中获取值并放入 HTML

要从 javascript 获取 JSON，您可以发送 XML 请求，然后通过 javascript 将数据放入幻灯片：

<section id="slide1">The Number is 0</section>
<script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
        document.getElementById("slide1").innerHTML = "The number is " + data.foo;
      }
    };
    xmlhttp.open("POST","input.json",true);
    xmlhttp.send();
</script>

如果您只想将 foo 值放入幻灯片的一部分，您可以在幻灯片中创建一个 <span></span> 元素并更改 id 属性：

<section>
    <span id="slide1">The number is 0</span><br>
    My example test
</section>

:)