共计 5443 个字符，预计需要花费 14 分钟才能阅读完成。
本章集中介绍四个重要的小功能：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏。
这几个功能与 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>
代码分成 html、javascript、css 三部分。
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 后面引入。
效果如下：
点击按钮后，页面滚回到顶部。
矢量图标
与老版本不同，Bootstrap 4 中也没有自带图标。作为补偿，官方也推荐了几款强大且免费的第三方矢量图标提供商。我比较喜欢的是 Font Awesome，提供 1500+ 免费图标（以及 5000+ 付费图标），完全够用了。各种你想得到想不到的图标都有：
用法也很简单，你甚至不用将其下载到本地（当然想下载也可以）。根据官网的提示，直接在 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：
点击图标进去后就能看到它的标签名称：
将此标签名称复制到你的网页中，图标就渲染出来了。
很神奇的是，矢量图标跟普通的字体是完全类似的，你可以通过 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}}
</span>
<span>
<i class=”fas fa-comments” style=”color: yellowgreen;”></i>
<!– 修改为评论的计数 –>
{{article.comments.count}}
</span>
<span>
<i class=”fas fa-clock” style=”color: pink;”></i>
{{article.created|date:’Y-m-d’}}
</span>
</p>
…
看看效果：
好玩吧。读者朋友慢慢挑选心仪的图标，到自己的博客中吧。
相比写代码来说，这是个相当愉悦的过程。
页脚沉底
刚才做浮动按钮时，取消了页脚固定在底部的 fixed-bottom。
按钮倒是没被遮盖了，但又冒出来另一个烦人的问题，请看下图：
当页面内容较少时，页脚下方居然空出来一大块地方，太丑了。
《Sticky Footer, Five Ways》罗列了 5 种方法解决这个问题，有兴趣的同学可深入了解。
需要修改 base.html 和 footer.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 的空白罢了。
刷新页面：
舒服了。
随着项目逐渐增大，HTML、JavaScript、CSS 交织在一起，也更加混乱。虽然教程没有把这三种类型的代码分离开，但是你应该考虑这样做。
粘性侧边栏
目前教程将文章目录放置在文章的右侧，这就是相当于是个侧边栏。问题是当用户向下阅读文章时，目录却不会固定在页面中，而是几下就翻得没影了，影响体验。
粘性侧边栏就是来解决这个问题的。当页面向下滚动时，粘性侧边栏会灵活的固定在屏幕中，保证用户在任何位置都可以看到侧边栏中的内容。
具体工作模式如下图：
考虑到侧边栏有可能会很长，因此设计出足够“聪明”的粘性侧边栏也不那么容易。教程将用到 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 程序员”这个头衔所束缚，勇敢去学吧。谁让你已经上了贼船呢。
有疑问请在杜赛的个人网站留言，我会尽快回复。
或 Email 私信我：dusaiphoto@foxmail.com
项目完整代码：Django_blog_tutorial
