使用来自 javascript 的液体 'include' 标签

Question

我正在尝试为我的基于 jekyll 的网站实施搜索，我遵循了 this 实施。一切正常，但是，当我 return 搜索结果时，我想在首页上使用 post 预览的模板，该模板存储在我的 jekyll 的 _includes/ 文件夹中设置。在液体中，它会像

{% for post in search_results %}
{% include post-preview.html %}
{% endfor %}

但是，搜索结果 html 字符串是在 javascript 中构造的，据我所知，您不能在其中使用液体标签。有什么简单的解决方法吗？

Answer 1

自从我问了这个问题后，我发现了一种有点老套的方法，所以我会把它放在这里以备不时之需。

所以，为了加载模板文件，我使用了 ajax:

  var xhReq = new XMLHttpRequest();
  xhReq.open("GET", 'post-preview.html', false);
  xhReq.send(null);
  var template = xhReq.responseText;

现在，在此之后，变量模板保存文本文件 post-preview.html 的内容，看起来像这样：

<div class="post-preview">
  <div class="post-title">
    <div class="post-name">
      <a href="{{ post.url }}">{{ post.title }}</a>
    </div>
    <div class="post-date">
      {% include time.html %}
    </div>
  </div>

  <div class="post-snippet">
    {% if post.content contains '
    <!--break-->' %} {{ post.content | split:'
    <!--break-->' | first }}
    <div class="post-readmore">
      <a href="{{ post.url }}">read more-></a>
    </div>
    {% endif %}
  </div>
  {% include post-meta.html %}
</div>

现在我们的工作是用 javascript 替换对 post.url 之类的液体调用。这对于 post.url 和 post.title 来说很容易，我们可以使用 javascript 中字符串的 .replace 方法来处理。但是，对于拆分 post 内容以便在预览中只能显示一个片段的代码，它会更加复杂。

所以，至少对我来说，似乎我们需要编写 javascript 代码来做同样的事情。由于本练习的全部目的是不必在两个地方（post-preview.html 文件和 search.js 文件）保留相同的 html 代码，因此似乎我们需要一些自动方法来删除液体代码并注入 javascript。我已经针对（部分）这种效果提出了一个问题 here。

使用来自 javascript 的液体 'include' 标签

Use liquid 'include' tag from javascript

javascript

liquid

jekyll