Skip to content

Commit c76d970

Browse files
robbertbosrobbertbos
committed
Paginanavigatie in reeksen met prev_next-flag
Lineaire navigatie tussen index en subpagina's die samen een reeks vormen. Overview-pagina toont alleen Volgende, laatste pagina sluit af met "Terug naar"-link. Gated op prev_next: true in front matter. Page_title-parameter voor browser-tab met context-prefix. Shared article- partial voor content-layout consistent met page.html.
1 parent d9f06d8 commit c76d970

File tree

4 files changed

+117
-3
lines changed

4 files changed

+117
-3
lines changed

‎assets/css/components/page-nav.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.page-nav {
2+
display: grid;
3+
grid-template-columns: 1fr 1fr;
4+
gap: 1rem;
5+
padding-top: 1rem;
6+
border-top: 1px solid var(--color-border);
7+
}
8+
9+
.page-nav a {
10+
display: flex;
11+
flex-direction: column;
12+
gap: 0.25rem;
13+
padding: 0.75rem 1rem;
14+
text-decoration: none;
15+
border: 1px solid var(--color-border);
16+
border-radius: 0.25rem;
17+
color: inherit;
18+
19+
&:hover,
20+
&:focus-visible {
21+
text-decoration: none;
22+
background-color: var(--color-primary);
23+
border-color: var(--color-primary);
24+
color: var(--color-text-on-primary);
25+
}
26+
}
27+
28+
.page-nav-prev {
29+
text-align: start;
30+
31+
.page-nav-label::before {
32+
content: "← ";
33+
}
34+
}
35+
36+
.page-nav-next {
37+
text-align: end;
38+
grid-column: 2;
39+
40+
.page-nav-label::after {
41+
content: " →";
42+
}
43+
}
44+
45+
.page-nav-label {
46+
font-size: 1rem;
47+
opacity: 0.7;
48+
}
49+
50+
.page-nav-title {
51+
font-weight: 600;
52+
}
53+
54+
@media (max-width: 640px) {
55+
.page-nav {
56+
grid-template-columns: 1fr;
57+
}
58+
59+
.page-nav-next {
60+
grid-column: 1;
61+
}
62+
}

‎content/onderwerpen/ontwerpprincipes/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ image: "/images/tegel-ontwerp.svg"
66
image_alt: "Icoon van een ontwerp"
77
weight: 3
88
hide_tiles: true
9+
prev_next: true
910
aliases:
1011
- /onderwerpen/ontwerp/
1112
---

‎layouts/_partials/article.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
{{- $toc := .TableOfContents -}}
22
{{- $hasToc := and $toc (ne .Params.toc false) (gt (len (findRE "<li>" $toc)) 0) -}}
3+
{{- $navList := slice -}}
4+
{{- $currentIdx := -1 -}}
5+
{{- if and (eq .Kind "section") .Params.prev_next -}}
6+
{{- $navList = slice . -}}
7+
{{- range .Pages.ByWeight -}}
8+
{{- $navList = $navList | append . -}}
9+
{{- end -}}
10+
{{- $currentIdx = 0 -}}
11+
{{- else if eq .Kind "page" -}}
12+
{{- $parent := .Parent -}}
13+
{{- if and $parent $parent.Params.prev_next -}}
14+
{{- $navList = slice $parent -}}
15+
{{- range $parent.Pages.ByWeight -}}
16+
{{- $navList = $navList | append . -}}
17+
{{- end -}}
18+
{{- range $i, $p := $navList -}}
19+
{{- if eq $p.RelPermalink $.RelPermalink -}}
20+
{{- $currentIdx = $i -}}
21+
{{- end -}}
22+
{{- end -}}
23+
{{- end -}}
24+
{{- end -}}
25+
{{- $navCount := len $navList -}}
326
<article>
427
<header>
528
<h1>{{ .Title }}</h1>
@@ -12,6 +35,32 @@ <h1>{{ .Title }}</h1>
1235
{{- end -}}
1336
</header>
1437
{{ .Content }}
38+
{{- if gt $navCount 1 -}}
39+
{{- $isFirst := eq $currentIdx 0 -}}
40+
{{- $isLast := eq $currentIdx (sub $navCount 1) -}}
41+
{{- $parent := index $navList 0 -}}
42+
<nav class="page-nav" aria-label="Navigatie binnen deze reeks">
43+
{{- if not $isFirst -}}
44+
{{- $prev := index $navList (sub $currentIdx 1) -}}
45+
<a href="{{ $prev.RelPermalink }}" rel="prev" class="page-nav-prev">
46+
<span class="page-nav-label">Vorige</span>
47+
<span class="page-nav-title">{{ $prev.Params.card_title | default $prev.Title }}</span>
48+
</a>
49+
{{- end -}}
50+
{{- if $isLast -}}
51+
<a href="{{ $parent.RelPermalink }}" class="page-nav-next">
52+
<span class="page-nav-label">Terug naar</span>
53+
<span class="page-nav-title">{{ $parent.Params.card_title | default $parent.Title }}</span>
54+
</a>
55+
{{- else -}}
56+
{{- $next := index $navList (add $currentIdx 1) -}}
57+
<a href="{{ $next.RelPermalink }}" rel="next" class="page-nav-next">
58+
<span class="page-nav-label">Volgende</span>
59+
<span class="page-nav-title">{{ $next.Params.card_title | default $next.Title }}</span>
60+
</a>
61+
{{- end -}}
62+
</nav>
63+
{{- end -}}
1564
</article>
1665
{{- if $hasToc -}}
1766
<aside id="toc" class="toc">

‎layouts/_partials/head.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<meta charset="UTF-8" />
22
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
33
{{- $pageTitle := .Site.Title -}}
4-
{{- if and (not .IsHome) .Title -}}
5-
{{- $pageTitle = printf "%s | %s" .Title .Site.Title -}}
4+
{{- $metaTitle := or .Params.page_title .Title -}}
5+
{{- if and (not .IsHome) $metaTitle -}}
6+
{{- $pageTitle = printf "%s | %s" $metaTitle .Site.Title -}}
67
{{- end -}}
78
<title>{{ $pageTitle }}</title>
89
{{- $description := .Description -}}
@@ -60,7 +61,8 @@
6061
{{ $toast := resources.Get "css/components/toast.css" }}
6162
{{ $search := resources.Get "css/components/search.css" }}
6263
{{ $mermaid := resources.Get "css/components/mermaid.css" }}
63-
{{ $css := slice $tokens $fonts $base $layout $header $hero $cardGrid $box $button $blockquote $list $footer $toast $search $mermaid | resources.Concat "css/style.css" | resources.ExecuteAsTemplate "css/style.css" . | fingerprint "md5" }}
64+
{{ $pageNav := resources.Get "css/components/page-nav.css" }}
65+
{{ $css := slice $tokens $fonts $base $layout $header $hero $cardGrid $box $button $blockquote $list $footer $toast $search $mermaid $pageNav | resources.Concat "css/style.css" | resources.ExecuteAsTemplate "css/style.css" . | fingerprint "md5" }}
6466
<link rel="stylesheet" href="{{ $css.RelPermalink }}" />
6567

6668
{{/* Thema uit localStorage toepassen vóór renderen om flash te voorkomen */}}

0 commit comments

Comments
 (0)