Question

是否可以在执行特定脚本之前等待Jinja2完成所有模板元素的插入？我正在尝试在页面上使用KaTeX渲染一些数学运算，该页面还包含许多模板块。但是，数学是在Jinja2渲染所有模板块之前渲染的，因此在所述块中的任何数学都不会渲染。

我可以设置一个5秒的超时时间，然后执行渲染脚本（此工程），但是我宁愿使用一个更优雅的解决方案。按照here的指示在defer标记内使用<script>无效，

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // ...options...
        });
    });
</script>

event告诉浏览器诸如Jinja2之类的模板引擎已完成工作的是什么？基于上述情况，肯定不是DOMContentLoaded。

编辑

Here是使用A+ LMS实现的示例课程。麻烦的模板可以在文件夹_templates中找到。默认模板使用MathJax，但是由于该特定库具有一些烦人的功能，例如在呈现大量数学运算时速度非常慢，因此我决定改用KaTeX。这是我的模板版本：

{% extends "aplus/layout.html" %}

{% block extrahead %}

<!--  MathJax (LaTex math)
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" data-aplus></script>
 -->

<!--  KaTeX (LaTeX math) -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous" data-aplus>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"  onload="console.log('Hello, this is KaTeX!');" data-aplus></script>
  <script data-aplus>
    function render_katex() {
      if (window.katex) {
          renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
          );
        console.log("Math rendered.");
      } else {
        console.log("KaTeX not loaded.")
      };
    };
  </script>

<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="setTimeout(render_katex,300);" data-aplus></script>


<!-- Custom course styles -->
<link rel="stylesheet"
      href="{{ pathto('_static/course.css', 1) }}"
      type="text/css"
      data-aplus />

<link rel="stylesheet"
      href="{{ pathto('_static/active_element.css', 1) }}"
      type="text/css"
      data-aplus />

{% endblock %}

编辑2

A link到Pastebin上页面的完整来源。

Answer 1

好的，因此我得出的结论是，最好的选择是仅等待模板通过Jinja2。应该等待多长时间？好吧，这取决于一个页面上有多少个练习：

<!--  KaTeX (LaTeX math) -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous" data-aplus>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"  onload="console.log('Hello, this is KaTeX!');" data-aplus></script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" data-aplus></script>

<script data-aplus>
  document.addEventListener("DOMContentLoaded", function() {

    const n_of_exercises = $(".exercise").length;
    // Using "let" here so that math would render also the first time a page is loaded
    const ms = 300;
    const render_time = n_of_exercises * ms;
    const minimum_render_time = 1200;

    if (render_time >= minimum_render_time) {

      setTimeout(function() {
        renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
        );
      }, render_time);

    } else {

      setTimeout(function() {
        renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
        );
      }, minimum_render_time);

    };

    console.log("Number of .exercise divs:" + n_of_exercises);
    console.log("Render time:" + render_time);


  });
</script>

事实证明，无论页面上有多少练习，事情发生的时间仍然最少。这就是为什么指定了minimum_render_time的原因。仅在此特定页面上对此进行了测试，因此将来可能需要稍微移动一下值。

等待Jinja完全完成页面渲染，然后再执行脚本

编辑

编辑2

1 个答案: