How to handle Angolia template code inside Hugo HTML?

support
1

I’m trying to integrate an Angolia instant search page into a Hugo site. Angolia code uses {{braces format}} so how do I retain this in my outputted HTML?

Here’s a sample of the Angolia code…

<script type="text/html" id="hit-template">
  <div class="hit">
    <div class="hit-image">
      <img src="{{image}}" alt="{{name}}">
    </div>
    <div class="hit-content">
      <h3 class="hit-price">${{price}}</h3>
      <h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
      <p class="hit-description">{{{_highlightResult.description.value}}}</p>
    </div>
  </div>
</script>
2

I think something like <img src="{{ safeHTML "{{image}}" }}" alt="{{ safeHTML "{{name}}" }}"> should work.

You may be able to wrap the whole thing in a single safeHTML call, if that’s your preference… not sure about the line breaks, though.

3

Thanks for the reply @jetwash. I had tried safeHTML and it outputs an odd result for me. It outputs the second safeHTML value as desired but not the first safeHTML value. This is what I see in the source code after Hugo build…

<img src="%7b%7bimage%7d%7d" alt="{{name}}">

4

Hm, here, too… That’s weird. I wonder what would cause that. Anyways,

{{ safeHTML "<img src=\"{{image}}\" alt=\"{{name}}\">" }}

Works as expected… It’s ugly, but at least it works.

1 Like
5

Much appreciated @jetwash…

6

@STQOE You don’t have to use Mustache templating with Algolia. You can use functions, too. See the instantseach template documentation here: (see the example) https://community.algolia.com/instantsearch.js/documentation/#templates

Alternatively, you can put your Algolia code outside of Hugo (i.e. in a js file in the static folder) and load that on your page.

Hope that’s helpful!

1 Like
7

@budparr you’re a genius! That is super helpful. And thanks for helping out in Hugoland like you do too.

It’s taken me some time to get Algolia working locally — since my last post in this forum infact! I’ve used the Algolia “Index Simplified” example and hacked it to suit my data and HTML. So the HTML block is reasonably sized and certainly beyond me to turn into a JS file. Is there any other way to import it? As raw HTML somehow?

<script type="text/html" id="hit-template">
  <div class="hit">
    <div class="description body-text hit-content">
        <h1 class="heading hit-name">{{{_highlightResult.name.value}}}</h1>
        <div class="header-description">
            <p class="uppercase">
              <strong>
                <span class="hit-country uppercase">{{{_highlightResult.country.value}}}</span>, <span class="hit-state">{{{_highlightResult.state.value}}}</span>
              </strong>
            </p>
            <p class="hit-location"><strong>
              <span class="hit-location">{{location}}</span>,
              <span class="hit-suburb">{{{_highlightResult.suburb.value}}}</span>,
              <span class="hit-postcode">{{{_highlightResult.postcode.value}}}</span>.
              Time: <span class="hit-time">{{time}}</span></strong></p>
            <p class="">{{description}}</p>
            <p><a class="hit-url" href="{{url}}" target="_blank">More details about this event &rarr;</a></p>
        </div>
    </div>

    <br><hr><br>
  </div>
</script>


<script type="text/html" id="no-results-template">
  <div id="no-results-message">
    <p>There are no <em>"{{query}}"</em> events yet.<br>
    More events are being added so check again soon.</p>
    <a href="." class='clear-all'>Clear search</a>
  </div>
</script>