本章集中介绍四个重要的小功能:回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏。javascript
这几个功能与Django基本没啥关系,更多的是前端知识,可是对博客网站都很重要,问的读者也比较多,所以也集中讲一下好了。css
当用户拜读完你的博文后,可能想回到文章开头从新阅读,或者审视其中的某些内容。若是文章内容较多,不停滑动滚轮回页面顶部未免有点太让人烦躁了。html
一种解决办法是增长一个回到顶部的浮动按钮。当页面向下滚动到某个位置后,按钮就呈如今页面右下角;点击按钮,页面就回到顶部。这个功能 Bootstrap 4 彷佛没有提供,但也不复杂,就本身用 JavaScript 和 CSS 写吧。前端
在templates
目录新建back_to_top_func.html
文件,写入如下代码:java
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
三部分。jquery
HTML部分只有一行,用button标签表示了浮动按钮的容器。git
JavaScript部分主要用到了Jquery的语法。页面加载完成后开始监听两个事件:程序员
CSS部分最长但也很简单,主要定义了按钮的位置、大小、图案等样式。读者能够试着、改动、删除部分代码,看看按钮形态会怎样变化。github
核心代码就写好了。有点小瑕疵的是前面在footer.html
中定义了class="fixed-bottom"
,这个属性的显示层级很高,会将浮动按钮给覆盖掉。所以删除templates/footer.html
中的fixed-bottom
属性:django
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程序员”这个头衔所束缚,勇敢去学吧。谁让你已经上了贼船呢。