add article header to single.html and add some demo articles
This commit is contained in:
geekifan
@@ -1,16 +1,157 @@
|
||||
{{ define "main" }}
|
||||
<article class="px-1">
|
||||
{{ if or (eq .Layout "page") (eq .Type "tabs") }}
|
||||
{{ $tab_key := .Title | lower }}
|
||||
{{ $title := index (index .Site.Data.locales .Site.Language.Lang).tabs $tab_key | default .Title }}
|
||||
<h1 class="dynamic-title">
|
||||
{{ $title }}
|
||||
</h1>
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
{{ $enable_toc := and (.Params.toc | default .Site.Params.enableTOC) (gt (len .TableOfContents) 100) }}
|
||||
{{ $lang := .Site.Language.Lang }}
|
||||
|
||||
<article class="px-1" data-toc="{{ $enable_toc }}">
|
||||
<header>
|
||||
<h1 data-toc-skip>{{ .Title }}</h1>
|
||||
{{ with .Description }}
|
||||
<p class="post-desc fw-light mb-4">{{ . }}</p>
|
||||
{{ end }}
|
||||
|
||||
<div class="post-meta text-muted">
|
||||
<!-- published date -->
|
||||
<span>
|
||||
{{ i18n "post.posted" }}
|
||||
{{ partial "datetime.html" (dict "date" .Date "tooltip" true "lang" $lang) }}
|
||||
</span>
|
||||
|
||||
<!-- lastmod date -->
|
||||
{{ if and (ne .Lastmod .Date) (.Lastmod) }}
|
||||
<span>
|
||||
{{ i18n "post.updated" }}
|
||||
{{ partial "datetime.html" (dict "date" .Lastmod "tooltip" true "lang" $lang) }}
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.image }}
|
||||
{{ $src := printf "src=\"%s\"" ( .path | default . ) }}
|
||||
{{ $class := "class=\"preview-img" }}
|
||||
{{ if .no_bg }}{{ $class = printf "%s no-bg\"" $class }}{{ else }}{{ $class = printf "%s\"" $class }}{{ end }}
|
||||
{{ $alt := printf "alt=\"%s\"" ( .alt | default "Preview Image" ) }}
|
||||
|
||||
{{ $lqip := "" }}
|
||||
{{ with .lqip }}{{ $lqip = printf "lqip=\"%s\"" . }}{{ end }}
|
||||
|
||||
<div class="mt-3 mb-3">
|
||||
<img {{ $src | safeHTMLAttr }} {{ $class | safeHTMLAttr }} {{ $alt | safeHTMLAttr }} w="1200" h="630" {{ $lqip | safeHTMLAttr }}>
|
||||
{{- with .alt -}}
|
||||
<figcaption class="text-center pt-2 pb-2">{{ . }}</figcaption>
|
||||
{{- end -}}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<!-- author(s) -->
|
||||
<span>
|
||||
{{ $authors := .Params.author | default .Params.authors }}
|
||||
|
||||
{{ i18n "post.written_by" }}
|
||||
|
||||
<em>
|
||||
{{ if $authors }}
|
||||
{{ range $i, $author := $authors }}
|
||||
{{ with $.Site.Data.authors }}
|
||||
{{ with (index . $author) }}
|
||||
{{ if .url }}
|
||||
<a href="{{ .url }}">{{ .name }}</a>
|
||||
{{ else }}
|
||||
{{ .name }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ $author }}
|
||||
{{ end }}
|
||||
{{ if not (eq $i (sub (len $authors) 1)) }}{{ "</em>, <em>" | safeHTML }}{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<a href="{{ index $.Site.Params.Social.links 0 }}">{{ $.Site.Params.Social.name }}</a>
|
||||
{{ end }}
|
||||
</em>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<!-- pageviews -->
|
||||
{{ if and $.Site.Params.pageviews.provider $.Site.Params.analytics (index $.Site.Params.analytics $.Site.Params.pageviews.provider) }}
|
||||
<span>
|
||||
<em id="pageviews">
|
||||
<i class="fas fa-spinner fa-spin small"></i>
|
||||
</em>
|
||||
{{ i18n "post.pageview_measure" }}
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
<!-- read time -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ .Content }}
|
||||
</header>
|
||||
|
||||
{{ if $enable_toc }}
|
||||
<div id="toc-bar" class="d-flex align-items-center justify-content-between invisible">
|
||||
<span class="label text-truncate">{{ .Title }}</span>
|
||||
<button type="button" class="toc-trigger btn me-1">
|
||||
<i class="fa-solid fa-list-ul fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
|
||||
<span class="label ps-2 pe-1">{{ i18n "panel.toc" }}</span>
|
||||
<i class="fa-solid fa-angle-right fa-fw"></i>
|
||||
</button>
|
||||
|
||||
<dialog id="toc-popup" class="p-0">
|
||||
<div class="header d-flex flex-row align-items-center justify-content-between">
|
||||
<div class="label text-truncate py-2 ms-4">{{ .Title }}</div>
|
||||
<button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75">
|
||||
<i class="fas fa-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="toc-popup-content" class="px-4 py-3 pb-4">{{ .TableOfContents }}</div>
|
||||
</dialog>
|
||||
{{ end }}
|
||||
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
<div class="post-tail-wrapper text-muted">
|
||||
<!-- categories -->
|
||||
{{ with .Params.categories }}
|
||||
<div class="post-meta mb-3">
|
||||
<i class="far fa-folder-open fa-fw me-1"></i>
|
||||
{{ range $i, $category := . }}
|
||||
<a href="{{ "/categories/" | relLangURL }}{{ $category | urlize }}/">{{ $category }}</a>
|
||||
{{ if not (eq $i (sub (len $) 1)) }},{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- tags -->
|
||||
{{ with .Params.tags }}
|
||||
<div class="post-tags">
|
||||
<i class="fa fa-tags fa-fw me-1"></i>
|
||||
{{ range . }}
|
||||
<a
|
||||
href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/"
|
||||
class="post-tag no-text-decoration"
|
||||
>
|
||||
{{- . -}}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2">
|
||||
<div class="license-wrapper">
|
||||
{{ with (i18n "copyright.license.template") }}
|
||||
{{ $replacement := printf `<a href="%s">%s</a>` (i18n "copyright.license.link") (i18n "copyright.license.name") }}
|
||||
{{ replace . ":LICENSE_NAME" $replacement | safeHTML }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user