diff options
| -rw-r--r-- | CHANGELOG.md | 2 | ||||
| -rw-r--r-- | assets/sass/_customize.scss | 33 | ||||
| -rw-r--r-- | content/all-posts.md | 4 | ||||
| -rw-r--r-- | layouts/_default/list.html.html | 19 | ||||
| -rw-r--r-- | layouts/_default/teaser.html | 20 | ||||
| -rw-r--r-- | layouts/index.html | 8 | ||||
| -rw-r--r-- | layouts/page/all-posts.html | 22 | ||||
| -rw-r--r-- | layouts/partials/mini-toc.html | 9 | ||||
| -rw-r--r-- | layouts/partials/pagination.html | 33 | ||||
| -rw-r--r-- | resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content | 35 |
10 files changed, 127 insertions, 58 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index ac53e00..6f35581 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `{{< mini-toc >}}` shortcode - Provide an ability to use `keywords` meta tag - Provide ability to render feeds menu -- Provide ability to get list of all posts any kind of content +- Add pagination support ### Changed diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss index 2b035c4..10b7b3f 100644 --- a/assets/sass/_customize.scss +++ b/assets/sass/_customize.scss @@ -45,7 +45,7 @@ padding-right: 1rem; } -.blog-post { +.post { margin-top: 40px; @include mq(tabletp) { @@ -91,6 +91,37 @@ margin-top: -.5rem; } +nav.pagination { + justify-content: center; +} + +ul.pager { + margin: 0; + padding: 0; + list-style: none; +} + +ul.pager li { + display: inline; + padding: 10px; + margin: 5px; +} + +.divider { + position: relative; + margin: 2.5rem 0; +} + +.divider::after { + content: ""; + display: table; + clear: both; +} + +.d-flex { + display: flex; +} + .footnotes hr { margin: 0; border: 0; diff --git a/content/all-posts.md b/content/all-posts.md deleted file mode 100644 index 7505929..0000000 --- a/content/all-posts.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: All posts -layout: all-posts ---- diff --git a/layouts/_default/list.html.html b/layouts/_default/list.html.html index 1badde4..fc39714 100644 --- a/layouts/_default/list.html.html +++ b/layouts/_default/list.html.html @@ -1,13 +1,24 @@ {{ define "main" }} + <div class="articles"> + {{/* Render category name if any */}} {{ with .Title }}<h1 class="page-title">{{ . }}</h1>{{ end }} + + {{/* Render category content if any */}} {{ with .Content }} - <div class="category-content"> + <div class="section-content"> {{ .Content }} </div> {{ end }} - {{ range .Paginator.Pages }} - {{ .Render "teaser" }} - {{ end }} + + {{/* Render posts list */}} + <div class="post-list"> + {{ range .Paginator.Pages }} + {{ .Render "teaser" }} + {{ end }} + + {{- partial "pagination.html" . -}} + </div> </div> + {{ end }} diff --git a/layouts/_default/teaser.html b/layouts/_default/teaser.html index 8edf8b4..441d779 100644 --- a/layouts/_default/teaser.html +++ b/layouts/_default/teaser.html @@ -1,19 +1,19 @@ -<article class="blog-post"> +<article class="post"> {{/* TODO: partial "post-thumbnail.html" (dict "class" "list" "page" .) */}} <header> - <h2 class="blog-post-title"> + <h2 class="post-title"> <a href="{{ .Permalink }}" rel="bookmark">{{ .Title }}</a> </h2> {{- partial "post-meta.html" . -}} </header> - <p class="blog-post-content"> + <p class="post-content"> {{ .Summary }} </p> - {{- if site.Params.readmore }} - {{- if .Truncated }} - <footer> - <a href="{{ .RelPermalink }}" class="read-more">{{ i18n "more" }}</a> - </footer> - {{- end }} - {{- end }} + {{ if site.Params.readmore }} + {{ if .Truncated }} + <footer> + <a href="{{ .RelPermalink }}" class="read-more">{{ i18n "more" }}</a> + </footer> + {{ end }} + {{ end }} </article> diff --git a/layouts/index.html b/layouts/index.html index c82855c..70bdad1 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,11 +7,15 @@ <hr> {{ partial "mini-toc" . }} {{ else }} - {{- $mainSections := site.Params.mainSections | default (slice "posts") }} + {{ $mainSections := site.Params.mainSections | default (slice "posts") }} {{ $paginator := .Paginate (where site.RegularPages.ByDate.Reverse "Section" "in" $mainSections) }} <div class="articles"> {{ with .Title }}<h1 class="page-title">{{ . }}</h1>{{ end }} - {{ range $paginator.Pages }}{{- .Render "teaser" }}{{ end }} + + {{ range $paginator.Pages }} + {{ .Render "teaser" }} + {{ end }} </div> {{ end }} + {{ end }} diff --git a/layouts/page/all-posts.html b/layouts/page/all-posts.html deleted file mode 100644 index a26b084..0000000 --- a/layouts/page/all-posts.html +++ /dev/null @@ -1,22 +0,0 @@ -{{ define "main" }} -{{/* Define a section to pull recent posts from. - This will default to the section with the most number of pages. */}} -{{ $mainSections := site.Params.mainSections | default (slice "posts") }} - -{{/* Create a variable with that section to use in multiple places. */}} -{{ $section := where site.RegularPages.ByDate.Reverse "Section" "in" $mainSections }} - -<div class="articles"> - {{ with .Title }}<h1 class="page-title">{{ . }}</h1>{{ end }} - - {{ with .Content }} - <div class="category-content"> - {{ .Content }} - </div> - {{ end }} - - {{ range $section }} - {{ .Render "teaser" }} - {{ end }} -</div> -{{ end }} diff --git a/layouts/partials/mini-toc.html b/layouts/partials/mini-toc.html index 6b52f47..0d52866 100644 --- a/layouts/partials/mini-toc.html +++ b/layouts/partials/mini-toc.html @@ -21,14 +21,5 @@ </li> {{ end }} </ul> - - {{ if gt $sectionCount $maxPosts }} - <p> - <a href="{{ "all-posts" | relURL }}"> - {{ i18n "all_publications" }} - <span aria-hidden="true">→</span> - </a> - </p> - {{ end }} </div> {{ end }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..0e675a1 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,33 @@ +{{ if gt .Paginator.TotalPages 1 }} + <div class="divider"></div> + + <nav aria-label="pagination" class="pagination d-flex"> + <ul class="pager d-flex"> + {{ $.Scratch.Set "hasPrevDots" false }} + {{ $.Scratch.Set "hasNextDots" false }} + + {{ range .Paginator.Pagers }} + {{ $currentItem := . }} + {{ if eq $currentItem $.Paginator }} + <li class="pager-item pager-item-current"> + {{- .PageNumber -}} + </li> + {{ else if or (or (eq . $.Paginator.First) (eq . $.Paginator.Prev)) (or (eq . $.Paginator.Next) (eq . $.Paginator.Last )) }} + <li class="pager-item{{ if eq . $.Paginator.Next }} pager-item-next{{ else if eq . $.Paginator.Prev }} pager-item-prev{{ end }}"> + <a href="{{ .URL }}"{{ if eq . $.Paginator.Next }} rel="next"{{ else if eq . $.Paginator.Prev }} rel="prev"{{ end }} class="pager-link"> + {{- .PageNumber -}} + </a> + </li> + {{ else }} + {{ if and (not ($.Scratch.Get "hasPrevDots")) (lt .PageNumber $.Paginator.PageNumber) }} + {{ $.Scratch.Set "hasPrevDots" true }} + <li class='pager-item pager-item-dots'>…</li> + {{ else if and (not ($.Scratch.Get "hasNextDots")) (gt .PageNumber $.Paginator.PageNumber) }} + {{ $.Scratch.Set "hasNextDots" true }} + <li class='pager-item pager-item-dots'>…</li> + {{ end }} + {{ end }} + {{ end }} + </ul> + </nav> +{{ end }} diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index b6e2071..11c11f2 100644 --- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -896,18 +896,18 @@ form input:-moz-ui-invalid { .post-meta time { padding-right: 1rem; } -.blog-post { +.post { margin-top: 40px; } @media only screen and (min-width: 768px) { - .blog-post { + .post { margin-top: 60px; } } @media only screen and (min-width: 1024px) { - .blog-post { + .post { margin-top: 80px; } } @media only screen and (min-width: 1220px) { - .blog-post { + .post { margin-top: 100px; } } - .blog-post:first-of-type { + .post:first-of-type { margin-top: 0; } #main article { @@ -932,6 +932,31 @@ form input:-moz-ui-invalid { letter-spacing: 0; margin-top: -.5rem; } +nav.pagination { + justify-content: center; } + +ul.pager { + margin: 0; + padding: 0; + list-style: none; } + +ul.pager li { + display: inline; + padding: 10px; + margin: 5px; } + +.divider { + position: relative; + margin: 2.5rem 0; } + +.divider::after { + content: ""; + display: table; + clear: both; } + +.d-flex { + display: flex; } + .footnotes hr { margin: 0; border: 0; } |