Blog: List page with summary and pagination

This commit is contained in:
jtbx 2023-10-08 00:13:18 +02:00
parent a80cb42a34
commit 171fa015f1
14 changed files with 282 additions and 53 deletions

View file

@ -62,6 +62,9 @@ To create a new general blog post, run a command like this:
hugo new content --kind article blog/your-article-title.md
```
By default the first 70 words are shown as a summary on list pages.
Please use `<!--more-->` to manually separate the summary from other post content.
### Icons
You can use solid and brand icons from https://fontawesome.com/icons version 6 in your posts like this:

View file

@ -6,9 +6,15 @@ publishDate: 2023-08-27T09:03:20+02:00 # when to publish
draft: false
location: Z9
authors:
- jtbx
- Ada Lovelace
---
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
Visit the [Hugo](https://gohugo.io) website!
Rem qui qui dolores sit. Ut sequi doloribus nobis et eaque. Voluptas deserunt aut explicabo exercitationem.
Recusandae qui libero corporis in et voluptatem neque quas. Eius quaerat repellendus minus et. Ut est magnam aut vitae maiores deserunt cumque ut. Quia et ad atque consequuntur magnam odit.
<!--more-->
Magnam ipsam sed ratione. Voluptates voluptas facilis quas quia rerum reiciendis. Laborum aspernatur molestiae at quibusdam eligendi fuga voluptas molestiae.
Sint recusandae fugiat ut dolore. A culpa sapiente soluta quis quis assumenda ratione. Nulla rem et quis corrupti dolorem. Ea odio nobis qui. Non dolorum tempora explicabo pariatur a accusantium sint id. Reiciendis omnis nam aut.
Quia ut asperiores eos earum assumenda ratione voluptatem aliquid. Quod delectus et blanditiis aspernatur. Et nemo est ducimus voluptas ut excepturi excepturi ea. Harum et natus culpa velit.

View file

@ -16,4 +16,4 @@ Rem qui qui dolores sit. Ut sequi doloribus nobis et eaque. Voluptas deserunt au
Recusandae qui libero corporis in et voluptatem neque quas. Eius quaerat repellendus minus et. Ut est magnam aut vitae maiores deserunt cumque ut. Quia et ad atque consequuntur magnam odit.
Magnam ipsam sed ratione. Voluptates voluptas facilis quas quia rerum reiciendis. Laborum aspernatur molestiae at quibusdam eligendi fuga voluptas molestiae.
Sint recusandae fugiat ut dolore. A culpa sapiente soluta quis quis assumenda ratione. Nulla rem et quis corrupti dolorem. Ea odio nobis qui. Non dolorum tempora explicabo pariatur a accusantium sint id. Reiciendis omnis nam aut.
Quia ut asperiores eos earum assumenda ratione voluptatem aliquid. Quod delectus et blanditiis aspernatur. Et nemo est ducimus voluptas ut excepturi excepturi ea. Harum et natus culpa velit.
Quia ut asperiores eos earum assumenda ratione voluptatem aliquid. Quod delectus et blanditiis aspernatur. Et nemo est ducimus voluptas ut excepturi excepturi ea. Harum et natus culpa velit.

View file

@ -10,7 +10,9 @@ authors:
- Ada Lovelace
tags:
- test
- bar
- foo
---
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
Visit the [Hugo](https://gohugo.io) website!

View file

@ -11,4 +11,4 @@ tags:
---
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
Visit the [Hugo](https://gohugo.io) website!

View file

@ -2,6 +2,9 @@ $roomstate_color_unknown: #dda218;
$roomstate_color_open: var(--ins-color);
$roomstate_color_closed: var(--del-color);
:root {
--spacing: 0.7rem;
}
// General Customizations
header {
@ -10,6 +13,10 @@ header {
h1 {
margin-bottom: 0;
}
h2 {
margin-bottom: 0;
}
}
body>footer {
@ -31,6 +38,44 @@ body>main {
}
}
.li-space {
&::after {
content: "";
padding-right: 1rem;
}
&:last-child::after {
padding-right: 0;
}
}
.morelink {
margin-top: calc(var(--typography-spacing-vertical) * -1);
}
.pagination {
display: flex;
justify-content: center;
li {
list-style: none;
a {
border-radius: 0;
}
&:first-child>a {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
&:last-child>a {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
}
}
// Room State in Menu
#roomstate {

View file

@ -6,7 +6,6 @@
<ul>
{{ range .Pages }}
<!-- TODO: Content summary -->
<li>
<a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
</li>

View file

@ -0,0 +1,13 @@
<article>
{{- partial "blog-header.html" (dict "subitem" true "page" . ) }}
{{- if in .RawContent "<!--more-->" }}
{{ .Summary | safeHTML }}
{{- else }}
<p>{{ .Summary | safeHTML }}</p>
{{- end }}
{{- if .Truncated }}
<div class="morelink"><a href="{{ .RelPermalink }}">mehr...</a></div>
{{- end }}
</article>

View file

@ -4,13 +4,9 @@
<h1>{{ .Parent.Title }}: {{ .Title }}</h1>
</header>
<ul>
{{ range .Pages }}
<!-- TODO: Content summary -->
<li>
<a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
</li>
{{ end }}
</ul>
{{- range .Pages }}
{{ .Render "summary" }}
{{- end }}
<!-- TODO: Pagination: see https://gohugo.io/templates/pagination/ -->
</main>
{{ end }}

View file

@ -6,11 +6,9 @@
<section>
<ul>
{{ range .Pages }}
<li>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</li>
{{ end }}
{{- range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{- end }}
</ul>
</section>
</main>

View file

@ -2,30 +2,23 @@
<main class="container" aria-role="main">
<header class="header">
<h1>{{ .Title }}</h1>
{{ with .Params.subtitle }}
{{- with .Params.subtitle }}
<span class="subtitle">{{ . }}</span>
{{ end }}
{{- end }}
<div class="nav-aside">
Filter nach Kategorie:
<ul class="aside">
{{ range .Site.Taxonomies.categories }}
<li>
<a href="{{ .Page.Permalink }}">[{{ .Page.Title }}]</a>
</li>
{{ end }}
{{- range .Site.Taxonomies.categories }}
<li><a href="{{ .Page.Permalink }}">[{{ .Page.Title }}]</a></li>
{{- end }}
</ul>
</div>
</header>
<ul>
{{ range .Pages }}
<!-- TODO: Content summary -->
<li>
<a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
</li>
{{ end }}
</ul>
<!-- TODO: Pagination: see https://gohugo.io/templates/pagination/ -->
{{ range .Paginator.Pages }}
{{ .Render "summary" }}
{{- end }}
{{ partial "pagination.html" . }}
</main>
{{ end }}

View file

@ -1,23 +1,6 @@
{{ define "main" }}
<main class="container" aria-role="main">
<header class="header">
<h1>{{ .Title }}</h1>
{{- with .Params.subtitle }}
<span class="subtitle">{{ . }}</span>
{{- end }}
<div class="infos">
<i class="fa-regular fa-calendar-xmark"></i> {{ .Date.Format "2006-01-02 15:04" }}
{{- with .Params.location }},
<i class="fa-solid fa-location-dot"></i> {{ . }}
{{- end }}
<br>
{{- if .Params.authors }}
<i class="fa-regular fa-user"></i>
{{ range .Params.authors }}<span class="li-comma">{{ . }}</span>{{ end }}
{{- end }}
</div>
</header>
{{- partial "blog-header.html" (dict "subitem" false "page" . ) }}
<section class="content">
{{ .Content }}

View file

@ -0,0 +1,37 @@
{{- $page := .page -}}
{{- $isMain := not .subitem -}}
{{ with $page }}
<header>
{{- if $isMain }}
<h1>{{ .Title }}</h1>
{{- else }}
<a href="{{ .Permalink }}"><h2>{{ .Title }}</h2></a>
{{- end }}
{{- with .Params.subtitle }}
<span class="subtitle">{{ . }}</span>
{{- end }}
<div class="infos">
<span class="li-space"><i class="fa-solid fa-calendar-day"></i> {{ .Date.Format "2006-01-02 15:04" }}</span>
{{- with .Params.location }}
<span class="li-space"><i class="fa-solid fa-location-dot"></i> {{ . }}</span>
{{- end }}
{{- with .Page.GetTerms "tags" }}
<span class="li-space"><i class="fa-solid fa-tag"></i>
{{- range . }}
<span class="li-comma"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
{{- end }}
</span>
{{- end }}
<br>
{{- with .Page.GetTerms "authors" }}
<span class="li-space"><i class="fa-regular fa-user"></i>
{{- range . }}
<span class="li-comma"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
{{- end }}
</span>
{{- end }}
</div>
</header>
{{- end }}

View file

@ -0,0 +1,154 @@
{{- $validFormats := slice "default" "terse" }}
{{- $msg1 := "When passing a map to the internal pagination template, one of the elements must be named 'page', and it must be set to the context of the current page." }}
{{- $msg2 := "The 'format' specified in the map passed to the internal pagination template is invalid. Valid choices are: %s." }}
{{- $page := . }}
{{- $format := "default" }}
{{- if reflect.IsMap . }}
{{- with .page }}
{{- $page = . }}
{{- else }}
{{- errorf $msg1 }}
{{- end }}
{{- with .format }}
{{- $format = lower . }}
{{- end }}
{{- end }}
{{- if in $validFormats $format }}
{{- if gt $page.Paginator.TotalPages 1 }}
<ul class="pagination pagination-{{ $format }}">
{{- partial (printf "partials/inline/pagination/%s" $format) $page }}
</ul>
{{- end }}
{{- else }}
{{- errorf $msg2 (delimit $validFormats ", ") }}
{{- end -}}
{{/* Format: default
{{/* --------------------------------------------------------------------- */}}
{{- define "partials/inline/pagination/default" }}
{{- with .Paginator }}
{{- $currentPageNumber := .PageNumber }}
{{- with .First }}
{{- if ne $currentPageNumber .PageNumber }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="First" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;&laquo;</span></a>
</li>
{{- else }}
<li class="page-item disabled">
<a aria-disabled="true" aria-label="First" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&laquo;&laquo;</span></a>
</li>
{{- end }}
{{- end }}
{{- with .Prev }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Previous" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;</span></a>
</li>
{{- else }}
<li class="page-item disabled">
<a aria-disabled="true" aria-label="Previous" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&laquo;</span></a>
</li>
{{- end }}
{{- $slots := 5 }}
{{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }}
{{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }}
{{- if lt (add (sub $end $start) 1) $slots }}
{{- $start = math.Max 1 (add (sub $end $slots) 1) }}
{{- end }}
{{- range $k := seq $start $end }}
{{- if eq $.Paginator.PageNumber $k }}
<li class="page-item active">
<a aria-current="page" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
</li>
{{- else }}
<li class="page-item">
<a href="{{ (index $.Paginator.Pagers (sub $k 1)).URL }}" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
</li>
{{- end }}
{{- end }}
{{- with .Next }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Next" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;</span></a>
</li>
{{- else }}
<li class="page-item disabled">
<a aria-disabled="true" aria-label="Next" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&raquo;</span></a>
</li>
{{- end }}
{{- with .Last }}
{{- if ne $currentPageNumber .PageNumber }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Last" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;&raquo;</span></a>
</li>
{{- else }}
<li class="page-item disabled">
<a aria-disabled="true" aria-label="Last" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&raquo;&raquo;</span></a>
</li>
{{- end }}
{{- end }}
{{- end }}
{{- end -}}
{{/* Format: terse
{{/* --------------------------------------------------------------------- */}}
{{- define "partials/inline/pagination/terse" }}
{{- with .Paginator }}
{{- $currentPageNumber := .PageNumber }}
{{- with .First }}
{{- if ne $currentPageNumber .PageNumber }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="First" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;&laquo;</span></a>
</li>
{{- end }}
{{- end }}
{{- with .Prev }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Previous" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;</span></a>
</li>
{{- end }}
{{- $slots := 3 }}
{{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }}
{{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }}
{{- if lt (add (sub $end $start) 1) $slots }}
{{- $start = math.Max 1 (add (sub $end $slots) 1) }}
{{- end }}
{{- range $k := seq $start $end }}
{{- if eq $.Paginator.PageNumber $k }}
<li class="page-item active">
<a aria-current="page" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
</li>
{{- else }}
<li class="page-item">
<a href="{{ (index $.Paginator.Pagers (sub $k 1)).URL }}" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
</li>
{{- end }}
{{- end }}
{{- with .Next }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Next" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;</span></a>
</li>
{{- end }}
{{- with .Last }}
{{- if ne $currentPageNumber .PageNumber }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Last" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;&raquo;</span></a>
</li>
{{- end }}
{{- end }}
{{- end }}
{{- end -}}