摘要：本章集中介绍四个重要的小功能回到顶部浮动按钮矢量图标页脚沉底和粘性侧边栏。因为我们想在全站都拥有这个按钮，所以将刚写好的模块引用到中在后面引入注意模块用到了，因此要在后面引入。
本章集中介绍四个重要的小功能：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏。
这几个功能与Django基本没啥关系，更多的是前端知识，但是对博客网站都很重要，问的读者也比较多，因此也集中讲一下好了。
回到顶部浮动按钮当用户拜读完你的博文后，可能想回到文章开头重新阅读，或者审视其中的某些内容。如果文章内容较多，不停滑动滚轮回页面顶部未免有点太让人烦躁了。
一种解决办法是增加一个回到顶部的浮动按钮。当页面向下滚动到某个位置后，按钮就呈现在页面右下角；点击按钮，页面就回到顶部。这个功能 Bootstrap 4 似乎没有提供，但也不复杂，就自己用 JavaScript 和 CSS 写吧。
在templates目录新建back_to_top_func.html文件，写入以下代码：
templates/back_to_top_func.html
代码分成html、javascript、css三部分。
HTML部分只有一行，用button标签表示了浮动按钮的容器。
JavaScript部分主要用到了Jquery的语法。页面加载完成后开始监听两个事件：
当用户点击浮动按钮时，将页面滚动到顶部
当页面滚动时，根据页面距离顶部的距离，决定按钮显示或隐藏
CSS部分最长但也很简单，主要定义了按钮的位置、大小、图案等样式。读者可以试着、改动、删除部分代码，看看按钮形态会怎样变化。
核心代码就写好了。有点小瑕疵的是前面在footer.html中定义了class="fixed-bottom"，这个属性的显示层级很高，会将浮动按钮给覆盖掉。因此删除templates/footer.html中的fixed-bottom属性：
templates/footer.html ...
z-index这个css样式决定了页面中容器的显示顺序，数值越大则显示优先级越高。之所以fixed-bottom会覆盖掉浮动按钮，就是因为它将z-index设置成了一个很大的数值。
因为我们想在全站都拥有这个按钮，所以将刚写好的模块引用到base.html中：
templates/base.html
...
...
...
{% include "back_to_top_func.html" %}
...
注意模块用到了Jquery，因此要在Jquery后面引入。
效果如下：
点击按钮后，页面滚回到顶部。
矢量图标与老版本不同，Bootstrap 4 中也没有自带图标。作为补偿，官方也推荐了几款强大且免费的第三方矢量图标提供商。我比较喜欢的是Font Awesome，提供1500+免费图标（以及5000+付费图标），完全够用了。各种你想得到想不到的图标都有：
用法也很简单，你甚至不用将其下载到本地（当然想下载也可以）。根据官网的提示，直接在base.html中引入：
templates/base.html ... ...
然后在页面中插入某个图标的标签就可以用了。
首先在官网图标库搜索想要的图标，比如eye：
点击图标进去后就能看到它的标签名称：
将此标签名称复制到你的网页中，图标就渲染出来了。
很神奇的是，矢量图标跟普通的字体是完全类似的，你可以通过CSS定义图标的颜色（color）、大小（font-size）等样式。
尝试一下。将图标代码添加到templates/article/list.html中的列表循环：
templates/article/list.html ...{{ article.total_views }} {{ article.comments.count }} {{ article.created|date:"Y-m-d" }}
...
看看效果：
好玩吧。读者朋友慢慢挑选心仪的图标，到自己的博客中吧。
相比写代码来说，这是个相当愉悦的过程。
页脚沉底刚才做浮动按钮时，取消了页脚固定在底部的fixed-bottom。
按钮倒是没被遮盖了，但又冒出来另一个烦人的问题，请看下图：
当页面内容较少时，页脚下方居然空出来一大块地方，太丑了。
《Sticky Footer, Five Ways》罗列了5种方法解决这个问题，有兴趣的同学可深入了解。
需要修改base.html和footer.html两个文件。先贴改动代码：
templates/base.html
...
{% include "header.html" %}
{% block content %}{% endblock content %}
{% include "footer.html" %}
...
...
templates/footer.html ...
代码通过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 ... ... ... {% block script %} ... {% endblock script %}
按照插件的要求，侧边栏套上了两层容器，第一层含有属性id="sidebar" class="sidebar"，第二层含有属性class="sidebar__inner"。然后设置样式，引入静态文件并调用插件，没什么好说的，照做就可以了。与前面的章节相同，由于插件需求Jquery，一定要把 JavaScript 语句放到{% block script %}中，否则会报错哦。
插件还有其他可设置的规则，详情见官方文档
刷新页面，不管你怎么滚动页面，目录都显示在屏幕中，并且随着滚轮很自然的上下移动了：
总结本章学习了回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏四个功能。
就像前面说的，这几个功能跟Django没什么关系，但是既然要想做一个完整的博客网站，就不要抱有幻想。光靠那么一点点Django代码是不可能的，什么知识你都得会一点才行。
读者以后会遇到更加多样的编程工具，一定不要被“Django程序员”这个头衔所束缚，勇敢去学吧。谁让你已经上了贼船呢。
有疑问请在杜赛的个人网站留言，我会尽快回复。
或Email私信我：dusaiphoto@foxmail.com
项目完整代码：Django_blog_tutorial
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/43569.html
摘要：前端小白也能快速学会的博客园博客美化全攻略呦，博客园的自我修养是什么第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔美化方法论简介一般而言，需要选一个默认的，然后在该基础上调整。或者也可进博客园园子页面，发状态博客园团队，申请开通权限。 前端小白也能快速学会的博客园博客美化全攻略 A呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔~ 美化方法论简...
摘要：自定义简单的如果你想自定义启动界面或顶部导航栏的，你需要在主题的根目录下创建一个文件夹，将自定义的和图片放在里面。你可以通过变量来定制顶部导航栏的高度。如果图片的高度比顶部导航栏的高度小，那么会垂直居中显示。 本文译自 openstack-horizon 官方文档 主题 从 Kilo 版本开始，Horizon 支持通过主题来定制样式。主题内包含一个 _variables.scss 文件...
摘要：踩坑注意导入后要勾选禁用默认否则会造成各种显示问题我的文件可以右键查看网页源代码获取，使用时基于主题，懒得折腾的可以直接下载。主页美化： 主要参考嘻哈烧饼的美化，在TA的基础上增加了对主页背景、色调以及侧边栏的调整 原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html 修改博客园背景的代码如下（在原帖使用的css文件中修改）： body ...
摘要：一些表单界面元素文本框或复选框非常简单并内置在中，而其他会复杂些像弹出日期选择等操作控件。和标签中的属性指定了当前文本框提交的数据的名称，它必须与表单类中的字段名称对应，否则服务器无法将字段和数据正确的对应起来。 前面我们已经学会如何用Markdown语法书写文章了。 但是还有问题呀。之前写文章都是在后台中进行的，万一有别的普通用户也要发表文章怎么办？万一我想拓展些后台中没有的提交验证...
上一章我们的网站页面实在太粗糙，你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量，改写一个大气的博客。 配置Bootstrap 4 Bootstrap是用于网站开发的开源前端框架（前端指的是展现给最终用户的界面），它提供字体排印、窗体、按钮、导航及其他各种组件，旨在使动态网页和Web应用的开发更加容易。 Bootstrap有几个版本都比较流行，我们选择最新版本的Boots...
阅读 1580·2021-11-16 11:44
阅读 7421·2021-09-22 15:00
阅读 4460·2021-09-02 10:20
阅读 1941·2021-08-27 16:20
阅读 2383·2019-08-26 14:00
阅读 2903·2019-08-26 11:44
阅读 1624·2019-08-23 18:33
阅读 1852·2019-08-22 17:28
