112 lines
3.4 KiB
HTML
112 lines
3.4 KiB
HTML
|
{{ define "title" }}
|
|||
|
|
{{ .Page.Title | plainify }} | {{ .Site.Title }}
|
|||
|
|
{{ end }}
|
|||
|
|
|
|||
|
|
{{ define "main-class" }}--section{{ end }}
|
|||
|
|
|
|||
|
|
{{ define "main-type" }}{{ .Params.mainType }}{{ end }}
|
|||
|
|
|
|||
|
|
{{ define "footer-scripts" }}
|
|||
|
|
<script>
|
|||
|
|
// Source: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
|
|||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|||
|
|
var lazyloadImages;
|
|||
|
|
|
|||
|
|
if ("IntersectionObserver" in window) {
|
|||
|
|
lazyloadImages = document.querySelectorAll(".lazy");
|
|||
|
|
var imageObserver = new IntersectionObserver(function(entries, observer) {
|
|||
|
|
entries.forEach(function(entry) {
|
|||
|
|
if (entry.isIntersecting) {
|
|||
|
|
console.log("Ding");
|
|||
|
|
var image = entry.target;
|
|||
|
|
image.classList.remove("lazy");
|
|||
|
|
imageObserver.unobserve(image);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
lazyloadImages.forEach(function(image) {
|
|||
|
|
imageObserver.observe(image);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
var lazyloadThrottleTimeout;
|
|||
|
|
lazyloadImages = document.querySelectorAll(".lazy");
|
|||
|
|
|
|||
|
|
function lazyload () {
|
|||
|
|
if(lazyloadThrottleTimeout) {
|
|||
|
|
clearTimeout(lazyloadThrottleTimeout);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lazyloadThrottleTimeout = setTimeout(function() {
|
|||
|
|
var scrollTop = window.pageYOffset;
|
|||
|
|
lazyloadImages.forEach(function(img) {
|
|||
|
|
if(img.offsetTop < (window.innerHeight + scrollTop)) {
|
|||
|
|
img.src = img.dataset.src;
|
|||
|
|
img.classList.remove('lazy');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if(lazyloadImages.length == 0) {
|
|||
|
|
document.removeEventListener("scroll", lazyload);
|
|||
|
|
window.removeEventListener("resize", lazyload);
|
|||
|
|
window.removeEventListener("orientationChange", lazyload);
|
|||
|
|
}
|
|||
|
|
}, 20);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener("scroll", lazyload);
|
|||
|
|
window.addEventListener("resize", lazyload);
|
|||
|
|
window.addEventListener("orientationChange", lazyload);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
{{ end }}
|
|||
|
|
|
|||
|
|
{{ define "main-header" }}
|
|||
|
|
<header class="site-content__header">
|
|||
|
|
<h1 class="page-title">{{ .Title | safeHTML }}
|
|||
|
|
{{ if eq .Type "blog" }}
|
|||
|
|
{{ with .GetPage "blog/posts" }}
|
|||
|
|
{{ range .AlternativeOutputFormats -}}
|
|||
|
|
<a href="{{ .RelPermalink }}">
|
|||
|
|
<img class="feed-icon" src="{{ $.Site.Params.feedIcon }}">
|
|||
|
|
</a>
|
|||
|
|
{{ end }}
|
|||
|
|
{{ end }}
|
|||
|
|
{{ else }}
|
|||
|
|
{{ range .AlternativeOutputFormats -}}
|
|||
|
|
<a href="{{ .RelPermalink }}">
|
|||
|
|
<img class="feed-icon" src="{{ $.Site.Params.feedIcon }}">
|
|||
|
|
</a>
|
|||
|
|
{{ end }}
|
|||
|
|
{{ end }}
|
|||
|
|
</h1>
|
|||
|
|
{{ .Content }}
|
|||
|
|
|
|||
|
|
<nav class="page-header__minor-links">
|
|||
|
|
<ul class="minor-links__categories">
|
|||
|
|
<li><a href="/series"><h2>Series’</h2></a> <p>({{ len .Site.Taxonomies.series }})</p></li>
|
|||
|
|
{{ range .Site.Taxonomies.categories }}
|
|||
|
|
<li><a href="{{ .Page.RelPermalink }}"><h2>{{ .Page.Title | safeHTML }}</h2></a> <p>({{ len . }})</p></li>
|
|||
|
|
{{ end }}
|
|||
|
|
</ul>
|
|||
|
|
{{ if eq .Type "blog" }}
|
|||
|
|
{{ with .GetPage "blog/posts" }}
|
|||
|
|
{{ partial "years-list.html" . }}
|
|||
|
|
{{ end }}
|
|||
|
|
{{ else }}
|
|||
|
|
{{ partial "years-list.html" . }}
|
|||
|
|
{{ end }}
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
{{ end }}
|
|||
|
|
|
|||
|
|
{{ define "main-body" }}
|
|||
|
|
{{ if eq .Type "blog" }}
|
|||
|
|
{{ with .GetPage "blog/posts" }}
|
|||
|
|
{{ partial "items-grid.html" . }}
|
|||
|
|
{{ end }}
|
|||
|
|
{{ else }}
|
|||
|
|
{{ partial "items-grid.html" . }}
|
|||
|
|
{{ end }}
|
|||
|
|
{{ end }}
|