Django的模板系统（二）

静态文件

前端的一些精美页面的渲染，需要加载静态文件，例如加载css文件、js文件，在Django项目中，需要在模板中进行配置，去加载这些静态文件

引入静态文件

在项目根目录（或应用目录）下创建 statics 目录，在 statics 目录下创建 css 目录、js 目录、images 目录、plugins 目录，分别存放 css文件、js文件，图片，插件。前端的这些样式精美的文件，可以去 bootstrap这些网站去下载下来

在这里插入图片描述

修改项目根目录下的settings.py文件，将sgin目录下statics文件夹加入到静态资源访问路径中。

STATIC_URL = '/static/' 	#别名 
STATICFILES_DIRS =[os.path.join(BASE_DIR,'sgin/statics')]		# 静态文件所在目录
1
2

前端页面HTML文件的写法，引入 css、js 文件，一般是这样的

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    
    <link href="css/bootstrap.css" rel="stylesheet" />
    
    <title>Titletitle>
head>
<body>
    

<script src="js/jquery-1.10.2.js">script>

<script src="js/bootstrap.min.js">script>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在Django项目中，HTML文件通过模板系统加载静态文件，需要进行一些修改，在html文件开头，需要通过{% load static %}声明加载静态文件，引入 css、js 文件也需要声明是从 static 引入的静态文件


{% load static %}
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    
    <link href="{% static 'css/bootstrap.css' %} " rel="stylesheet" />
    
    <title>Titletitle>
head>
<body>
    

<script src="{% static 'js/jquery-1.10.2.js' %}">script>

<script src="{% static 'js/bootstrap.min.js' %}">script>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

event.html

{% load static %}
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      
    <link href="{% static 'css/bootstrap.css' %} " rel="stylesheet" />
    
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet" />
    
    <link href="{% static 'css/custom-styles.css' %}" rel="stylesheet" />
    <title>测试title>
head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand"><i class="icon fa fa-plane">i> 测试学习系统a>

            <div id="sideNav" >
                <i class="fa fa-bars icon">i>
            div>
        div>

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw">i> <i class="fa fa-caret-down">i>
                a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw">i> User Profilea>
                    li>
                    <li><a href="#"><i class="fa fa-gear fa-fw">i> Settingsa>
                    li>
                    <li class="divider">li>
                    <li><a href="#"><i class="fa fa-sign-out fa-fw">i> Logouta>
                    li>
                ul>
                
            li>
        ul>
    nav>
    
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a class="active-menu" href="/sgin/events/"><i class="fa fa-dashboard">i> 测试资料 a>
                li>
                <li>
                    <a href="/sgin/guests/"><i class="fa fa-desktop">i> 测试练习 a>
                li>

            ul>

        div>

    nav>
    

    <div id="page-wrapper">

        <div class="header">
            <div class="page-header">


            div>
        div>

        <div id="page-inner" class="panel-body">

        <ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >{{ event }}li>
            {% endfor %}
        ul>

            <footer><p>Author:沉觞.  <a href="#" target="_blank">测试学习笔记a>p>
            footer>
        div>
        

    div>
    
div>


<script src="{% static 'js/jquery-1.10.2.js' %}">script>

<script src="{% static 'js/bootstrap.min.js' %}">script>


<script src="{% static 'js/custom-scripts.js' %}">script>
<script>
  $(document).ready(
    $('#main-menu>li>a').each(function (){
      $(this).attr('class',''); //先取消选中
      let current_href = window.location.pathname
      if(current_href === $(this).attr('href')){
        $(this).attr('class','active-menu');
      }
    }),
  )
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

模板的继承

模板可以用继承的方式来实现复用，减少冗余内容。网页的头部、尾部、外层的框架，内容一般都是一致的，就可以通过模板继承来实现复用。

将通用的功能或者属性写在基础模板中，也叫基类模板或者父模板。

子模板可以继承父类模板，子模板继承后将自动拥有父类中的属性的内容，还可以在子模板中对父模板进行重写，即重写父模板中方法或者属性，从而实现子模板的定制。

模板继承的标签有 {% block %} 、 {% extends %} 标签，其中 {% block% } 标签与 {% endblock %} 标签成对出现，而 {% extends %} 放在子模板的第一行且必须是模板中的第一个标签，标志着此模板继承自父模板

模板继承的应用

父模板中需要声明的内容：

 
{%block block_name%}
...可以被子模板覆盖的内容
{%endblock block_name%}
1
2
3
4

子模板中声明声明需要修改的内容：

 
{% extends '父模板名称' %}


 
{%block block_name%}
...子模板覆盖后呈现的新内容
{%endblock block_name%}
1
2
3
4
5
6
7
8

请添加图片描述

例如在上图中，外层的框架，就可以通过模板继承来实现复用

在templates文件夹中新增一个base.html文件，将event.html文件中所有内容剪切到个base.html文件中，

event.html文件中需要的内容，就只是从 功能测试 到 安全测试 这块的内容

<ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >{{ event }}li>
            {% endfor %}
ul>
1
2
3
4
5

将这块内容从base.html文件提取出去，然后声明这块是需要被子模板覆盖的内容

base.html

{% load static %}
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      
    <link href="{% static 'css/bootstrap.css' %} " rel="stylesheet" />
    
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet" />
    
    <link href="{% static 'css/custom-styles.css' %}" rel="stylesheet" />
    <title>测试title>
head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand"><i class="icon fa fa-plane">i> 测试学习系统a>

            <div id="sideNav" >
                <i class="fa fa-bars icon">i>
            div>
        div>

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw">i> <i class="fa fa-caret-down">i>
                a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw">i> User Profilea>
                    li>
                    <li><a href="#"><i class="fa fa-gear fa-fw">i> Settingsa>
                    li>
                    <li class="divider">li>
                    <li><a href="#"><i class="fa fa-sign-out fa-fw">i> Logouta>
                    li>
                ul>
                
            li>
        ul>
    nav>
    
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a class="active-menu" href="/sgin/events/"><i class="fa fa-dashboard">i> 测试资料 a>
                li>
                <li>
                    <a href="/sgin/guests/"><i class="fa fa-desktop">i> 测试练习 a>
                li>

            ul>

        div>

    nav>
    

    <div id="page-wrapper">

        <div class="header">
            <div class="page-header">


            div>
        div>

        <div id="page-inner" class="panel-body">
            
                  
            {% block content %}
            {% endblock %}


            <footer><p>Author:沉觞.  <a href="#" target="_blank">测试学习笔记a>p>
            footer>
        div>
        

    div>
    
div>


<script src="{% static 'js/jquery-1.10.2.js' %}">script>

<script src="{% static 'js/bootstrap.min.js' %}">script>


<script src="{% static 'js/custom-scripts.js' %}">script>
<script>
  $(document).ready(
    $('#main-menu>li>a').each(function (){
      $(this).attr('class',''); //先取消选中
      let current_href = window.location.pathname
      if(current_href === $(this).attr('href')){
        $(this).attr('class','active-menu');
      }
    }),
  )
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

声明继承自父模板，并编写子模板覆盖的内容

event.html


{% extends "base.html" %}


{% block content %}
     <ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >{{ event }}li>
            {% endfor %}
     ul>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11

访问http://127.0.0.1:8000/events/，可以发现，页面并没有发生变化
请添加图片描述

但如果删去event.html文件中{% block content %}与{% endblock %}之间的 ul标签中的内容，此时页面上从 功能测试 到 安全测试 这块的内容就会为空。这也就反向说明了子模板继承父模板这一流程， ul标签中的内容是区别于父模板，仅在子模板中展示的内容
父模板可以被子模板继承，子模板可以被更低一级的子模板继承，层层套娃，这里不再继续深究。

模板继承扩展

父模板也可以被多个子模板继承，可以继续新增html文件，去继承base.html

请添加图片描述

前端页面，通过点击测试资料分类页面的分类内容，进入测试资料详情页面

请添加图片描述

在sgin目录下的views.py文件中再编写一个视图函数event_detail；实现在浏览器中输入http://127.0.0.1:8000/events/detail/，进入的是测试资料详情页面

from django.shortcuts import render

# Create your views here.

def event(request):
    eventlist = [
        '功能测试',
        '性能测试',
        '自动化测试'
    ]
    return render(request,'events.html',{'event_list':eventlist})

def event_detail(request):

    return render(request,'event_detail.html')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在项目目录下urls.py 文件的 urlpatterns 列表中为event_detail视图函数配置路由映射关系

from django.contrib import admin
from django.urls import path
from demo import views  as demo_view   
from sgin import views as sgin_view		

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/',demo_view.index),      
    path('events/',sgin_view.event),	
    path('events/detail/',sgin_view.event_detail),	# 将视图函数添加入路由配置中
]
1
2
3
4
5
6
7
8
9
10
11

在sgin目录下的 templates 文件夹中新建一个 HTML 文件，并且将此文件命名为 event_detail.html，然后在此文件中编写 HTML 代码，该文件依旧继承base.html。

event_detail.html

{% extends "base.html" %}

{% block title %}
    测试资料详情页
{% endblock %}

{% block content %}
     <h1>测试资料详情h1>
    <p>测试资料详情内容p>
    <p>测试资料详情内容p>
    <p>测试资料详情内容p>
    <p>测试资料详情内容p>
	
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在浏览器中输入http://127.0.0.1:8000/events/detail/，进入的是测试资料详情页面

修改 events.html文件，添加a标签及路由链接，使其在前端点击测试资料分类，进入测试资料详情页面

events.html

{% extends "base.html" %}

{% block title %}
    测试资料分类
{% endblock %}

{% block content %}
     <ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >
                   <a href="/events/detail"> {{ event }}a>
                li>
            {% endfor %}
     ul>

{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意： 这里href="/events/detail"，events路径前需要加上/，如果没有加上，浏览器会将路径进行拼接，访问的链接就变成了http://127.0.0.1:8000/events/events/detail，而不是测试资料详情页面的地址

修改 event_detail.html文件，添加a标签及路由链接，使其在前端点击按钮，返回测试资料分类页面。
event_detail.html

{% extends "base.html" %}

{% block title %}
    测试资料详情页
{% endblock %}

{% block content %}
     <h1>测试资料详情h1>
    <p>测试资料详情内容p>
    <p>测试资料详情内容p>
    <p>测试资料详情内容p>
    <p>测试资料详情内容p>
	
    <span><a href="/events/" class="btn btn-info">返回测试资料分类页a>span>

{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

相关阅读:
.NET周刊【9月第4期 2023-09-24】
威纶通触摸屏如何在报警的同时，显示出异常数据的当前值？
MongoDB索引覆盖查询
 离散数学考前小记
 链式法则：概率论描述语言模型
 【暑期每日一题】洛谷 P7798 [COCI2015-2016#6] PUTOVANJE
【Hello Go】Go语言工程管理
 进程的概念和分类
 研发管理用什么软件？
PAT1021 个位数统计
原文地址：https://blog.csdn.net/qq_44614026/article/details/126375939