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

Replace typewriter cursor with CSS blink animation for poet field

Browse Source
This commit is contained in:
fukunee
2026-05-14 02:11:50 +08:00
parent 680f10b66a
commit e965204401
3 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/blog/single.html
+24 -25
View File
@@ -42,33 +42,32 @@
</div>
<div class="content">
{{ .Content }}
</div>
<div class="hx:mt-16 hx:py-8 hx:px-4 hx:border-t hx:border-neutral-200 hx:dark:border-neutral-800" id="typewriter-box" style="opacity:0;transition:opacity .6s">
<p class="hx:text-base hx:leading-8 hx:text-gray-500 hx:dark:text-gray-400 hx:whitespace-pre-wrap">
<span id="typewriter-text"></span><span id="typewriter-cursor" style="display:inline-block;width:2px;height:1.1em;background:#999;vertical-align:middle;margin-left:1px;animation:tk-blink .8s step-end infinite"></span>
</p>
{{- with .Params.poet }}
<div id="typewriter-box" style="opacity:0;transition:opacity .6s">
<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>
<script>
(function(){
var p=["驾驶教练机拉杆起飞的那一刻","宇治城的小溪边被斜阳刺痛双眼的那一刻","在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻","我清楚的感受到我是我自己"];
var all="";p.forEach(function(l,i){all+=l;if(i<p.length-1)all+="\n"});
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>
{{- partial "components/last-updated.html" . -}}
{{- if (site.Params.blog.article.displayPagination | default true) -}}