给hexo增加返回顶部链接

今天下午deacon给一个页面增加了返回顶部的链接,图片是一个超人,点击后感觉超人向上飞起,上线前给我试玩,点了几次,非常有趣。

之前一直想着给自己博客也增加一个返回顶部的链接,想做成豆瓣小组话题页面的那个返回跳转,简洁简单,下拉之后才出现,回到顶部又消失。

我使用的是hexo默认主题light,因此,当部署hexo之后,给hexo添加这么一个链接也是非常简单,主要是使用hexo的alignleftalignright这2个css属性,大概做了实现:

  1. 在blog目录下的themes/light/layout/_partial/增加一个新的ejs文件,比如为totop.ejs:

     <div class="alignright">
     <a href="#" id="returnTop" 
          style="text-decoration:none; bottom:-200px; position:fixed; text-align:center; width:14px; margin:8px;"
          onclick="javascript:$('html, body').animate({scrollTop: 0}, {queue:false, duration:10});">↑回顶部</a>
     </div>
    
     <script type="text/javascript">
     $(function(){
         $(window).scroll(function () {
             if ($(document).scrollTop() >= 100) {
                 $('#returnTop').animate({bottom: "105px"}, { queue: false, duration: 10 }); 
             } else {
                 $('#returnTop').animate({bottom: "-200px"}, { queue: false, duration: 10 }); 
             }   
         }); 
     }); 
     </script>
    
  2. 修改themes/light/layout/_partial/article.ejs文件,在最顶部增加totop.ejs的包含:

     <%- partial('totop') %>
    

注意,这里totop.ejs文件要求跟article.ejs在相同目录下,这是相对路径的用法。

可以看出,换了其他主题之后,又得重复修改,目前这也是感觉hexo不够合理的一点。



– EOF –

Categories: hexo
Tags: hexo