Django搭建个人博客:使用 Bootstrap 4 改写模板文件
上一章我们的网站页面实在太粗糙,你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量,改写一个大气的博客。
配置Bootstrap 4
Bootstrap是用于网站开发的开源前端框架(“前端”指的是展现给最终用户的界面),它提供字体排印、窗体、按钮、导航及其他各种组件,旨在使动态网页和Web应用的开发更加容易。
Bootstrap有几个版本都比较流行,我们选择最新版本的Bootstrap 4:下载地址,并解压。
然后在项目根目录下新建目录static/bootsrap/
,用于存放Bootstrap静态文件。静态文件通常指那些不会改变的文件。Bootstrap中的css、js文件,就是静态文件。
把刚才解压出来的css
和js
两个文件夹复制进去。
因为bootstrap.js依赖 jquery.js 和 popper.js 才能正常运行,因此这两个文件我们也需要一并下载保存。附上官网下载链接(进入下载页面,复制粘贴代码到新文件即可):
2018-10-29 新增:不清楚
popper.js
如何下载的戳这个链接:
https://unpkg.com/[email protected]/dist/umd/popper.js
进去后页面显示很长一段代码,把这段代码全部拷贝;在项目中新建名叫popper.js的文件,把刚拷贝的代码复制进去就可以了。很多开源js文件都是通过这样的方式下载。
现在我们的static/
目录结构像这样:
my_blog │ ├─article └─my_blog │ ... └─static └─bootstrap │ ├─css # 文件夹 │ └─js # 文件夹 └─jquery │ └─jquery-3.3.1.js # 文件 └─popper └─popper-1.14.4.js # 文件
因为在Django中需要指定静态文件的存放位置,才能够在模板中正确引用它们。因此在settings.py
的末尾加上:
my_blog/settings.py ... STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), )
再确认一下settings.py
中有没有STATIC_URL = '/static/'
字段,如果没有把它也加在后面。
编写模板
在根目录下的templates/
中,新建三个文件:
base.html
是整个项目的模板基础,所有的网页都从它继承;header.html
是网页顶部的导航栏;footer.html
是网页底部的注脚。
这三个文件在每个页面中通常都是不变的,独立出来可以避免重复写同样的代码,提高维护性。
现在templates\
的结构像下面这个样子:
templates │ ├─base.html ├─header.html ├─footer.html └─article └─list.html # 上一章创建的
加上之前的list.html
,接下来就要重新写这4个文件了。
因为前端知识非常博大精深,并且也不是Django学习的重点,本教程不会展开篇幅去讲。如果之前没接触过前端知识也没关系,这里可以先复制粘贴,不影响后面Django的学习。
你可以试着改写其中的某段代码,看看会对页面产生什么样的影响;遇到不懂的就在Bootstrap官方文档找答案。慢慢就会明白它的运行机制,毕竟Bootstrap真的是非常简单易用的工具。
这里会一次性写大量代码,不要着急慢慢看,理解了就很简单了。
首先写base.html
:
templates/base.html <!-- 载入静态文件 --> {% load staticfiles %} <!DOCTYPE html> <!-- 网站主语言 --> <html lang="zh-cn"> <head> <!-- 网站采用的字符编码 --> <meta charset="utf-8"> <!-- 预留网站标题的位置 --> <title>{% block title %}{% endblock %}</title> <!-- 引入bootstrap的css文件 --> <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> </head> <body> <!-- 引入导航栏 --> {% include 'header.html' %} <!-- 预留具体页面的位置 --> {% block content %}{% endblock content %} <!-- 引入注脚 --> {% include 'footer.html' %} <!-- bootstrap.js 依赖 jquery.js 和popper.js,因此在这里引入 --> <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script> <script src="{% static 'popper/popper-1.14.4.js' %}"></script> <!-- 引入bootstrap的js文件 --> <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script> </body> </html>
- 模板中要加上
{% load staticfiles %}
之后,才可使用{% static 'path' %}
引用静态文件。 - HTML语法中,所有的内容都被标签包裹;标签及标签中的属性可以对内容进行排印、解释说明等作用。
<head></head>
标签内包含网页的元数据,是不会在页面内显示出来的。<body></body>
标签内才是网页会显示的内容。- 留意Bootstrap的css、js文件分别是如何引入的
- jquery.js 和 popper.js 要在 bootstrap.js 前引入。**
然后是header.html
:
templates/header.html <!-- 定义导航栏 --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <!-- 导航栏商标 --> <a class="navbar-brand" href="#">我的博客</a> <!-- 导航入口 --> <div> <ul class="navbar-nav"> <!-- 条目 --> <li class="nav-item"> <a class="nav-link" href="#">文章</a> </li> </ul> </div> </div> </nav>
标签内的class
属性是Bootstrap样式的定义方法。试着改写或删除其中一些内容,观察页面的变化。
然后改写之前的list.html
:
templates/article/list.html <!-- extends表明此页面继承自 base.html 文件 --> {% extends "base.html" %} {% load staticfiles %} <!-- 写入 base.html 中定义的 title --> {% block title %} 首页 {% endblock title %} <!-- 写入 base.html 中定义的 content --> {% block content %} <!-- 定义放置文章标题的div容器 --> <div class="container"> <div class="row mt-2"> {% for article in articles %} <!-- 文章内容 --> <div class="col-4 mb-4"> <!-- 卡片容器 --> <div class="card h-100"> <!-- 标题 --> <h4 class="card-header">{{ article.title }}</h4> <!-- 摘要 --> <div class="card-body"> <p class="card-text">{{ article.body|slice:'100' }}...</p> </div> <!-- 注脚 --> <div class="card-footer"> <a href="#" class="btn btn-primary">阅读本文</a> </div> </div> </div> {% endfor %} </div> </div> {% endblock content %}
- 留意
{% block title %}
和{% block content %}
是如何与base.html
中相对应起来的。 - 摘要中的
{{ article.body|slice:'100' }}
取出了文章的正文;其中的|slice:'100'
是Django的过滤器语法,表示取出正文的前100个字符,避免摘要太长。
最后写入footer.html
:
{% load staticfiles %} <!-- Footer --> <div> <br><br><br> </div> <footer class="py-3 bg-dark fixed-bottom"> <div class="container"> <p class="m-0 text-center text-white">Copyright © www.dusaiphoto.com 2018</p> </div> </footer>
呼,真是一大堆的东西啊。
让我们来捋一捋发生了什么:
- 当我们通过
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给出的错误提示,修复它,你一定行。
总结
本章我们引入了前端框架Bootstrap 4,借助它重新组织了模板的结构,编写了一个漂亮的博客网站的首页。
下一章我们将学习编写文章详情页面。
- 有疑问请在杜赛的个人网站留言,我会尽快回复。
- 或Email私信我:[email protected]
- 项目完整代码:Django_blog_tutorial
转载请告知作者并注明出处。