DJANGO前端开发

Django搭建个人博客:使用 Bootstrap 4 改写模板

2019-03-19  本文已影响154人  9ba4bd5525b9

配置Bootstrap 4

Bootstrap是用于网站开发的开源前端框架(“前端”指的是展现给最终用户的界面),它提供字体排印、窗体、按钮、导航及其他各种组件,旨在使动态网页和Web应用的开发更加容易。

Bootstrap有几个版本都比较流行,我们选择最新版本的Bootstrap 4:下载地址,并解压。

然后在项目根目录下新建目录static/bootsrap/,用于存放Bootstrap静态文件。静态文件通常指那些不会改变的文件。Bootstrap中的css、js文件,就是静态文件。

把刚才解压出来的css和js两个文件夹复制进去。

因为bootstrap.js依赖 jquery.js 和 popper.js 才能正常运行,因此这两个文件我们也需要一并下载保存。附上官网下载链接(进入下载页面,复制粘贴代码到新文件即可):

jquery.js

popper.js

2018-10-29 新增:

不清楚popper.js如何下载的戳这个链接:

https://unpkg.com/popper.js@1.14.4/dist/umd/popper.js

进去后页面显示很长一段代码,把这段代码全部拷贝;在项目中新建名叫popper.js的文件,把刚拷贝的代码复制进去就可以了。很多开源js文件都是通过这样的方式下载。

现在我们的static/目录结构像这样:

因为在Django中需要指定静态文件的存放位置,才能够在模板中正确引用它们。因此在settings.py的末尾加上:

再确认一下settings.py中有没有STATIC_URL = '/static/'字段,如果没有把它也加在后面。

编写模板

在根目录下的templates/中,新建三个文件:

base.html是整个项目的模板基础,所有的网页都从它继承;

header.html是网页顶部的导航栏;

footer.html是网页底部的注脚。

这三个文件在每个页面中通常都是不变的,独立出来可以避免重复写同样的代码,提高维护性。

现在templates\的结构像下面这个样子:

加上之前的list.html,接下来就要重新写这4个文件了。

因为前端知识非常博大精深,并且也不是Django学习的重点,本教程不会展开篇幅去讲。如果之前没接触过前端知识也没关系,这里可以先复制粘贴,不影响后面Django的学习。

你可以试着改写其中的某段代码,看看会对页面产生什么样的影响;遇到不懂的就在Bootstrap官方文档找答案。慢慢就会明白它的运行机制,毕竟Bootstrap真的是非常简单易用的工具。

这里会一次性写大量代码,不要着急慢慢看,理解了就很简单了。

首先写base.html:

模板中要加上 {% load staticfiles %} 之后,才可使用 {% static 'path' %} 引用静态文件。

HTML语法中,所有的内容都被标签包裹;标签及标签中的属性可以对内容进行排印、解释说明等作用。

<head></head>标签内包含网页的元数据,是不会在页面内显示出来的。<body></body>标签内才是网页会显示的内容。

留意Bootstrap的css、js文件分别是如何引入的

jquery.js 和 popper.js 要在 bootstrap.js 前引入。**

然后是header.html:

标签内的class属性是Bootstrap样式的定义方法。试着改写或删除其中一些内容,观察页面的变化。

然后改写之前的list.html:

留意{% block title %}和{% block content %}是如何与base.html中相对应起来的。

摘要中的{{ article.body|slice:'100' }}取出了文章的正文;其中的|slice:'100'是Django的过滤器语法,表示取出正文的前100个字符,避免摘要太长。

最后写入footer.html:

呼,真是一大堆的东西啊。

让我们来捋一捋发生了什么:

当我们通过url访问list.html时,顶部的{% extends "base.html" %}告诉Django:“这个文件是继承base.html的,你去调用它吧。”

于是Django就老老实实去渲染base.html文件:

其中的{% include 'header.html' %}表明这里需要加入header.html的内容

{% include 'footer.html' %}加入footer.html的内容

{% block content %}{% endblock content %}表明这里应该加入list.html中的对应块的内容

运行服务器

老规矩,保存全部文件,进入虚拟环境,运行开发服务器,在浏览器中输入http://127.0.0.1:8000/article/article-list/,看到如下页面:

一个漂亮的博客界面就这样出现在眼前,非常神奇。

如果报错也不要着急,程序员就是不断与bug斗争的一个职业。仔细检查Django给出的错误提示,修复它,你一定行。

上一篇下一篇

猜你喜欢

热点阅读