Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

本章集中介绍四个重要的小功能:回到顶部浮动按钮矢量图标页脚沉底粘性侧边栏

这几个功能与Django基本没啥关系,更多的是前端知识,但是对博客网站都很重要,问的读者也比较多,因此也集中讲一下好了。

回到顶部浮动按钮

当用户拜读完你的博文后,可能想回到文章开头重新阅读,或者审视其中的某些内容。如果文章内容较多,不停滑动滚轮回页面顶部未免有点太让人烦躁了。

一种解决办法是增加一个回到顶部的浮动按钮。当页面向下滚动到某个位置后,按钮就呈现在页面右下角;点击按钮,页面就回到顶部。这个功能 Bootstrap 4 似乎没有提供,但也不复杂,就自己用 JavaScript 和 CSS 写吧。

templates目录新建back_to_top_func.html文件,写入以下代码:

templates/back_to_top_func.html

<!-- 参考了 鹦鹉 的代码,在此致谢 -->
<!-- https://ezbox.idv.tw/131/back-to-top-button-without-images -->

<button type="button" id="BackTop" class="toTop-arrow" style="z-index: 100;"></button>

<script>
    // 向上滚动的函数
    $(function () {
        $('#BackTop').click(function () {
            $('html,body').animate({scrollTop: 0}, 500);
        });
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('#BackTop').fadeIn(300);
            } else {
                $('#BackTop').stop().fadeOut(300);
            }
        }).scroll();
    });
</script>

<style>
    /* 按钮边框的大小、位置、样式 */
    .toTop-arrow {
        width: 3.5rem;
        height: 3.5rem;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 33%;
        opacity: 0.7;
        background: black;
        cursor: pointer;
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        display: none;
    }

    /* 绘制按钮中的向上箭头 */
    .toTop-arrow::before, .toTop-arrow::after {
        width: 31px;
        height: 7px;
        border-radius: 3px;
        background: orange;
        position: absolute;
        content: "";
    }

    .toTop-arrow::before {
        transform: rotate(-45deg) translate(0, -50%);
        left: 0.4rem;
    }

    .toTop-arrow::after {
        transform: rotate(45deg) translate(0, -50%);
        right: 0.4rem;
    }

    /* 取消点击按钮时的聚焦 */
    .toTop-arrow:focus {
        outline: none;
    }
</style>

代码分成htmljavascriptcss三部分。

HTML部分只有一行,用button标签表示了浮动按钮的容器。

JavaScript部分主要用到了Jquery的语法。页面加载完成后开始监听两个事件:

  • 当用户点击浮动按钮时,将页面滚动到顶部
  • 当页面滚动时,根据页面距离顶部的距离,决定按钮显示或隐藏

CSS部分最长但也很简单,主要定义了按钮的位置、大小、图案等样式。读者可以试着、改动、删除部分代码,看看按钮形态会怎样变化。

核心代码就写好了。有点小瑕疵的是前面在footer.html中定义了class="fixed-bottom",这个属性的显示层级很高,会将浮动按钮给覆盖掉。因此删除templates/footer.html中的fixed-bottom属性:

templates/footer.html

...
<!-- 删除了 fixed-bottom 属性 -->
<footer class="py-3 bg-dark">
    ...
</footer>
z-index这个css样式决定了页面中容器的显示顺序,数值越大则显示优先级越高。

之所以fixed-bottom会覆盖掉浮动按钮,就是因为它将z-index设置成了一个很大的数值。

因为我们想在全站都拥有这个按钮,所以将刚写好的模块引用到base.html中:

templates/base.html

...

<body>
    ...

    <!-- jquery.js -->
    <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
    ...
    <!-- 在jquery后面引入 -->
    {% include 'back_to_top_func.html' %}

</body>
...

注意模块用到了Jquery,因此要在Jquery后面引入。

效果如下:

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

点击按钮后,页面滚回到顶部。

矢量图标

与老版本不同,Bootstrap 4 中也没有自带图标。作为补偿,官方也推荐了几款强大且免费的第三方矢量图标提供商。我比较喜欢的是Font Awesome,提供1500+免费图标(以及5000+付费图标),完全够用了。各种你想得到想不到的图标都有:

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

用法也很简单,你甚至不用将其下载到本地(当然想下载也可以)。根据官网的提示,直接在base.html中引入:

templates/base.html

...
<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
      crossorigin="anonymous"
>
...

然后在页面中插入某个图标的标签就可以用了。

首先在官网图标库搜索想要的图标,比如eye

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

点击图标进去后就能看到它的标签名称

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

将此标签名称复制到你的网页中,图标就渲染出来了。

很神奇的是,矢量图标跟普通的字体是完全类似的,你可以通过CSS定义图标的颜色(color)、大小(font-size)等样式。

尝试一下。将图标代码添加到templates/article/list.html中的列表循环:

templates/article/list.html

...
<!-- 注脚 -->
<p>
    <!-- 附加信息,增加了图标 -->
    <span>
        <i class="fas fa-eye" style="color: lightskyblue;"></i>
        {{ article.total_views }}&nbsp;&nbsp;&nbsp;
    </span>
    <span>
        <i class="fas fa-comments" style="color: yellowgreen;"></i>
        <!-- 修改为评论的计数 -->
        {{ article.comments.count }}&nbsp;&nbsp;&nbsp;
    </span>
    <span>
        <i class="fas fa-clock" style="color: pink;"></i>
        {{ article.created|date:'Y-m-d' }}
    </span>
</p>
...

看看效果:

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

好玩吧。读者朋友慢慢挑选心仪的图标,到自己的博客中吧。

相比写代码来说,这是个相当愉悦的过程。

页脚沉底

刚才做浮动按钮时,取消了页脚固定在底部的fixed-bottom

按钮倒是没被遮盖了,但又冒出来另一个烦人的问题,请看下图:

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

当页面内容较少时,页脚下方居然空出来一大块地方,太丑了。

《Sticky Footer, Five Ways》罗列了5种方法解决这个问题,有兴趣的同学可深入了解。

需要修改base.htmlfooter.html两个文件。先贴改动代码:

templates/base.html

...
<body>
    {% include 'header.html' %}
    
    <!-- 新增两个 div 容器 -->
    <div id="wrapper">
        {% block content %}{% endblock content %}
        <div id="push"></div>
    </div>

    {% include 'footer.html' %}

    ...
    
    <!-- 增加样式 -->
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%;
            margin-bottom: -60px;
        }

        #footer,
        #push {
            height: 60px;
        }
    </style>
    
</body>
...
templates/footer.html

...
<!-- 增加 id="footer" 属性 -->
<footer ... id="footer">
    ...
</footer>

代码通过CSS样式控制页面尺寸不小于屏幕的高度,以及页脚的高度为60px。不太好理解的主要有两个地方:

  • #push容器留出一段与页脚等高的空隙,避免正文内容与页脚重叠。
  • #wrapper容器的底部有一个负边距,作用是给页脚容器让出位置。这个负边距你不设置也可以,无非就是底部多出高度为60px的空白罢了。

刷新页面:

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

舒服了。

随着项目逐渐增大,HTML、JavaScript、CSS交织在一起,也更加混乱。

虽然教程没有把这三种类型的代码分离开,但是你应该考虑这样做。

粘性侧边栏

目前教程将文章目录放置在文章的右侧,这就是相当于是个侧边栏。问题是当用户向下阅读文章时,目录却不会固定在页面中,而是几下就翻得没影了,影响体验。

粘性侧边栏就是来解决这个问题的。当页面向下滚动时,粘性侧边栏会灵活的固定在屏幕中,保证用户在任何位置都可以看到侧边栏中的内容。

具体工作模式如下图:

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

考虑到侧边栏有可能会很长,因此设计出足够“聪明”的粘性侧边栏也不那么容易。教程将用到Abouolia粘性侧边栏插件,强大且小巧,读者可以去官方示例感受一下。

插件的GitHub库下载到本地后,因为博客项目已经加载好了Jquery,所以只需要用到dist目录下的jquery.sticky-sidebar.min.js这个文件就可以了。在项目的static目录下新建目录sticky_sidebar,将其粘贴进去:

/static/sticky_sidebar/jquery.sticky-sidebar.min.js

因为只需要在文章详情页面用到,所以在详情页中引入模块就够用了:

templates/article/detail.html

...
<!-- 目录 -->
<div ... id="sidebar" class="sidebar">
    <div class="sidebar__inner">
        <h4><strong>目录</strong></h4>
        <hr>
        <div>
            {{ toc|safe }}
        </div>
    </div>
</div>

...

<!-- 粘性侧边栏样式 -->
<style>
    .sidebar{
        will-change: min-height;
    }

    .sidebar__inner{
        transform: translate(0, 0);
        transform: translate3d(0, 0, 0);
        will-change: position, transform;
    }
</style>

...

{% block script %}
<!-- 引入粘性侧边栏 -->
<script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
<script type="text/javascript">
    $('#sidebar').stickySidebar({
        topSpacing: 20,
        bottomSpacing: 20,
    });
</script>

...
{% endblock script %}

按照插件的要求,侧边栏套上了两层容器,第一层含有属性id="sidebar" class="sidebar",第二层含有属性class="sidebar__inner"。然后设置样式,引入静态文件并调用插件,没什么好说的,照做就可以了。与前面的章节相同,由于插件需求Jquery,一定要把 JavaScript 语句放到{% block script %}中,否则会报错哦。

插件还有其他可设置的规则,详情见官方文档

刷新页面,不管你怎么滚动页面,目录都显示在屏幕中,并且随着滚轮很自然的上下移动了:

Django搭建个人博客:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

总结

本章学习了回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏四个功能。

就像前面说的,这几个功能跟Django没什么关系,但是既然要想做一个完整的博客网站,就不要抱有幻想。光靠那么一点点Django代码是不可能的,什么知识你都得会一点才行。

读者以后会遇到更加多样的编程工具,一定不要被“Django程序员”这个头衔所束缚,勇敢去学吧。谁让你已经上了贼船呢。


相关推荐