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.

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)

{{- 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 }}">
      «&nbsp;{{ i18n "prev_page" }}&nbsp;
      {{- 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" }}&nbsp;
      {{- if (.Param "ShowPageNums") }}
      {{- add 1 $paginator.PageNumber }}/{{ $paginator.TotalPages }}
      {{- end }}&nbsp;»
    </a>
    {{- end }}
  </nav>
</footer>
{{- end }}

{{- end }}{{- /* end main */ -}}

CSS

Ein paar CSS Anpassungen in assets/css/extended/custom.css:

.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):

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:

---
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