Django& algolia - 使用hogan + {%verbatim%}标签

时间:2018-02-12 17:39:41

标签: javascript django algolia django-1.11 hogan.js

我希望这不是一个不太模糊的问题 - 我正在将Algolia搜索平台集成到我的一个项目中,以便能够无缝地,毫不费力地搜索yadda yadda。基本上,我正在为Algolia的#hit-template元素中的商业目录的优质和低位寻找混合布局...在逐字内使用{%if%}并不是很有效...所以显然我不理解/缺少一些东西。它可能纯粹是在javascript中我需要编辑某些东西吗?不确定!什么是{%verbatim%}?不确定?!我可以在type =“text / template”的脚本中混合使用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 %}

1 个答案:

答案 0 :(得分:0)

{% verbatim %}强制Django不解释模板文件中的{}个字符,因此{% if %}{% endif %}无法在逐字标记。您仍然可以使用逐字标记的外部的Django模板语法,并且只使用{% verbatim %},您希望Django忽略{}(即在您的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了解不多,无法指导您进一步了解具体细节。