Ziel#
Das Ziel ist es, hier auf der Seite eine Zeitleiste (timeline) zu erstellen, wo tägliche Funde und
Gedanken einfach wie bei Twitter o.ä. gepostet werden können (s. auch linklog Ansatz von Simon Willison)
Das soll hier mit einzelnen Dateien geschehen, um eine Verwaltung über tags, Suche, bessere Organisation zu ermöglichen; nicht einfach als einzelne Jahres/Monats Datei.
Das ist auch wichtig für das einfache posten über Obsidian – in einem anderen Beitrag mehr dazu.
Es wird hier einfach eine eigene Sektion in Hugo benutzt und ein verändertes Listen-Layout
aus dem PaperMod theme erstellt.
Layout#
Die Sektion ‘Zeitleiste’ bekommt ein eigenes layout.
Die Einträge sind nicht verlinkt, zeigen den ganzen Content und die Darstellung ist leicht angepasst.
layouts/_default/timeline.html (basierend auf list.html aus dem PaperMod theme)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| {{- define "main" }}
{{- if not .IsHome | and .Title }}
<header class="page-header">
{{- partial "breadcrumbs.html" . }}
<h1>
{{ .Title }}
{{- if and (or (eq .Kind `term`) (eq .Kind `section`)) (.Param "ShowRssButtonInSectionTermList") }}
{{- with .OutputFormats.Get "rss" }}
<a href="{{ .RelPermalink }}" title="RSS" aria-label="RSS">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" height="23">
<path d="M4 11a9 9 0 0 1 9 9" />
<path d="M4 4a16 16 0 0 1 16 16" />
<circle cx="5" cy="19" r="1" />
</svg>
</a>
{{- end }}
{{- end }}
</h1>
{{- if .Description }}
<div class="post-description">
{{ .Description | markdownify }}
</div>
{{- end }}
</header>
{{- end }}
{{- if .Content }}
<div class="post-content">
{{- if not (.Param "disableAnchoredHeadings") }}
{{- partial "anchored_headings.html" .Content -}}
{{- else }}{{ .Content }}{{ end }}
</div>
{{- end }}
{{- $pages := union .RegularPages .Sections }}
{{- $paginator := .Paginate $pages }}
{{- $term := .Data.Term }}
{{- range $index, $page := $paginator.Pages.ByDate.Reverse }}
{{- $class := "post-entry1" }}
{{- $user_preferred := or site.Params.disableSpecial1stPost site.Params.homeInfoParams }}
<article class="{{ $class }}">
{{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }}
{{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
<header class="entry-header">
<h2 class="entry-hint-parent">
{{- .Title }}
{{- if .Draft }}
<span class="entry-hint" title="Draft">
<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" fill="currentColor">
<path
d="M160-410v-60h300v60H160Zm0-165v-60h470v60H160Zm0-165v-60h470v60H160Zm360 580v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862.09-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" />
</svg>
</span>
{{- end }}
</h2>
</header>
{{- if .Description }}
<div class="post-description">
{{ .Description }}
</div>
{{- end }}
{{- if .Content }}
<div class="post-content">
{{- if not (.Param "disableAnchoredHeadings") }}
{{- partial "anchored_headings.html" .Content -}}
{{- else }}{{ .Content }}{{ end }}
</div>
{{- end }}
<footer class="post-footer1">
{{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
<ul class="post-tags">
{{- range (.GetTerms $tags) }}
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
{{- if (.Param "ShowPostNavLinks") }}
{{- partial "post_nav_links.html" . }}
{{- end }}
{{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
{{- partial "share_icons.html" . -}}
{{- end }}
</footer>
</article>
{{- end }}{{- /* end range */ -}}
{{- if gt $paginator.TotalPages 1 }}
<footer class="page-footer">
<nav class="pagination">
{{- if $paginator.HasPrev }}
<a class="prev" href="{{ $paginator.Prev.URL | absURL }}">
« {{ i18n "prev_page" }}
{{- if (.Param "ShowPageNums") }}
{{- sub $paginator.PageNumber 1 }}/{{ $paginator.TotalPages }}
{{- end }}
</a>
{{- end }}
{{- if $paginator.HasNext }}
<a class="next" href="{{ $paginator.Next.URL | absURL }}">
{{- i18n "next_page" }}
{{- if (.Param "ShowPageNums") }}
{{- add 1 $paginator.PageNumber }}/{{ $paginator.TotalPages }}
{{- end }} »
</a>
{{- end }}
</nav>
</footer>
{{- end }}
{{- end }}{{- /* end main */ -}}
|
CSS#
Ein paar CSS Anpassungen in assets/css/extended/custom.css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .post-entry1 {
position: relative;
margin-bottom: var(--gap);
padding: var(--gap);
background: var(--entry);
border-radius: var(--radius);
transition: transform 0.1s;
border: 1px solid var(--border);
}
.post-entry1 .entry-header h2 {
font-size: 16px;
line-height: 1.3;
}
|
Top-Menü#
Die Sektion kann noch im Top-Menü verlinkt werden (config.yaml):
1
2
3
4
5
6
| menu:
main:
- identifier: timeline
name: Zeitleiste
url: /timeline/
weight: 20
|
Fertig + posten#
Nun kann ich mit der Datei content/timeline/2024-01-20.md einen neuen Eintrag erstellen:
1
2
3
4
5
6
7
8
9
10
11
12
| ---
title: 2024-01-20
---
### Stille
> Am allerwenigsten aber konnten sie die Stille ertragen.
> Denn in der Stille überfiel sie Angst, weil sie ahnten, was in Wirklichkeit mit ihrem Leben geschah.
>
> – <cite>aus Momo[^1]</cite>
[^1]: Momo (Roman), Michael Ende, 1973
|
Offen ist noch:
- Filter nach Jahren, Monaten
- Paginierung richtig. Im Moment i