# How to handle Angolia template code inside Hugo HTML?

**URL:** <https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252>\
**Category:** support\
**Created:** [September 4, 2017, 4:27am UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252 "2017-09-04T04:27:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![STQOE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stqoe/32/3292_2.png) [@STQOE](https://discourse.gohugo.io/u/STQOE)\
**Post date:** [September 4, 2017, 4:27am UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252/1 "2017-09-04T04:27:47Z")

</div>

I’m trying to integrate an [Angolia instant search page](https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/) 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](https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/#snippet_html)…

```
<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>
```

---

<div class="post-metadata">

**Author:** ![jetwash](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jetwash/32/3968_2.png) [@jetwash](https://discourse.gohugo.io/u/jetwash)\
**Post date:** [September 4, 2017, 4:42am UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252/2 "2017-09-04T04:42:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![STQOE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stqoe/32/3292_2.png) [@STQOE](https://discourse.gohugo.io/u/STQOE)\
**Post date:** [September 4, 2017, 4:51am UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252/3 "2017-09-04T04:51:57Z")

</div>

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}}">`

---

<div class="post-metadata">

**Author:** ![jetwash](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jetwash/32/3968_2.png) [@jetwash](https://discourse.gohugo.io/u/jetwash)\
**Post date:** [September 4, 2017, 4:58am UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252/4 "2017-09-04T04:58:21Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![STQOE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stqoe/32/3292_2.png) [@STQOE](https://discourse.gohugo.io/u/STQOE)\
**Post date:** [September 4, 2017, 5:10am UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252/5 "2017-09-04T05:10:24Z")

</div>

Much appreciated @jetwash…

---

<div class="post-metadata">

**Author:** ![budparr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/budparr/32/749_2.png) [@budparr](https://discourse.gohugo.io/u/budparr)\
**Post date:** [September 4, 2017, 1:32pm UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252/6 "2017-09-04T13:32:33Z")

</div>

@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](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!

---

<div class="post-metadata">

**Author:** ![STQOE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stqoe/32/3292_2.png) [@STQOE](https://discourse.gohugo.io/u/STQOE)\
**Post date:** [September 8, 2017, 6:56am UTC](https://discourse.gohugo.io/t/how-to-handle-angolia-template-code-inside-hugo-html/8252/7 "2017-09-08T06:56:51Z")

</div>

@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>
```