Are specific elements of Bootstrap incompatible with Go templating?

support
1

Hello everyone,

{{ range .Site.Pages }}
        <li>{{ .Title }}</li>
{{ end }}

gives me a list of all pages on the site I am building.

I tried to use this code when testing Bootstrap. I used the navbar-default example and included my code just above the first dropdown entry:

(...)
<ul class="dropdown-menu">
    {{ range .Site.Pages }}
       <li>{{ .Title }}</li>
    {{ end }}
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
(...)

This does not work: the dropdown is rendered correctly, with all its elements, but it is as if the iteration over the pages was ignored. In other words, whethe my extra code is present or not, the result is the same.

Is there a reason why this does not work?

2

If the sample you included was exactly what you tried, this is correct behavior. bootstrap.css specifies .dropdown-menu > li > a to style the entries in the menu, and you have no link. Try:

<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>

-j

3

Thank you, I tried to add a link per your example but there were no changes.

The code I mentioned in my question was indeed exactly what i tired, and you are correct - there must be a link (I dived into bootstrap.css to understand how this works).

4

I’m sorry, I can’t duplicate the problem. I cut-and-pasted the same example into my homepage, added a range block with the correct LI/A structure inside of it, and it worked fine (Bootstrap 3.3.7, Hugo 0.20.7). The only difference is that I used a single section’s pages (.Site.Sections.archive.Pages), because my main section is too big to fit in a menu. :slightly_smiling:

Without seeing the exact template and HTML output, it’s not possible to figure out why it works for me and not for you.

-j

5

Thank you @jgreely for following up.

I built a minimal example (no partials, pure HTML in single.html with the Bootstrap nav bar and a “hello world” line below).
It worked. :confused:

I will have to debug why my nav (which is a partial BTW) does not get updated. I tried the usual cash cleaning, incognito mode, forced refresh to ensure that the code I am seeing is the one in the editor but no changes.
I will update this question if I find a brilliant solution :slightly_smiling:

6

OK found it. I was using {{ partial "nav.html" }} instead of {{ partial "nav.html" . }} and the partial could not access the variable (maybe it would be worthwhile to log a warning in that case?).

This is clearly documented.