fukunee/Hugo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add typewriter effect for poet front matter on single pages

Browse Source
This commit is contained in:
fukunee
2026-05-25 00:45:44 +08:00
parent 3285a6ea46
commit 2ffd2e66c8
2 changed files with 94 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/single.html
+92 -18
View File
@@ -1,21 +1,95 @@
{{ define "main" }}
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
{{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
<br class="hx:mt-1.5 hx:text-sm" />
{{ if .Title }}
<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>
<div class="hx:mb-16"></div>
{{ end }}
<div class="content">
{{ .Content }}
</div>
<div class="hx:mt-16"></div>
{{ partial "components/comments.html" . }}
</main>
<div class="hx:mx-auto hx:flex hextra-max-page-width">
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true
"displayPlaceholder" true) }} {{ partial "toc.html" . }}
<article
class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]"
>
<main
id="content"
class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12"
>
{{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
<br class="hx:mt-1.5 hx:text-sm" />
{{ if .Title }}
<h1
class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100"
>
{{ .Title }}
</h1>
<div class="hx:mb-16"></div>
{{ end }}
<div class="content">
{{ .Content }} {{- with .Params.poet }}
<div
id="typewriter-box"
style="
opacity: 0;
transition: opacity 0.6s;
margin-top: 1.5em;
"
>
<p id="typewriter-text"></p>
</div>
<script>
(function () {
var all = `{{ . }}`;
var i = 0,
del = false,
dc = 0;
var te = document.getElementById("typewriter-text");
var box = document.getElementById("typewriter-box");
if (!te || !box) return;
var obs = new IntersectionObserver(
function (e) {
if (e[0].isIntersecting) {
box.style.opacity = "1";
obs.disconnect();
go();
}
},
{ rootMargin: "120px" },
);
obs.observe(box);
function go() {
setTimeout(
function () {
if (
!del &&
Math.random() < 0.1 &&
i > 8 &&
all.charAt(i - 1) !== "\n"
) {
del = true;
dc = Math.floor(Math.random() * 4) + 1;
}
if (del) {
i = Math.max(0, i - 1);
dc--;
if (
dc <= 0 ||
i === 0 ||
all.charAt(i - 1) === "\n"
)
del = false;
} else {
if (i < all.length) i++;
}
te.textContent = all.substring(0, i);
if (i < all.length || del) go();
},
del
? 55 + Math.random() * 30
: 70 + Math.random() * 100,
);
}
})();
</script>
{{- end }}
</div>
<div class="hx:mt-16"></div>
{{ partial "components/comments.html" . }}
</main>
</article>
</div>
</div>
{{ end }}