169 lines
7.2 KiB
HTML
169 lines
7.2 KiB
HTML
{{/* related.html (Enhanced UI + robust image fallback) */}}
|
|
|
|
{{ if not .IsHome }}
|
|
{{ $page := . }}
|
|
{{ $max := .Params.related_max | default 4 }}
|
|
{{ $tags := .Params.tags | default (slice) }}
|
|
{{ $exclude := .Params.related_exclude | default (slice) }}
|
|
{{ $manual := .Params.related_manual | default (slice) }}
|
|
{{ $pages := slice }}
|
|
|
|
{{/* Manuelle Auswahl? */}}
|
|
{{ if gt (len $manual) 0 }}
|
|
{{ range $manual }}
|
|
{{ $p := site.GetPage . }}
|
|
{{ if not $p }}{{ $p = site.GetPage (printf "/%s" (strings.TrimPrefix "/" .)) }}{{ end }}
|
|
{{ if $p }}{{ $pages = $pages | append $p }}{{ end }}
|
|
{{ end }}
|
|
{{ $pages = first $max $pages }}
|
|
{{ else }}
|
|
{{/* Automatisch */}}
|
|
{{ $recs := slice }}
|
|
{{ range site.RegularPages }}
|
|
{{ if or
|
|
(eq .RelPermalink $page.RelPermalink)
|
|
(in (slice "impressum" "datenschutz" "agb" "privacy") .Section)
|
|
(in $exclude .RelPermalink)
|
|
(in $exclude .File.TranslationBaseName)
|
|
}}
|
|
{{/* skip */}}
|
|
{{ else }}
|
|
{{ $candTags := .Params.tags | default (slice) }}
|
|
{{ $tagScore := len (intersect $candTags $tags) }}
|
|
|
|
{{/* Sektion-Priorität */}}
|
|
{{ $secScore := 0 }}
|
|
{{ if eq $page.Section "leistungen" }}
|
|
{{ if or (eq .Section "fokusthemen") (in (slice "post" "posts" "blog" "blogs" "news") .Section) }}{{ $secScore = 1 }}{{ end }}
|
|
{{ else if or (eq $page.Section "fokusthemen") (eq $page.Section "themen") }}
|
|
{{ if or (eq .Section "leistungen") (in (slice "post" "posts" "blog" "blogs" "news") .Section) }}{{ $secScore = 1 }}{{ end }}
|
|
{{ else if in (slice "post" "posts" "blog" "blogs" "news") $page.Section }}
|
|
{{ if or (eq .Section "leistungen") (eq .Section "fokusthemen") (eq .Section "themen") }}{{ $secScore = 1 }}{{ end }}
|
|
{{ end }}
|
|
|
|
{{ $score := add (mul $tagScore 10) $secScore }}
|
|
{{ if gt $score 0 }}
|
|
{{ $recs = $recs | append (dict "p" . "s" $score "d" .Date) }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{ $recs = sort $recs "s" "desc" "d" "desc" }}
|
|
{{ range first $max $recs }}
|
|
{{ $pages = $pages | append .p }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{ if gt (len $pages) 0 }}
|
|
<section class="related section" aria-label="Verwandte Inhalte">
|
|
<div class="container my-container">
|
|
<h3 class="related-title">Verwandte Inhalte</h3>
|
|
|
|
<div class="related-grid">
|
|
{{ range $pages }}
|
|
{{/* Sektion-Label */}}
|
|
{{ $sec := .Section | default "" }}
|
|
{{ $secLabel := "" }}
|
|
{{ if eq $sec "leistungen" }}{{ $secLabel = "Leistungen" }}
|
|
{{ else if or (eq $sec "fokusthemen") (eq $sec "themen") }}{{ $secLabel = "Fokusthemen" }}
|
|
{{ else if or (eq $sec "post") (eq $sec "posts") (eq $sec "blog") (eq $sec "blogs") (eq $sec "news") }}{{ $secLabel = "Wissen" }}
|
|
{{ else }}{{ $secLabel = (title $sec) }}{{ end }}
|
|
|
|
{{/* Robust: Thumb finden (card_image → image → images[0] → Auto-Discovery) */}}
|
|
{{ $thumb := .Params.card_image | default .Params.image }}
|
|
{{ if not $thumb }}
|
|
{{ $imgs := .Params.images }}
|
|
{{ if $imgs }}
|
|
{{ $first := index $imgs 0 }}
|
|
{{ if (reflect.IsMap $first) }}
|
|
{{ $thumb = $first.src }}
|
|
{{ else }}
|
|
{{ $thumb = $first }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ if not $thumb }}
|
|
{{ $slug := .Params.slug | default .File.TranslationBaseName }}
|
|
{{ $cands := slice
|
|
(printf "static/images/%s/%s1.webp" .Section $slug)
|
|
(printf "static/images/leistungen/%s1.webp" $slug)
|
|
(printf "static/images/fokusthemen/%s1.webp" $slug)
|
|
(printf "static/images/%s1.webp" $slug)
|
|
}}
|
|
{{ range $cands }}
|
|
{{ if and (not $thumb) (fileExists .) }}
|
|
{{ $thumb = replace . "static" "" }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
<article class="related-item">
|
|
<a class="related-link" href="{{ .RelPermalink }}">
|
|
<div class="related-thumb-wrap">
|
|
{{ if $thumb }}
|
|
{{ partial "img.html" (dict
|
|
"src" $thumb
|
|
"alt" .Title
|
|
"class" "related-thumb"
|
|
"loading" "lazy"
|
|
"page" $
|
|
) }}
|
|
{{ else }}
|
|
<div class="related-thumb related-thumb--placeholder" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="48" height="48">
|
|
<path d="M21 19V5a2 2 0 0 0-2-2H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2ZM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5Z" fill="currentColor" opacity=".28"/>
|
|
<circle cx="8" cy="8" r="2" fill="currentColor" opacity=".28"/>
|
|
</svg>
|
|
</div>
|
|
{{ end }}
|
|
{{ if $secLabel }}<span class="related-badge">{{ $secLabel }}</span>{{ end }}
|
|
<span class="related-overlay" aria-hidden="true"></span>
|
|
</div>
|
|
<h4 class="related-name">{{ .Title }}</h4>
|
|
</a>
|
|
</article>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.related-title{ text-align:center; margin:0 0 1.25rem }
|
|
.related-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
|
|
|
|
.related-item{ background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.06); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease }
|
|
.related-link{ display:block; color:inherit; text-decoration:none; outline:none }
|
|
.related-link:focus-visible{ box-shadow:0 0 0 3px rgba(4,110,110,.35) }
|
|
|
|
.related-thumb-wrap{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#f3f3f3 }
|
|
.related-thumb{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease }
|
|
.related-thumb--placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#9ca3af }
|
|
|
|
.related-badge{ position:absolute; left:12px; top:12px; padding:6px 10px; font-size:.75rem; border-radius:999px; background:rgba(4,110,110,.92); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15) }
|
|
.related-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.22)); opacity:0; transition:opacity .25s ease }
|
|
|
|
.related-item:hover .related-overlay{ opacity:1 }
|
|
.related-item:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.10) }
|
|
.related-item:hover .related-thumb{ transform:scale(1.03) }
|
|
|
|
.related-name{ margin:12px 14px 16px; line-height:1.3 }
|
|
|
|
@media (max-width:640px){
|
|
.related-grid{ gap:12px; grid-template-columns:1fr }
|
|
.related-name{ margin:10px 12px 14px }
|
|
.related-badge{ left:10px; top:10px; padding:5px 9px }
|
|
}
|
|
|
|
@media (prefers-color-scheme:dark){
|
|
.related-item{ background:#023d3d; box-shadow:0 2px 10px rgba(0,0,0,.4) }
|
|
.related-thumb--placeholder{ background:#0b0f17; color:#6b7280 }
|
|
.related-badge{ background:rgba(245,166,35,.95); color:#111 }
|
|
.related-name{ color:#e5e7eb }
|
|
}
|
|
|
|
@media (prefers-reduced-motion:reduce){
|
|
.related-item, .related-thumb, .related-overlay{ transition:none !important }
|
|
}
|
|
</style>
|
|
</section>
|
|
{{ end }}
|
|
{{ end }}
|