Blog: List page with summary and pagination
This commit is contained in:
parent
a80cb42a34
commit
171fa015f1
|
@ -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:
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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!
|
||||
|
|
|
@ -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!
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
13
themes/ccchh/layouts/_default/summary.html
Normal file
13
themes/ccchh/layouts/_default/summary.html
Normal 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>
|
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
37
themes/ccchh/layouts/partials/blog-header.html
Normal file
37
themes/ccchh/layouts/partials/blog-header.html
Normal 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 }}
|
154
themes/ccchh/layouts/partials/pagination.html
Normal file
154
themes/ccchh/layouts/partials/pagination.html
Normal 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">««</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">««</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">«</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">«</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">»</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">»</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">»»</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">»»</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">««</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">«</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">»</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">»»</span></a>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end -}}
|
Loading…
Reference in a new issue