在 "index.html" 中使用 Nunjucks 功能时出现问题

Question

我正在尝试使用 Nunjucks（客户端）作为我项目的模板组件。我在服务器上使用 xampp、apache。

问题是当我将 "nunjucks code" 放入 index.html 时，它不会编译它。如果我输入 "{% include "sidebar.html" %}" 它只会在 DOM.

中呈现

我可以在 DOM 加载后使用渲染方法，在我的模板中，一切正常。

index.html（不起作用）：

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <!-- Meta, title, CSS, favicons, etc. -->
      ...
     <body>
        ...
        {% include "sidebar.html" %} // This gets rendered literally
        ...
     </body>
     ...

所以，基本上我想知道是否可以在由 apache 提供服务的第一页中使用 nunjucks 功能（在本例中，index.html）。

提前致谢。

Answer 1

试一试

// index.html
<html lang="en">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src = "/js/vendors/nunjucks.min.js"></script>
  <script>
  window.addEventListener('load', function () {
    nunjucks.render('index.njk', {some-data}, (err, html) => body.innerHTML = err && err.message || html);
  });
  </script>
  <body>
  <!-- Empty body -->
  </body>
</html>

// index.njk
{% include "sidebar.njk" %}
...

Answer 2

我找到了一个 hacky 解决方法，我 "add another layer of htmls".

所以，在index.html中，我有这个代码：

$(document).ready( function() {
  nunjucks.configure('./includes', { autoescape: true });
    nunjucks.render('dashboard_main.html', {}, function(err, res) {
      $("#main_content").html(res)
    });
  });

然后，dashboard_main.html可以有nunjucks代码。

在 "index.html" 中使用 Nunjucks 功能时出现问题

Problem using Nunjucks functionalities in "index.html"

javascript

nunjucks