Putting tags into post list layout breaks the layout

support
1

I’m working on my theme’s post list layout but getting nowhere.
Here’s the layout code:

{{ define "main" }}
  <div class="post-list-container">
    {{ if in (slice "Posts" "Projects") .Title }}
      <h1>All {{ .Title }}</h1>
    {{ else }}
      <h1>Pages in “{{ .Title }}”</h1>
    {{ end }}

    <section class="post-list">
      {{ range .Pages }}
        {{ $title := replace .Title "-" "–" }}
        {{ $postLink := .RelPermalink }}
        {{ $datetime := time.Format "2006-01-02T15:04:05-0700" .Date }}
        {{ $dateFormatted := .Date | time.Format ":date_long" }}

        <a class="post" href="{{ $postLink }}">
          {{ with .GetTerms "tags" }}
            <ul class="post-tags line">
              {{ range . }}
                {{ $tagLink := .RelPermalink }}
                <li><a class="tag" href="{{ $tagLink }}">{{ .LinkTitle }}</a></li>
              {{ end }}
            </ul>
          {{ end }}
          <h2>{{ $title }}</h1>
          <time datetime="{{ $datetime }}">{{ $dateFormatted }}</time>
        </a>
      {{ end }}
    </section>
  </div>
{{ end }}

and here’s what hugo makes of it:

image
image1100×658 111 KB

Needless to say, this makes no sense. The second <a class="post"> element is closed prematurely, destroying the layout, then duplicated a bunch for good measure.

Is this user error (and if so, how) or is hugo currently broken? I’m using v0.114, installed via brew: hugo v0.114.0+extended darwin/arm64 BuildDate=unknown

2

No. That is what your browser makes of it.

You are using your browser’s web tools to view the source. But your browser does not show you the source. It shows you what it has done in an attempt to correct the source.

The HTML that you are generating is invalid.

View the page in your browser, then view source using Ctrl + U. Then copy and paste to https://validator.w3.org/nu/#textarea and validate your HTML.

You’ve got nested anchor tags, mismatched opening/closing tags, etc.

2 Likes
3

You can’t have a link inside a link.

4

Nor is the closing tag for <h2> an </h1>. The html is borken