Hexo-NexT侧栏添加霓虹灯时钟
摸鱼怪今天就来总结一下如何在Hexo-NexT侧栏添加霓虹灯时钟,我选用的是Gemini主题,添加后的效果如同个人博客的主页侧栏。该时钟是由js获取本地时间信息,svg实现动态霓虹灯文字时钟特效。演示效果查看:┏ (゜ω゜)=☞。
-
在/themes/next/layout/_custom/ 目录下,打开sidebar.swig文件,添加如下内容:
<div> <svg> <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-1"></text> <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-2"></text> <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-3"></text> <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-4"></text> </svg> </div> <script> function showtime(){ var noatime = new Date(); var h = noatime.getHours(), m = noatime.getMinutes(), s = noatime.getSeconds(); h=checktime(h); m=checktime(m); s=checktime(s); return h+":"+m+":"+s; } function checktime(x){ if(x<10){ x="0"+x; } return x; } var div1=document.getElementsByTagName("text"); setInterval(function(){ for (var i in div1){ div1[i].innerHTML=showtime(); } },1000); </script>
-
/themes/next/source/css/_custom/目录下,打开custom.styl文件,添加如下内容:
.words{ font-size: 50px; font-weight: bold; text-transform: uppercase; fill: none; stroke-width: 3px; stroke-dasharray: 35,125; animation-name: drawing; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; } .words-1{ stroke: deepskyblue; text-shadow: 0 0 15px deepskyblue; animation-delay: -1.5s; } .words-2{ stroke: lightseagreen; text-shadow: 0 0 15px lightseagreen; animation-delay: -3s; } .words-3{ stroke: orange; text-shadow: 0 0 15px orange; animation-delay: -4.5s; } .words-4{ stroke: purple; text-shadow: 0 0 15px purple; animation-delay: -6s; } @keyframes drawing { 100%{ stroke-dashoffset: -160 } }
然后大家可以通过hexo s命令本地运行一下查看一下效果了。目前,好像next7.2版本之后就移除了_custom文件,大家可以去我的另一篇博客对NexT版本进行修改(总结不全还请见谅):