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

Question

我正在尝试为我的基于 jekyll 的网站实现搜索，我关注了 this执行。一切正常，但是，当我返回搜索结果时，我想使用首页上的帖子预览模板，该模板存储在我的 jekyll 设置的 _includes/文件夹中。在液体中，它会像

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

但是，搜索结果 html 字符串是用 javascript 构建的，我猜你不能使用 Liquid 标签。有什么简单的方法可以解决这个问题吗？

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 方法来处理它们。然而，对于代码来说，它更复杂，例如分割帖子内容以便在预览中只能显示一个片段的代码。

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