feat: update blog single template

This commit is contained in:
Henk Verlinde
2022-06-24 16:32:15 +02:00
parent 75d250b240
commit 9f2a3fbbc5
15 changed files with 152 additions and 14 deletions

View File

@ -10,7 +10,7 @@
<div class="card">
<div class="card-body">
<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
<p>{{ .Params.lead | safeHTML }}</p>
<p>{{ .Params.excerpt | safeHTML }}</p>
{{ partial "main/blog-meta.html" . -}}
</div>
</div>

View File

@ -1,14 +1,29 @@
{{ define "main" }}
<article>
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="blog-header">
<div class="mt-5 mb-n3">{{ if .Params.categories -}}{{ range $index, $category := .Params.categories -}}{{ if gt $index 0 -}}, {{ end -}}<a class="link-muted" href="{{ "/categories/" | absURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}</div>
<h1>{{ .Title }}</h1>
{{ partial "main/blog-meta.html" . }}
</div>
</div>
<div class="col-md-12">
<div class="mt-n3">
{{- .Scratch.Set "fillImage" "1270x620 Center" -}}
{{ partial "content/figure.html" . }}
</div>
</div>
<div class="col-md-12 col-lg-10 col-xl-8">
<article>
<div class="blog-header">
<h1>{{ .Title }}</h1>
{{ partial "main/blog-meta.html" . }}
</div>
<p class="lead">{{ .Params.lead | safeHTML }}</p>
{{ .Content }}
</article>
{{ .Content }}
{{ if .Params.tags -}}
<div class="mt-4">
{{ range $index, $tag := .Params.tags -}}
<a class="btn btn-light" href="{{ "/tags/" | absURL }}{{ . | urlize }}/" role="button">{{ . }}</a>
{{ end -}}
</div>
{{ end -}}
</div>
</div>
</article>
{{ end }}

View File

@ -10,7 +10,7 @@
<div class="card-body">
<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
{{ if eq .Section "blog" -}}
<p>{{ .Params.lead | safeHTML }}</p>
<p>{{ .Params.excerpt | safeHTML }}</p>
{{ partial "main/blog-meta.html" . -}}
{{ end -}}
</div>

View File

@ -0,0 +1,37 @@
{{ $fillImage := .Scratch.Get "fillImage" }}
{{ if not $fillImage -}}
{{ $fillImage = site.Params.fillImage }}
{{ end -}}
{{ $image := .Resources.GetMatch (printf "**%s" (index .Params.images 0)) }}
{{ if not $image -}}
{{ $image = resources.Get (printf "%s%s" "images/" site.Params.defaultImage) }}
{{ end -}}
{{ $image = $image.Fill $fillImage }}
{{ $lqip := $image.Resize site.Params.lqipWidth -}}
{{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}}
{{ $widths := site.Params.landscapePhotoWidths -}}
{{ if gt $image.Height $image.Width -}}
{{ $widths = site.Params.portraitPhotoWidths -}}
{{ end -}}
{{ range $widths -}}
{{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
{{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
{{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
{{ end -}}
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
{{ if gt $image.Width site.Params.smallLimit -}}
<figure class="figure">
<img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
<noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}"></noscript>
<!-- {{ with .Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}} -->
</figure>
{{ else -}}
<img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
{{ end -}}

View File

@ -0,0 +1,32 @@
{{ $image := .Resources.GetMatch (printf "**%s" (index .Params.images 0)) }}
{{ if not $image -}}
{{ $image = resources.Get (printf "%s%s" "images/" site.Params.defaultImage) }}
{{ end -}}
{{ $image = $image.Fill site.Params.fillImage }}
{{ $lqip := $image.Resize site.Params.lqipWidth -}}
{{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}}
{{ $widths := site.Params.landscapePhotoWidths -}}
{{ if gt $image.Height $image.Width -}}
{{ $widths = site.Params.portraitPhotoWidths -}}
{{ end -}}
{{ range $widths -}}
{{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
{{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
{{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
{{ end -}}
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
{{ if gt $image.Width site.Params.smallLimit -}}
<figure class="figure">
<img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
<noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}"></noscript>
<!-- {{ with .Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}} -->
</figure>
{{ else -}}
<img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
{{ end -}}

View File

@ -1,2 +1,2 @@
{{ $last := sub (len .Params.contributors) 1 }}
<p><small>Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }}{{ if eq $index $last }} and {{ else }}, {{ end }}{{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" | relURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}&nbsp;&hyphen;&nbsp;<strong>{{ .ReadingTime -}}&nbsp;min read</strong></small><p>
<p><small>Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }}{{ if eq $index $last }} and {{ else }}, {{ end }}{{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" | relURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}&nbsp;&hyphen;&nbsp;<strong>{{ .ReadingTime -}}&nbsp;min read</strong></small><p>