Blog 折腾记(二)

Author Avatar
Travon 2月 20, 2019
  • 在其它设备中阅读本文章

本着不折腾不舒服的精神,对博客进行个性化,丰富功能。

增加顶部阅读进度条

Material主题本身不支持文章顶部阅读进度条,网上查阅资料也大多是Next主题相关的介绍,
所以决定自己动手给Blog加上这个功能。其实这个功能加入并不复杂,
参考网上的方法也已经搞定,但是为了跟主题代码逻辑保持一致,决定重新把代码整理一下并记录。

  1. 首先在_config.yml中增加top_scroll_bar设置来控制进度条的有无、宽度、颜色
    # top scroll bar
    #   width: the width of scroll bar
    #   color: the color of scroll bar
    top_scroll_bar:
    enable: true
    width: 3px
    color: "#6d6d6d"
    
  2. \layout\_widget\里新建top_scroll_bar.ejs,内容如下:
    <!-- top scroll bar -->
    <style type="text/css">
     .top-scroll-bar {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
     display: none;
     width: 0;
     height: <%= theme.top_scroll_bar.width %>;
     background: <%= theme.top_scroll_bar.color %>;
     }
    </style>
    <div class="top-scroll-bar">
    <script type="text/javascript">
    $(document).ready(function () {
    $(window).scroll(function(){
     $(".top-scroll-bar").attr("style", "width: " + ($(this).scrollTop() / ($(document).height() - $(this).height()) * 100) + "%; display: block;");
    });
    });
    </script>
    
  3. 然后在\layout\_partial\head.ejs里加入调用top_scroll_bar.ejs的代码
     <!-- Top Scroll Bar -->
     <% if((theme.top_scroll_bar.enable) && (is_post())){ %>
         <%- partial('_widget/top_scroll_bar') %>
     <% } %>
    
    效果如本博客所示。

本文标题: Blog 折腾记(二)
原始链接: https://oyeblog.com/2019/hexo_blog_personalize_2/
发布时间: 2019年02月20日 - 20时06分
最后更新: 2019年02月20日 - 21时25分
版权声明: 本站文章均采用CC BY-NC-SA 4.0协议进行许可。转载请注明出处!