Django搭建个人博客：使用 Bootstrap 4 改写模板文件

lolomaco 发布于2019-07-30 17:53 / 1284人阅读

上一章我们的网站页面实在太粗糙，你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量，改写一个大气的博客。

配置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/目录结构像这样：

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 %}






    
    
    
    {% block title %}{% endblock %}
    
    



    
    {% include "header.html" %}
    
    {% block content %}{% endblock content %}
    
    {% include "footer.html" %}

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

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

标签内包含网页的元数据，是不会在页面内显示出来的。标签内才是网页会显示的内容。

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

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

然后是header.html：

templates/header.html



  

    
    我的博客

    
    
      
        
        
          文章

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

然后改写之前的list.html：

templates/article/list.html


{% extends "base.html" %}
{% load staticfiles %}


{% block title %}
    首页
{% endblock title %}


{% block content %}



    

        {% for article in articles %}
        
        
        
            
                
                {{ article.title }}
                
                
                    {{ article.body|slice:"100" }}...
                
                
                
                    阅读本文
                
            
        
        {% endfor %}

    

{% endblock content %}

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

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

最后写入footer.html：

{% load staticfiles %}


    





    
        Copyright © www.dusaiphoto.com 2018

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

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

当我们通过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私信我：dusaiphoto@foxmail.com

项目完整代码：Django_blog_tutorial

转载请告知作者并注明出处。

云服务器 GPU云服务器搭建个人博客个人博客搭建如何用wordpress搭建个人博客阿里云服务器linux搭建个人博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/42489.html

Django搭建个人博客：文章分页

摘要：随着时间的推移加上勤奋的写作，你的博客文章一定会越来越多。如果不进行处理，可能同一个页面会挤上成百上千的文章，不美观不说，还降低了页面的反应速度。这个时候就需要对文章进行分页的处理。有疑问请在杜赛的个人网站留言，我会尽快回复。随着时间的推移（加上勤奋的写作！），你的博客文章一定会越来越多。如果不进行处理，可能同一个页面会挤上成百上千的文章，不美观不说，还降低了页面的反应速度。这个时...

stormgens 2019-07-30 18:40 评论0 收藏0
Django搭建个人博客：改写View视图

摘要：改写视图函数上一章我们感受了视图的工作流程。循坏表示依次取出中的元素，命名为，并分别执行接下来操作。即为语言，中间包裹了一个段落的文字。有疑问请在杜赛的个人网站留言，我会尽快回复。改写视图函数上一章我们感受了视图的工作流程。为了让视图真正发挥作用，改写article/views.py中的article_list视图函数： article/views.py from django...

KaltZK 2019-07-30 17:51 评论0 收藏0
Django搭建个人博客：根据浏览量对最热文章排序

摘要：有了浏览量之后，文章受欢迎的程度就有了评价标准。随之而来的就有根据浏览量对文章进行排序的需求，即显示最热文章。它也是可以传递多个参数的，如，参数间用隔开视图根据参数的值，判断取出的文章如何排序方法指定对象如何进行排序。有了浏览量之后，文章受欢迎的程度就有了评价标准。随之而来的就有根据浏览量对文章进行排序的需求，即显示最热文章。现在你已经很熟悉MTV模式，不需要我啰嗦也能完成任务： ...

kidsamong 2019-07-30 18:42 评论0 收藏0
Django搭建个人博客：编写文章详情页面

摘要：有了文章列表页面后，当然还需要详情页面，方便用户对某一篇感兴趣的文章深入阅读。编写视图函数打开，增加文章详情页面的视图函数文章详情取出相应的文章需要传递给模板的对象载入模板，并返回对象函数中多了这个参数。有了文章列表页面后，当然还需要详情页面，方便用户对某一篇感兴趣的文章深入阅读。编写视图函数打开article/views.py，增加文章详情页面的视图函数article_deta...

dabai 2019-07-30 17:53 评论0 收藏0
使用 django-blog-zinnia 搭建个人博客

摘要：语法支持再次打开文件，在文件的最后添加指明了使用语法标记，做了两个拓展，其中表示支持语法高亮，包含的特性请参见相关文档。语法高亮支持注意这一步必须在安装完主题之后。目前网上搭建个人博客的方案很多，虽然使用诸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齐全的高性能个人博客，但是本文将尝试一种更为小众化的方案 —— 一款基于 dj...

褰辩话 2019-07-25 10:47 评论0 收藏0