发现一个有趣的玩意,我把它放在了“About”页面,感觉在使用hugo blog一样,先记录一下。
1,在需要的地方,放上以下代码
<div style="display:flex"><div id="window" class="window-c"><div id="title-bar" class="title-bar-c"><span id="close"></span><span id="min"></span><span id="max"></span><strong id="tilte-title"> About me </strong></div><div id="show-board" class="show-board-c">$ ~/# hello world!<br>$ ~/# Welcome to my hugo blog!<br>$ ~/# 人生除了生死<br>$ ~/# 其它都是擦伤<br>$ ~/# 睡前原谅一切<br>$ ~/# 醒来不谈过往<br>$ ~/# 姓名: 大峰<br>$ ~/# 籍贯: Wuxi, Jiangsu, China<br>$ ~/# 邮箱: It's a secret.<br>$ ~/# 网站: illl.xyz<br>$ ~/# 其他: ××××××<br>$ ~/# <br>$ ~/# And I am so glad to see you!<br>$ ~/# One more thing......<br>$ ~/# Exit<br>$ ~/# <span id="cur"></span></div></div></div><script>!function(e,n){"function"==typeof define&&define.amd?define([],n):e.Printer=n()}(this,function(e){var n,r,t,d,u={printer:{version:"0.0.1"}},i="",c={speed:65,selector:"canvas",startIndex:0,endIndex:0,hasCur:!0,curId:"cur",curStr:"_",curStyle:"font-weight: bold;",curSpeed:100,lnStr:""},o="";function s(){r.innerHTML+='<span id="'+c.curId+'" style="'+c.curStyle+'">'+c.curStr+"</span>",n=setTimeout(s,1.5*c.speed)}function a(){t.innerHTML=d?c.curStr:"",d=!d}return u.init=function(e,n){for(var t in i=e,n)c[t]=n[t];return r=document.getElementById(c.selector),c.startIndex,c.endIndex=0==c.endIndex?i.length:c.endIndex,c.hasCur&&s(),this},u.print=function(){for(var e=0;e<i.length;e++)!function(e){setTimeout(function(){"\n"===i.charAt(e)?o+="<br>"+c.lnStr:o+=i.charAt(e),r.innerHTML=c.lnStr+o},c.speed*(e+1))}(e);setTimeout(function(){var e;c.hasCur&&((e=document.createElement("span")).id=c.curId,r.appendChild(e),t=document.getElementById(c.curId),clearTimeout(n),setInterval(a,c.curSpeed))},c.speed*i.length)},u})</script><script>var str=" hello world!\n";str+=" Welcome to my hugo blog!\n",str+=" 人生除了生死\n",str+=" 其它都是擦伤\n",str+=" 睡前原谅一切\n",str+=" 醒来不谈过往\n",str+=" 姓名: 大峰\n",str+=" 籍贯: Wuxi, Jiangsu, China\n",str+=" 邮箱: It's a secret.\n",str+=" 网站: illl.xyz\n",str+=" 其他: ××××××\n",str+=" \n",str+=" And I am so glad to see you!\n",str+=" One more thing......\n",str+="Exit\n",Printer.init(str,{selector:"show-board",lnStr:"$ ~/# "}).print()</script>
2,在CSS中添加
#show-board {border-radius: 0 0 5px 5px; width: 740px; height: 480px; background-color: #333; color: #eee; padding: 10px; font-family: MMTsmall,Consolas,serif;}
3,hugo即可
<h11 style=”margin: 10px auto;font-size: 1.1em;background-color: #777;display: block;padding: 10px;border-radius: 3px;”><div style=”display: block;color: #faf7f5;”><div id=”window” class=”window-c”><div id=”title-bar” class=”title-bar-c”></div><div id=”show-board” class=”show-board-c”>$ 今日木工结束工作/昨晚购买1个方太集成灶/Rss阅读器推荐Fluent Reader<span id=”cur”>_</span></div></div></div><script>!function(e,n){“function”==typeof define&&define.amd?define([],n):e.Printer=n()}(this,function(e){var n,r,t,d,u={printer:{version:”0.0.1″}},i=””,c={speed:65,selector:”canvas”,startIndex:0,endIndex:0,hasCur:!0,curId:”cur”,curStr:”_”,curStyle:”font-weight: bold;”,curSpeed:100,lnStr:””},o=””;function s(){r.innerHTML+='<span id=”‘+c.curId+'” style=”‘+c.curStyle+'”>’+c.curStr+”</span>”,n=setTimeout(s,1.5*c.speed)}function a(){t.innerHTML=d?c.curStr:””,d=!d}return u.init=function(e,n){for(var t in i=e,n)c[t]=n[t];return r=document.getElementById(c.selector),c.startIndex,c.endIndex=0==c.endIndex?i.length:c.endIndex,c.hasCur&&s(),this},u.print=function(){for(var e=0;e<i.length;e++)!function(e){setTimeout(function(){“\n”===i.charAt(e)?o+=”<br>”+c.lnStr:o+=i.charAt(e),r.innerHTML=c.lnStr+o},c.speed*(e+1))}(e);setTimeout(function(){var e;c.hasCur&&((e=document.createElement(“span”)).id=c.curId,r.appendChild(e),t=document.getElementById(c.curId),clearTimeout(n),setInterval(a,c.curSpeed))},c.speed*i.length)},u})</script><script>var str=”$ 今日木工结束工作/昨晚购买1个方太集成灶/Rss阅读器推荐Fluent Reader”;Printer.init(str,{selector:”show-board”,lnStr:””}).print()</script><a style=”color: #999;” href=”https://www.illl.xyz/biji/” rel=”noopener”><span class=”more” style=”position: relative;float: right;margin-top: -23px;color: #faf7f5;”>…</span></a></h11>