Hexo-NexT侧栏添加霓虹灯时钟

Hexo-NexT侧栏添加霓虹灯时钟

摸鱼怪今天就来总结一下如何在Hexo-NexT侧栏添加霓虹灯时钟，我选用的是Gemini主题，添加后的效果如同个人博客的主页侧栏。该时钟是由js获取本地时间信息，svg实现动态霓虹灯文字时钟特效。演示效果查看：┏ (゜ω゜)=☞。

1. 在/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>
   

2. /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版本进行修改(总结不全还请见谅)：

   Hexo博客搭建踩过的坑