Data variable (with html tag as its value) gives no output

support
1

Problem

I am using Bootstrap and Font Awesome in my project. I created a popover with content as the data variable. By clicking on button(that triggers popover), popover launches but has no content.

How to reproduce the problem

  1. Create a new Hugo site and add following files with content as given:

data/icons.yml contains:

windows: "<span class='fab fa-windows'></span>"

layouts/index.html contains:

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Font Awesome stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<!-- Scripts required for Bootstrap framework -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<!-- A popover with Windows icon as its content -->
<a role="button" class="btn" tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" data-original-title="Tablet" data-content="
 <span class='fa-2x'>{{ site.Data.icons.windows | safeHTML }}</span> 
">Tablet</a>

<!-- Enable popovers -->
<script>
$("[data-toggle='popover']").popover();
</script>
  1. Now, run hugo serve.

Actual output

It may easily be noted that by clicking on Tablet, popover launches but has no content.

Expected output

The popover should show the Windows icon.

Possible cause

I have found out that I am calling <span class='fa-2x'>{{ site.Data.icons.windows | safeHTML }}</span> in quotes (of data-content), so that it renders nothing. If <span class='fa-2x'>{{ site.Data.icons.windows | safeHTML }}</span> is called not in quotes, then it renders Windows icon. But that is not how it needs to be. :frowning_face:

Please help!

2

You’re trying to use Bootstrap to trigger a Popper.js pop-over effect and you’re able to trigger the pop-over dialog but you’re not able to see any content inside the dialog. If that’s correct, have you tried replacing the value of the content data attribute with a string or function as described in the Bootstrap documentation? Also, have you tried including the required util.js?

3

@balibebas Thanks for quick reply. The problem is highly likely related to Hugo and not Bootstrap or Font Awesome. Let me explain.

Follow the steps

  1. Create a new Hugo site and add following files with content as given:

data/icons.yml contains:

windows: "<span class='fab fa-windows'></span>"

layouts/index.html contains:

<!-- Just an HTML tag (no relation with bootstrap) -->
<a great="
<span class='fa-2x'>{{ site.Data.icons.windows | safeHTML }}</span> 
">Tablet</a>
  1. Now, run hugo
  2. Go to public/ and open index.html with a text editor; it contains:
<a great="
  <span class='fa-2x'></span> 
">Tablet</a>

It should’ve contained:

<a great="
  <span class='fa-2x'><span class='fab fa-windows'></span></span> 
">Tablet</a>

This might mean that it is the data variable which is {{ site.Data.icons.windows | safeHTML }}) not being rendered.

Thoughts?

4

The HTML syntax in your provided samples is wrong.

The opening <a> tag needs to be closed before the <span> like so:

<a class="whatever" anotherATTR="whatever">
<span class="whatever">
{{ <== Hugo Code ==> }}
</span>
Some Text
</a>
5

If you pipe to safeHTMLAttr instead of safeHTML (or if you simply remove the pipe altogether) the missing markup will appear in the generated markup. The output will be escaped like:

<span class='fa-2x'>&lt;span class=&#39;fab fa-windows&#39;&gt;&lt;/span&gt;</span>

And the Font Awesome icon defined in your data file will appear:

Screen Shot 2019-12-09 at 12.10.26
Screen Shot 2019-12-09 at 12.10.26716×500 12.6 KB

6

@alexandros Thanks for your response. But, I have used Bootstrap popovers and I have to use HTML tags as value of data-content attribute so that Font Awesome icons are displayed correctly.

@balibebas Thanks. It worked! Wonder why my eye didn’t catch it on the Hugo Docs website.