Broken Layout After Upgrade To 0.160.0

support
1

Here is my layouts/single.html

<!DOCTYPE html>
<html lang="{{ .Site.Params.Lang }}">

{{ partial "head.html" . }}
<body>

{{ partial "header.html" . }}
<main id="main">

<div class="box">
<a href="{{ .Parent.Permalink }}">
<h1 class="center">{{ .Parent.Title }}</h1>
</a>
</div>

<article class="box">
<div class="title">
<h2>{{ .Title }}</h2>
</div>
<div class="content">
{{ .Content }}
<h3>{{ .Site.Title }}</h3>
</div>
<div id="share" class="share">
<a href="https://addtoany.com/share#url={{ .Permalink | safeURL }}" target="_blank" rel="noopener" aria-label="Share, opens new tab">
<svg viewBox="0 0 512 512" role="button" xmlns="http://www.w3.org/2000/svg">
<title>Share</title>
<path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/>
</svg>
</a>
</div>
</article>

{{ partial "search.html" . }}
<div class="paginator">{{ if eq .Section "poem" }}{{ $next := .Next  | default . }}
<a class="left" role="button" href="{{ if and (eq $next.Section .Section) (ne $next .) }}{{ $next.Permalink }}{{ else }}#{{ end }}">«</a>
<div id="mode" class="favicon">
<div id="dark"><img alt="{{ .Site.Title }}" src="{{ .Site.BaseURL }}favicon.svg"></div>
<div id="light" hidden><img alt="{{ .Site.Title }}" src="{{ .Site.BaseURL }}favicon.svg"></div>
</div>{{ $prev := .Prev  | default . }}
<a class="right" role="button" href="{{ if and (eq $prev.Section .Section) (ne $prev .) }}{{$prev.Permalink }}{{ else }}#{{ end }}">»</a>
{{ else }}{{ $prev := .Prev  | default . }}
<a class="left" role="button" href="{{ if and (eq $prev.Section .Section) (ne $prev .) }}{{ $prev.Permalink }}{{ else }}#{{ end }}">«</a>
<div id="mode" class="favicon">
<div id="dark"><img alt="{{ .Site.Title }}" src="{{ .Site.BaseURL }}favicon.svg"></div>
<div id="light" hidden><img alt="{{ .Site.Title }}" src="{{ .Site.BaseURL }}favicon.svg"></div>
</div>{{ $next := .Next  | default . }}
<a class="right" role="button" href="{{ if and (eq $next.Section .Section) (ne $next .) }}{{$next.Permalink }}{{ else }}#{{ end }}">»</a>
{{ end }}</div>

</main>

{{ partial "footer.html" . }}
</body>

</html>

I tried to upgrade from 0.140.0 to 0.160.0 with all new folder structure. But I still got broken layout. So I switched back to 0.140.0 with old folder structure.

2

I don’t know what that means.

You are more likely to receive a prompt and accurate response if you post a link to your project’s Git repository.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

In any case, your HTML is already broken. id attributes must be unique on a page.

4

After I renamed from single.html to page.html my layout is fixed now. Thanks

5

You still need to fix your id attributes

6

While your code works perfectly fine, you can eliminate the duplicate code in your template altogether by moving the mode div outside of the conditional logic. This also makes your template easier to maintain:

<div class="paginator">
  {{ if eq .Section "poem" }}
    {{ $next := .Next | default . }}
    <a class="left" role="button" href="{{ if and (eq $next.Section .Section) (ne $next .) }}{{ $next.Permalink }}{{ else }}#{{ end }}">«</a>
  {{ else }}
    {{ $prev := .Prev | default . }}
    <a class="left" role="button" href="{{ if and (eq $prev.Section .Section) (ne $prev .) }}{{ $prev.Permalink }}{{ else }}#{{ end }}">«</a>
  {{ end }}

  <!-- Kept outside the IF statement so it only needs to be written once -->
  <div id="mode" class="favicon">
    <div id="dark"><img alt="{{ .Site.Title }}" src="{{ .Site.BaseURL }}favicon.svg"></div>
    <div id="light" hidden><img alt="{{ .Site.Title }}" src="{{ .Site.BaseURL }}favicon.svg"></div>
  </div>

  {{ if eq .Section "poem" }}
    {{ $prev := .Prev | default . }}
    <a class="right" role="button" href="{{ if and (eq $prev.Section .Section) (ne $prev .) }}{{ $prev.Permalink }}{{ else }}#{{ end }}">»</a>
  {{ else }}
    {{ $next := .Next | default . }}
    <a class="right" role="button" href="{{ if and (eq $next.Section .Section) (ne $next .) }}{{ $next.Permalink }}{{ else }}#{{ end }}">»</a>
  {{ end }}
</div>

Also, avoid using {{ .Site.BaseURL }} in templates. It is undocumented. Use the following:

  1. urls.RelURL
  2. urls.RelLangURL