Hi there
I’m sorta struggling right now. I’m trying to create a section, which represents the “latest” blog post. This has worked so far, however, when adding an a-tag enclosing the article-tag to link to the post, something’s really messing everything up.
In the following, you can see my code I’ve written so far.
{{- range first 1 .Pages -}}
<a href="{{.RelPermalink}}">
<article class="group cursor-pointer">
<div class="flex h-96">
<figure class="image flex-none mt-1 w-full aspect-video overflow-hidden rounded-3xl">
<img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="">
</figure>
<div class="inner pl-10 pt-1">
<small>{{ .Date | time.Format ":date_long" }}</small>
<h1 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h1>
<p class="lead">{{ .Summary }}</p>
<div class="flex flex-wrap content-start">
{{ range $name := .Params.tags }}
{{ with $.Site.GetPage (printf "/tags/%s" $name) }}
<a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
</article>
</a>
{{- end -}}
When running the site either with hugo server -w or the compiled site and started it within an nginx docker-container, the finished site looks like the following in the dev-tools:
I would expect, that the a-tag is only encasing the article tag, as written in the code, which in the dev-tools is clearly not the case. If it wouldn’t mess up my styling, I probably would’nt have noticed it.
I have checked my code and there is nothing else injecting the extra a-tags.
I have cleared my cache multiple times and checked the site in multiple browsers (Firefox, (Brave), Chromium).
When removing the a-tag from the code the problem disappears.
Does anyone have an idea, what is causing this mess?
I’d appreciate any help I can get.
