Hugo "siehe auch"

calendar 2022-09-22 · 3 min lesen · hugo software

Im verwendeten Theme gibt es die Möglichkeit "related pages" anzuzeigen. Aber irgendwie nicht so wie ich mir das vorstelle. Es wird eine bestehende Taxonomie dazu genutzt, die dann aber auch in der Sidebar als Taxonomie landet. Irgendwie nicht logisch. Über Hugo selbst kann man auch RelatedPages bekommen, aber das ist auch eher speziell.

Also angesehen, wie das dort gemacht wird. Die Sitebar ist eine große lange Codewurst, da macht das keinen Spass.

Aber immerhin ist der Verweis am Seitenende ein eigenes kleines "partial layout" names related.html.

Das original sieht so aus:

1{{ if isset .Params "series" }}
2{{$related := where .Site.RegularPages ".Params.series" "eq" .Params.series }}
3	<h2 class="post_related">Posts in this Series</h2>
4	<ul>
5	  {{ range $related }}
6	      <li><a href="{{ .Permalink }}" class="nav-link" title="{{ .Title }}">{{ .Title }}</a></li>
7	  {{ end }}
8	</ul>
9{{ end }}

Kompakt, knapp, nicht so toll.

Hier mein Gegenentwurf:

 1{{ if .Page.Params.related }}
 2{{$related := where .Site.RegularPages ".Page.Params.related" "intersect" .Page.Params.related }}
 3{{$related := where $related ".Permalink" "ne" .Page.Permalink }}
 4{{ if gt (len $related) 0 }}
 5	<h2 class="post_related">siehe auch</h2>
 6	<ul>
 7	  {{ range first 5 $related }}
 8	      <li><a href="{{ .Permalink }}" class="nav-link" title="{{ .Title }}">{{ .Title }}</a></li>
 9	  {{ end }}
10	</ul>
11{{ end }}
12{{ else }}
13
14    {{$cats := where .Site.RegularPages ".Page.Params.categories" "intersect" .Page.Params.categories }}
15    {{$tags := where .Site.RegularPages ".Page.Params.tags" "intersect" .Page.Params.tags }}
16
17    {{$cats := where $cats ".Permalink" "ne" .Page.Permalink }}
18    {{$tags := where $tags ".Permalink" "ne" .Page.Permalink }}
19
20    {{$related := $cats | intersect $tags }}
21    {{ if gt (len $related) 0 }}
22	    <h2 class="post_related">siehe auch</h2>
23	    <ul>
24	      {{ range first 5 $related }}
25	          <li><a href="{{ .Permalink }}" class="nav-link" title="{{ .Title }}">{{ .Title }}</a></li>
26	      {{ end }}
27	    </ul>
28    {{ end }}
29{{ end }}

Was tut das?

Es tut 2 unterschiedliche Dinge:

  • Ich habe mir ein Frontmatter Array related definiert, dass wenn es gesetzt ist, für das Related genutzt wird. Es wird dann nach Seiten gesucht, die ebenfalls einen dieser Einträge haben.
  • Gibt es das nicht, wird nach Seiten gesucht, die eine gleiche Kategorie und einen gleichen Tag haben.

Als Zusatz wird, im Gegensatz zum alten Code, die eigene Seite gefiltert 1 und nur wenn es wirklich dann noch Treffer gibt, die Überschrift gezeigt. Und von den Treffern auch nur die ersten 5 - das ist hart codiert, könnte man natürlich über Konfig-Parameter sauberer lösen.

Diese Filterung der eigenen Seite habe ich bewusst in eine getrennte Codezeile gepackt, um sie besser lesen zu können.

Im Visual Studio Code Frontmatter frontmatter.json musste dann zur Vereinfachung noch das dazu:

1"frontMatter.taxonomy.contentTypes": [
2    ...
3        {
4          "title": "related",
5          "name": "related",
6          "type": "taxonomy",
7          "taxonomyId": "related"
8        }
9]

Irgendwie gehts!

  1. Hugo where function: https://gohugo.io/functions/where/🖹 ↩︎

siehe auch