0
给我们留言吧!
时间：2023-06-09 19:48:02 | 来源：网站运营
时间：2023-06-09 19:48:02 来源：网站运营
Django搭建个人博客： Bootstrap 4 改写模板：注意：学本章之前请检查 Django 版本，确保安装的是 Django 2 而不是 Django 3，否则后面所有的章节都会遇到
在线咨询
staticfiles 无法载入的错误。在虚拟环境中输入上一章我们的网站页面实在太粗糙，你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量，改写一个大气的博客。pip list即可查看。
static/bootstrap/，用于存放Bootstrap静态文件。静态文件通常指那些不会改变的文件。Bootstrap中的css、js文件，就是静态文件。css和js两个文件夹复制进去。2020.07.22 更新：现在我们的
由于popper.js版本兼容问题，教程改用 cdn 远程引入的形式，所以这里就不需要将 popper.js 下载到本地了。后面会讲到如何 cdn 引入。
static/目录结构像这样：my_blog│├─article└─my_blog│ ...└─static └─bootstrap │ ├─css # 文件夹 │ └─js # 文件夹 └─jquery │ └─jquery-3.3.1.js # 文件 └─popper └─popper-1.14.4.js # 文件 - 2020.07.22: 不用下载因为在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个文件了。Bootstrap是非常优秀的前端框架，上手简单，所以很流行。你可以在官方网站上进行系统的学习。通篇看Bootstrap文档比较枯燥，因此建议你可以像查字典一样，需要用哪个模块，就到官网上找相关的代码，修改一下拷贝到你的项目中。这里会一次性写大量代码，不要着急慢慢看，理解了就很简单了。
base.html：templates/base.html<!-- 载入静态文件 使用 Django 3 的读者改为 {% load static %}-->{% 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> <!-- popper.js 采用 cdn 远程引入，意思是你不需要把它下载到本地。 在实际的开发中推荐静态文件尽量都使用 cdn 的形式。 教程采用本地引入是为了让读者了解静态文件本地部署的流程。 --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script> <!-- 引入bootstrap的js文件 --> <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script></body></html>{% load staticfiles %} 之后，才可使用 {% static 'path' %} 引用静态文件。<head></head>标签内包含网页的元数据，是不会在页面内显示出来的。<body></body>标签内才是网页会显示的内容。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的，你去调用它吧。”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/，看到如下页面：关键词：改写,模板
