Blog 折腾记（二） | Trace's Blog

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

增加顶部阅读进度条

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分
最后更新: 2023年10月22日 - 15时06分
版权声明: 本站文章均采用CC BY-NC-SA 4.0协议进行许可。转载请注明出处！