使用hogan + {% Verbatim%}标记的Django & algolia条件语句

Question

我希望这不是一个太模糊的问题-我正在将Algolia搜索平台集成到我的一个项目中，以便能够无缝和轻松地搜索yadda yadda。本质上，我正在寻找Algolia的#hit-template元素中业务目录的高级和低位置的混合布局……在verbatim中使用{% if %}并不完全work...so，显然有一些我不理解/遗漏的东西。我是否需要在javascript中编辑某些东西？不确定！什么是{% Verbatim%} ?？不确定？！我可以在type=“文本/模板”的脚本中混合使用javascript和html吗？

{% verbatim %}
    <script id="hit-template" type="text/template">
      {% if _highlightResult.is_premium %}
      <div class="card text-center mb-3">
        <div class="crop-height bg-image-card card-header" style="background-image: url('{{ MEDIA_URL }}{{ get_image_url }}'); height: 160px !important;"></div>
        <div class="card-header" style="color: #fff !important; background-color: {{ brand_colour }} !important; font-size: 1.3rem;">
          {{{ _highlightResult.name.value }}}
        </div>
        <div class="card-body">
          <p class="card-text" style="color: {{ business.brand_colour }} !important;"><a href="https://www.google.co.uk/maps/search/{{ google_maps_location }}" style="color: {{ brand_colour }};"><i class="fas fa-map-marker fa-2x" data-fa-transform="down-6"></i></a></p>
          <p class="card-text"><small>{{ get_full_address }}</small></p>
          <p class="card-text p-2">{{ description }}</p>
          <a href="{{ absolute_url }}" class="btn btn-primary" style="background-color: {{ brand_colour }} !important; border-color: {{ brand_colour }} !important; color: #fff;">Visit Website</a>
        </div>
        <div class="card-footer text-muted">
          <small>
            <i class="fas fa-envelope" data-fa-transform="shrink-2"></i> {{ email }}
            <i class="fas fa-phone" data-fa-transform="shrink-2"></i> {{ telephone }}</small></div>
        <div style="display: none;">{{{ _highlightResult.sector.value }}}</div>
      </div>
      {% else %}
      {% endif %}
    </script>
  {% endverbatim %}

Answer 1

{% verbatim %}强制Django不解释模板文件中的{和}字符，因此{% if %}和{% endif %}不能在逐字标记中工作。您仍然可以在逐字标记之外使用Django模板语法，并且只在您希望Django忽略{}的地方使用{% verbatim %} (即在您的Javascript语法中)。

当混合使用不同的模板语法时，可能很难解决包含特殊字符(如{ )的歧义。解释器引擎无法解析您的意图。这里的一个解决方案是使用Django来存储Javascript变量所需的变量，并对它们使用hogan.js。

<script>
    window.MEDIA_URL = {{ MEDIA_URL }}
    window.image_url = {{ get_image_url }}
</script>
{% if _highlightResult.is_premium %}
{% verbatim %}
    <script id="hit-template" type="text/template">
        // your Hogan.js stuff here, using `window` variables from Django stored as JS variables...
        // Django will no longer interpret `{` and `}`, only Hogan.js will
    </script>
{% endverbatim %}
{% endif %}

我对Hogan.js的了解还不够多，无法指导您进一步了解细节。