实践三：母版的应用与静态文件管理
实践三：母版的应用与静态文件管理
内容介绍：本节内容将讲解母版的使用和静态文件管理。
（1）母版通常用于统一页面风格和精简网页代码，将通用的代码提炼出来放在母版中，其他页面可通过继承来使用母版所共享的内容，如页眉页脚等。
（2）静态文件文件夹（static）用于存放本地图片、JavaScript和CSS等文件，它有助于静态文件的组织管理和在页面上的正常呈现，如让图片在网页上正常显示。
一、母版的应用
1. 在实践一、实践二的基础上，继续该部分内容。
2. 在templates文件夹中添加base.html文件，并在base.html文件中添加如下内容：
<!-- templates/base.html --> <header> <a href="{% url 'home' %}">主页</a> | <a href="{% url 'about' %}">关于我们</a> </header> {% block content %} {% endblock content %}
知识点：
模板继承：Django 的模板引擎中最强大的——也是最复杂的——部分是模板继承。模板继承允许你建立一个基本的“骨架”模板（母版base.html ），它包含了你网站需要共享的内容和样式（如页眉、页脚、导航甚至整体的样式），并留出了空位置供子模板自行决定填充什么内容。使用母版可以统一网站所有页面的结构和风格，并使得代码更加简洁。
通常，HTML页面有着固定的组成结构，一些代码（HTML内容）是所有HTML页面所共享的，如使用相同的页眉（header）和页脚（footer），我们可以把这部分代码（HTML内容）提炼出来，作为一个基本模板（类似于PPT中的母版，此处我们也称之为母版）供其他页面共同使用。
代码解释：
（1）base.html文件将作为该项目的母版，<header></header>部分是所有所有子模板可以共享的内容，即home.html和about.html均可继承这里<header></header>所包含的内容；
（2）<a href="{% url 'home' %}">主页</a>设置该超链接导航到名称为“home”的url上，此处的“home”名在home/urls.py中已经定义了，如下：
# home/views.py from django.views.generic import TemplateView class HomePageView(TemplateView): template_name='home.html'
（3）在base.html中使用{% block content %} {% endblock content %}定义了一个子模板可填充的块（block），即在母版中留了一个空位置，这个空位置是留给子模板填充他们自己的内容。子模块通过继承base.html，并在{% block content %} {% endblock content %}之间添加自己的内容，这样所有的子模板既可以共享母版的公有内容（此处为<header></header>所包含的内容），又可以自定义一部分内容（放在块（block）中）。
3. home.html文件对母版（base.html）进行继承，更新templates/home.html页面的代码:
{% extends 'base.html' %} {% block content %} <h1>我的主页</h1> {% endblock content %}
代码解释：
（1）{% extends "base.html" %}告诉模板引擎，这个子模板（home.html）将继承了base.html母版，当系统执行home.html文件时，首先要将base.html中的通用内容添加到home.html中。
（2）{% block content %} {% endblock content %}之间的内容为home.html自己特有的内容，它填充了base.html中的空白块（block）。
4. 更新templates/about.html页面的代码
{% extends 'base.html' %} {% block content %} <h1>关于我们</h1> {% endblock content %}
解释：同home.html一样，通过“extends”继承母版（base.html）中的部分内容和结构，同时用自己的内容“<h1>关于我们</h1>”填充从base.html中的空白块（block）。
5. 效果图如下
点击“主页”将导航到“我的主页”页面
点击“关于我们”将导航到“关于我们”页面
6. 添加bootstrap前端框架。
bootstrap前端框架能帮助我们快速的美化HTML页面，更新base.html文件，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <title>myweb</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- 页眉的导航栏将会被子模板继承 --> <nav class="navbar navbar-expand-sm bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="{% url 'home' %}">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="{% url 'about' %}">关于我们</a> </li> </ul> </div> </nav> <!-- block部分将被子模板用来填充自己独立的内容 --> <div class="container"> {% block content %} {% endblock content %} </div> </body> </html>
代码解释：此处我们引用了bootstrap框架，并在母版中设置了一个导航栏（<nav></nav>所包含的内容），{% block content %} {% endblock content %}用于留出空位置，让子模板自己去定义里面放什么内容。
6. 刷新页面，效果如下：
点击“主页”将导航到“我的主页”页面
点击“关于我们”将导航到“关于我们”页面
二、静态文件管理
当我们想要在页面中显示图片或是加载本地JavaScript、CSS等静态文件时，直接在html添加引用会出现问题，这些文件无法加载进来。
1. 在“主页”中添加图片（错误示范）
（1）将“冰淇淋.png”图片放在templates文件夹中
（2）修改templates/home.html文件的代码如下：
{% extends 'base.html' %} {% block content %} <h1>我的主页</h1> <img src="冰淇淋.png" alt="冰淇淋" width="400px;"> {% endblock content %}
（3）刷新主页，页面效果如下：
问题出现了，我们添加的图片不能在页面中正常显示。在Django网站中，静态文件（如图片、JavaScript文件、CSS文件等）需要使用静态文件管理，否则在加载到页面中会出错。
8. 在“主页”中添加图片（正确示范）
（1）在myweb文件夹下新建static文件夹，结构如下：
（2）在static文件夹下新建一个images文件夹，并将“冰淇淋.png”图片移到images文件夹中
（3）更新my_project下的settings.py文件
STATIC_URL = 'static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
（4）更新templates/home.html文件
{% extends 'base.html' %} {% load static %} {% block content %} <h1>我的主页</h1> <img src="{% static 'images/冰淇淋.png' %}" alt="冰淇淋" width="400px;"> {% endblock content %}
（5）重新启动服务器，刷新页面查看效果
python manage.py runserver
效果如下：
此时，页面已经能正常显示图片了。
9. 将base.html文件中的css文件和js文件本地化
当前，base.html文件是引用的外部css和js文件，当访问外部网站受限或网速较慢时，网页加载会很慢，为解决这个问题，我们有必要将css和js文件放在本地服务器上。注意：有时候直接引用外部文件也会很快，这个主要取决于加载外部文件是否受阻或网速快慢。
（1）在static文件夹中创建一个css文件夹，用于存放网站要用到的所有css文件
（2）通过base.html中<head></head>中的超链接下载bootstrap.min.css文件
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
通过该超链接，下载bootstrap.min.css文件到static/css文件夹中。
（3）在static文件夹中创建一个js文件夹，用于存放网站要用到的所有JavaScript文件
（4）通过base.html中<head></head>中的超链接下载bootstrap.bundle.min.js文件
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
通过该超链接，下载bootstrap.min.css文件到static/js文件夹中。
(5)更新base.html中<head></head>部分的内容
<!DOCTYPE html> <html lang="en"> <head> <!-- 加载静态文件 --> {% load static %} <title>myweb</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 删除外部引用，引用本地的css和js文件 --> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script> </head>
10. 删除浏览器的历史纪录，并重新启动本地服务器，查看页面内容。此时我们引用的是本地的css和js文件了。
浙公网安备 33010602011771号