I’m using Hugo v0.162.1.
This is an interesting one. I’m getting different outputs in development vs production for a specific feature of my site and I can’t figure out what is causing this behavior. I have ~600 blog posts using the same code which all look and work correctly, it’s only this one that’s a problem.
The development version is the one that looks correct. I know in production quotes are stripped unless it’s necessary but I enabled quotes and it made no difference, the output still looks off.
I’ve included the exact output and a screenshot. I’ll explain more after showing you these examples.
Production output (incorrect):
<div class=post-quick-jump><strong>Quick Jump:</strong><nav id=TableOfContents><ul><li><ul><li><a href=#histfile>HISTFILE</a></li><li><a href=#histsize--savehist>HISTSIZE / SAVEHIST</a></li><li><a href=#extended_history>EXTENDED_HISTORY</a></li><li><a href=#inc_append_history_time>INC_APPEND_HISTORY_TIME</a></li><li><a href=#hist_ignore_all_dups>HIST_IGNORE_ALL_DUPS</a></li><li><a href=#hist_ignore_space>HIST_IGNORE_SPACE</a></li><li><a href=#hist_reduce_blanks>HIST_REDUCE_BLANKS</a></li><li><a href=#demo-video>Demo Video</a></li></ul></li></ul></nav></div>
Development output (correct):
<div class="post-quick-jump">
<strong>Quick Jump:</strong>
<nav id="TableOfContents">
<ul>
<li>
<ul>
<li><a href="#histfile">HISTFILE</a></li>
<li><a href="#histsize--savehist">HISTSIZE / SAVEHIST</a></li>
<li><a href="#extended_history">EXTENDED_HISTORY</a></li>
<li><a href="#inc_append_history_time">INC_APPEND_HISTORY_TIME</a></li>
<li><a href="#hist_ignore_all_dups">HIST_IGNORE_ALL_DUPS</a></li>
<li><a href="#hist_ignore_space">HIST_IGNORE_SPACE</a></li>
<li><a href="#hist_reduce_blanks">HIST_REDUCE_BLANKS</a></li>
<li><a href="#demo-video">Demo Video</a></li>
</ul>
</li>
</ul>
</nav>
</div>
That quick jump loops over all H3 elements to create clickable links that jump to that section of the post. The Markdown looks like this for each of those headers:
### HISTFILE
There’s no trailing spaces, line breaks or special characters. I have plenty of other headers with / in it and it’s fine. I tried escaping it and even using - instead but it made no difference, it did the same thing.
Is there some type of keyword in these headers that conflicts with Hugo, but only when building a production version of your site?
The quick jump gets output with:
{{ if .Params.toc | default true }}
{{ if ne .TableOfContents "<nav id=\"TableOfContents\"></nav>" }}
<div class="post-quick-jump">
<strong>Quick Jump:</strong>
{{ .TableOfContents }}
</div>
{{ end }}
{{ end }}
The CSS is:
.post-quick-jump {
font-size: 16px;
margin-bottom: 25px;
padding: 10px;
background-color: #e0f5ff; }
.post-quick-jump a,
.post-quick-jump a:hover,
.post-quick-jump a:visited,
.post-quick-jump a:active,
.post-quick-jump a:focus {
text-decoration: underline;
color: #2774c8; }
#TableOfContents {
display: inline;
padding-bottom: 0;
}
#TableOfContents ul {
display: inline;
padding-left: 1px;
padding-bottom: 0;
}
#TableOfContents li {
display: inline;
margin-right: 8px;
list-style-type: none;
}
#TableOfContents li:not(:last-child) {
margin-right: 7px;
padding-right: 10px;
border-right: 1px solid #85bdfa;
}
