Design of blog posts' hero starting to be ok

master
Quentin Duchemin 2021-05-25 03:25:30 +02:00
parent a5095a465a
commit c7e8c504f8
Signed by: Chosto
GPG Key ID: 0547178FEEDE7D6B
1 changed files with 32 additions and 21 deletions

View File

@ -1,31 +1,42 @@
<header> <header>
<section class="hero is-primary is-medium has-bg-img"> <section class="hero is-primary has-text-centered is-medium">
<div class="hero-body has-text-centered"> <div class="hero-head mt-5">
{{ with .Params.categories }}
<div class="tags colums mb-2 mx-5">
{{ range . }}
<span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
{{ end }}
</div>
{{ end }}
</div>
<div class="hero-body">
<p class="title is-1 is-uppercase">{{ .Title }}</p> <p class="title is-1 is-uppercase">{{ .Title }}</p>
{{ with .Params.subtitle }} {{ with .Params.subtitle }}
<p class="subtitle is-2">{{ . }}</p> <p class="subtitle is-2">{{ . }}</p>
{{ end }} {{ end }}
{{ with .Params.categories }}
<div class="tags colums is-centered is-rounded">
{{ range . }}
<span class="tag is-large mx-2"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
{{ end }}
</div> </div>
{{ end }}
<!-- Words and date stuff makes sens only for blog posts, not other pages --> <!-- Words and date stuff makes sens only for blog posts, not other pages -->
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}} {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
<aside> <div class="hero-foot mb-5 mx-5">
<div> <div class="level subtitle is-5">
<section> <div class="level-left">
<time class="post-date" datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}"> <div class="level-item has-text-left">
Article publié le {{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }} (dernière modification le {{ .Lastmod.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Lastmod.Month) }} <time class="" datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
{{ .Lastmod.Year }}) <p class="mb-2">📅&nbsp;&nbsp;Article publié le {{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</p>
<p>✏️&nbsp;&nbsp;Dernière modification le {{ .Lastmod.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</p>
</time> </time>
<h4>{{ .FuzzyWordCount }} mots </h4>
</section>
</div> </div>
</aside> </div>
<div class="level-right">
<div class="level-item has-text-right">
<div>
<p class="mb-2">🕑&nbsp;&nbsp;Environ {{ div .FuzzyWordCount 230 }} minutes de lecture</p>
<p>#{{ .FuzzyWordCount }} mots</p>
</div>
</div>
</div>
</div>
</div>
{{ end }} {{ end }}
</div>
</section> </section>
</header> </header>