website/layouts/_default/single.html

135 lines
4.9 KiB
HTML
Raw Normal View History

2023-06-13 20:13:00 +02:00
{{ define "head" }}
<meta name="description" content="{{ .Params.description }}">
<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/single.css">
<!-- fontawesome -->
<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>
{{ end }}
{{ define "title" }}
{{.Title }} | {{ .Site.Title }}
{{ end }}
{{ define "main" }}
<section id="single">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-12 col-md-12 col-lg-9">
<div class="pr-lg-4">
<div class="title mb-5">
<h1 class="text-center mb-4">{{ .Title }}</h1>
<div class="text-center">
{{ .Params.author }}
<small>|</small>
{{ .Date.Format (.Site.Params.datesFormat.article | default "Jan 2, 2006") }}
{{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
<span id="readingTime">
{{ .Site.Params.singlePages.readTime.content | default "min read" }}
</span>
{{ end }}
</div>
</div>
{{ if .Params.image }}
<div class="featured-image">
<img class="img-fluid" src="{{ .Params.image }}" alt="{{ .Title }}">
</div>
{{ end }}
<article class="page-content p-2">
{{ .Content | emojify }}
</article>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="sticky-sidebar">
{{ if .Params.toc | default true}}
<aside class="toc">
<h5>
{{ .Site.Params.terms.toc | default "Table Of Contents" }}
</h5>
<div class="toc-content">
{{.TableOfContents}}
</div>
</aside>
{{ end }}
{{ if .Params.tags }}
<aside class="tags">
<h5>{{ .Site.Params.terms.tags | default "Tags" }}</h5>
<ul class="tags-ul list-unstyled list-inline">
{{range .Params.tags}}
<li class="list-inline-item"><a href="{{`tags` | absURL}}/{{.| urlize}}" target="_blank">{{.}}</a></li>
{{end}}
</ul>
</aside>
{{end}}
{{ if .Params.socialShare | default true }}
<aside class="social">
<h5>{{ .Site.Params.terms.social | default "Social" }}</h5>
<div class="social-content">
<ul class="list-inline">
<li class="list-inline-item text-center">
<a target="_blank" href="https://twitter.com/share?text={{ .Title }}&url={{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item text-center">
<a target="_blank" href="https://api.whatsapp.com/send?text={{ .Title }}: {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
<i class="fab fa-whatsapp"></i>
</a>
</li>
<li class="list-inline-item text-center">
<a target="_blank" href='mailto:?subject={{ .Title }}&amp;body={{ .Site.Params.terms.emailText | default "Check out this site" }} {{ .Site.Params.hostName }}{{ .Permalink | absURL }}'>
<i class="fa fa-envelope"></i>
</a>
</li>
</ul>
</div>
</aside>
{{ end }}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-9 p-4">
{{ template "_internal/disqus.html" . }}
</div>
</div>
</div>
<button class="p-2 px-3" onclick="topFunction()" id="topScroll">
<i class="fas fa-angle-up"></i>
</button>
</section>
{{ if or (.Site.Params.singlePages.scrollprogress.enable | default true) (.Params.enableScrollProgress) }}
<div class="progress">
<div id="scroll-progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<Script src="{{.Site.Params.staticPath}}/js/scrollProgressBar.js"></script>
{{ end }}
<script>
var topScroll = document.getElementById("topScroll");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topScroll.style.display = "block";
} else {
topScroll.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
{{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
<script src="{{.Site.Params.staticPath}}/js/readingTime.js"></script>
{{end}}
{{ end }}