feat: add article.readingTime param, and improve style

This commit is contained in:
Jimmy Cai 2021-07-23 09:34:38 +00:00 committed by GitHub
parent 683f1b4807
commit 85b81e5c81
3 changed files with 28 additions and 14 deletions

View File

@ -95,7 +95,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
gap: 15px;
margin-top: 10px; margin-top: 10px;
flex-wrap: wrap;
svg { svg {
vertical-align: middle; vertical-align: middle;
@ -108,6 +110,11 @@
time { time {
font-size: 1.4rem; font-size: 1.4rem;
} }
& > div {
display: inline-flex;
align-items: center;
}
} }
.article-category, .article-category,

View File

@ -44,6 +44,7 @@ params:
article: article:
math: false math: false
toc: true toc: true
readingTime: true
license: license:
enabled: true enabled: true
default: Licensed under CC BY-NC-SA 4.0 default: Licensed under CC BY-NC-SA 4.0

View File

@ -2,8 +2,7 @@
{{ if .Params.categories }} {{ if .Params.categories }}
<header class="article-category"> <header class="article-category">
{{ range (.GetTerms "categories") }} {{ range (.GetTerms "categories") }}
<a href="{{ .RelPermalink }}" <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
{{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};" {{ end }}>
{{ .LinkTitle }} {{ .LinkTitle }}
</a> </a>
{{ end }} {{ end }}
@ -22,16 +21,23 @@
</h3> </h3>
{{ end }} {{ end }}
{{- if not .Date.IsZero -}}
<footer class="article-time"> <footer class="article-time">
{{ if not .Date.IsZero }}
<div>
{{ partial "helper/icon" "date" }} {{ partial "helper/icon" "date" }}
<time class="article-time--published"> <time class="article-time--published">
{{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}&emsp; {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
</time> </time>
</div>
{{ end }}
{{ if .Site.Params.article.readingTime }}
<div>
{{ partial "helper/icon" "clock" }} {{ partial "helper/icon" "clock" }}
<time class="article-time--published"> <time class="article-time--published">
{{ .ReadingTime }} min read {{ .ReadingTime }} min read
</time> </time>
</footer> </div>
{{- end -}} {{ end }}
</footer>
</div> </div>