Web框架开发-Django-模板继承和静态文件配置

一、模板继承

目的：减少代码的冗余

语法：

1

2

3

{% block classinfo %}

{% endblock %}

　　

具体步骤：

1、创建一个base.html文件

2、把要显示的页面的内容写在这里面，也就是HTML要在浏览器显示的内容

3、在rigth里面写一个盒子

　　{% block classinfo %}

　　{% endblock %}

在这里写一个空盒子，以后谁来扩展就在这个盒子里面添加相应的内容就行了

4、然后再创建一个.html文件，让这个继承base.html文件

　{% extends 'base.html' %}　　# 必须是在文件的第一行

　　在基版里面添加内容

　　{% block classinfo %}

　　　　<h2>首页</h2>

　　　　<h2>学生信息</h2>

　　　　<h3>{{ class_id }}班</h3>

　　{% endblock %}

5、也可以写好多盒子，
　　在left中写个盒子
　　　　{% block menu %}
　　　　　　<p>I see you you</p>
　　　　{% endblock %}

注意：
　　盒子里面可以有默认的内容，如果有默认的时候你不扩展就走默认的，如果你扩展了，就替换了，
那么不替换直接追加可以嘛？可以的，那就用下面的方式。
{% block.super %}

1

2

3

4

5

6

7

{% block menu %}

　　{{ block.super }}

　　<p>！！！</p>       #先继承父类的，后插入数据

{% endblock %}

　　

1、模板继承围绕两点：继承和扩展
　　　　　　　　　　你有什么继承什么，       
　　　　　　　　　　扩展的是盒子，
2、模板中设置的盒子越多越好，因为这样你想扩展的时候就容易了。我想扩展就扩展了。不扩展就不扩展了
3、为了更好的可读性，你也可以给你的 {% endblock %} 标签一个 名字 。例如：

1

2

3

{% block content %}

...

{% endblock content %}　

4、如果你发现你自己在大量的模版中复制内容，那可能意味着你应该把内容移动到父模版中的一个 {% block %} 中。

最后，请注意你并不能在一个模版中定义多个相同名字的 block 标签。这个限制的存在是因为block标签的作用是“双向”的。这个意思是，block标签不仅提供了一个坑去填，它还在 _父模版_中定义了填坑的内容。如果在一个模版中有两个名字一样的 block 标签，模版的父模版将不知道使用哪个block的内容。

具体例子说明

urls.py

1

re_path(r'^text/(\d+)', views.text)

　　

views.py

1

2

3

4

5

def text(request, class_id):

    # 班级变量

    print(class_id)     # 拿到的是你在路径里输入的几就是几

    # 数据库查询

    return render(request, "text.html", {"class_id": class_id})

　　

templatite/base.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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    {% block title %}

    <title>base</title>

    {% endblock %}

    <!--最新版本的bootstrap核心CSS文件-->

    <link rel="stylesheet"  href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>My amazing site</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .header {

            width: 100%;

            height: 50px;

            background-color: #369;

        }

        .right {

            height: 400px;

            background-color: silver;

        }

    </style>

</head>

<body>

{# 导航条 #}

<nav class="navbar navbar-primary navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">Brand</a>

        </div>

        <!--Collect the nav links,forms, and other content for togging-->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">Link <span class="sr-only">(current)</span> </a> </li>

                <il><a href="#">Link</a> </il>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="drodown" role="button" aria-haspopup="true"

                       aria-expanded="false">Dropdown <span class="caret"></span> </a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a> </li>

                        <li><a href="#">Another action</a> </li>

                        <li><a href="#">Something else here</a> </li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a> </li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">One more separated link</a> </li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</nav>

{# 内容 #}

<div class="containers">

    <div class="row">

        <div class="col-md-11 col-lg-offset-1">

            <div class="left col-md-3">

                {% block menu %}

                    <div class="list-group">

                        <a href="#" class="list-group-item active">

                            学生班级

                        </a>

                        <a href="/text/6" class="list-group-item">s6</a>

                        <a href="/text/7" class="list-group-item">s7</a>

                        <a href="/text/8" class="list-group-item">s8</a>

                        <a href="/text/9" class="list-group-item">s9</a>

                    </div>

                {% endblock %}

            </div>

            <div class="right col-md-8">

                {# 定义一个盒子#}

                {% block classinfo %}

                {% endblock %}

            </div>

        </div>

    </div>

</div>

</body>

</html>

template/text.html继承上面的文件

1

2

3

4

5

6

7

8

9

10

11

12

13

{% extends "base.html" %}

{% block classinfo %}

    <h1>学生信息</h1>

    <h3>{{ class_id }}</h3>

{% endblock %}

{#追加#}

{% block menu %}

    {{ block.super }}

    <a href="">学生信息</a>

{% endblock %}

　　

二、静态文件配置

我们自己导入的一些包就叫做静态文件

1、在全局中先创建一个static的包，

2、在static里面导入我们的bootstrap，还是jquery等

3、然后在settings.py中加上一些配置

1

2

3

4

STATIC_URL = '/static/'   #这个配置就相当于下面配置的别名,如果这里的名字修改了就按照这里的名字去导入

STATICFILES_DIRS = [

    os.path.join(BASE_DIR,"static") 

]

　　

4、导入css,js,jquery

1

2

3

<link rel = "stysheet",href= "/static/index.css/">

<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/756935.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【flink】flink on yarn jar异常，类冲突：原因本地上传jar和hdfs的jar冲突

【flink】flink on yarn jar异常，类冲突：原因本地上传jar和hdfs的jar冲突

flink jar异常&#xff0c;类冲突可能原因&#xff1a; 报错如下 java.sql.SQLException: ERROR 2006 (INT08): Incompatible jars detected between client and server. Ensure that phoenix-[version]-server.jar is put on the classpath of HBase in every region server…
阅读更多...
GPT-4引领AI新纪元，Claude3、Gemini、Sora能否跟上步伐？

GPT-4引领AI新纪元，Claude3、Gemini、Sora能否跟上步伐？

【最新增加Claude3、Gemini、Sora、GPTs讲解及AI领域中的集中大模型的最新技术】 2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚…
阅读更多...
微服务高级篇（一）：微服务保护+Sentinel

微服务高级篇（一）：微服务保护+Sentinel

文章目录 一、初识Sentinel1.1 雪崩问题及解决方案1.2 微服务保护技术对比1.3 Sentinel介绍与安装1.4 微服务整合Sentinel 二、Sentinel的流量控制三、Sentinel的隔离与降级四、Sentinel的授权规则五、规则持久化5.1 规则管理模式【原始模式、pull模式、push模式】5.2 实现push…
阅读更多...
web前端框架设计第二课-Vue.js简介

web前端框架设计第二课-Vue.js简介

web前端框架设计第二课-Vue.js简介 一.预习笔记 1.Vue.js概述 Vue.js是一套用于构建用户界面的渐进式框架。本质上是一个用于开发Web前端界面的库&#xff0c;其本身具有响应式编程和组件化的特点。 Vue.js的特性&#xff1a; 轻量级 数据绑定 应用指令 插件化开发 2.V…
阅读更多...
WebRtc实时音波

WebRtc实时音波

摘要&#xff1a; 最近在做音视频相关业务&#xff0c;用的到了webRtc技术,掌握这些方法可以结合业务做&#xff0c;麦克风检测、录制音频&#xff0c;都是可以的&#xff1b;基本操作和其它方法都写好在methods中了&#xff1b; 全局变量 // 后续会创建AnalyserNode对象 let …
阅读更多...
【linux】Debian访问Debian上的共享目录

【linux】Debian访问Debian上的共享目录

要在Debian系统上访问共享目录&#xff0c;通常意味着要访问通过网络共享的文件夹&#xff0c;比如通过SMB/CIFS&#xff08;Server Message Block/Common Internet File System&#xff09;协议共享的Windows共享文件夹。以下是访问共享目录的步骤&#xff1a; 1. 安装必要的…
阅读更多...
Qt中通过函数名（call-by-name）来调用COM的方式

Qt中通过函数名（call-by-name）来调用COM的方式

QT中dumpcpp以及dumpdoc使用-CSDN博客 QT使用dumpcpp为COM生成h及cpp的方式&#xff0c;COM是C#的dll注册的-CSDN博客 在qt中调用COM的方式&#xff0c;其中采用函数名的方式算是比较简单的&#xff0c;但是有时候如果没有提供qt版本的函数说明&#xff0c;却是很难调用。笔者…
阅读更多...
PCL 极大似然估计法拟合平面

PCL 极大似然估计法拟合平面

目录 一、算法原理1、极大似然估计2、拟合过程3、参考文献二、代码实现三、结果展示一、算法原理 1、极大似然估计 在以最小二乘法为基础的估计算法中， 所有的参数都是确定值；而实际上，测量数据与未知参数都具有一定的随机性。这就导致了最小二乘法估计质量的缺陷以及对白噪…
阅读更多...
Devops-01-devops 是什么？

Devops-01-devops 是什么？

拓展阅读 Devops-01-devops 是什么&#xff1f; Devops-02-Jpom 简而轻的低侵入式在线构建、自动部署、日常运维、项目监控软件 代码质量管理 SonarQube-01-入门介绍 项目管理平台-01-jira 入门介绍 缺陷跟踪管理系统&#xff0c;为针对缺陷管理、任务追踪和项目管理的商业…
阅读更多...
【C++】Qt：WebSocket客户端示例

【C++】Qt：WebSocket客户端示例

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍WebSocket客户端示例。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&…
阅读更多...
Day28 回溯算法 part04

Day28 回溯算法 part04

Day28 回溯算法 part04 93.复原IP地址 我的思路&#xff1a; 在分割回文串代码的基础上改写&#xff0c;需要考虑多种情况 不合法的IP地址part&#xff1a;长度>1同时首数字为0 || 长度0 || 长度&#xff1e;3 || &#xff1e;255 将各个part结合起来添加 ”." 的时候…
阅读更多...
[Halcon学习笔记]实现多边形绘图后自动闭合成斜矩形

[Halcon学习笔记]实现多边形绘图后自动闭合成斜矩形

1、介绍 在Halcon联合开发项目中&#xff0c;需要在Halcon窗口上绘制不同形状的ROI&#xff0c;但是Halcon自带的绘图操作不太方便&#xff0c;操作时交互感官较差&#xff0c;所以可以通过绘制多边形&#xff0c;通过点来绘制多边形&#xff0c;最后通过闭合算子将绘框形成闭…
阅读更多...
大数据技术学习笔记（十三）—— HBase

大数据技术学习笔记（十三）—— HBase

目录 1 Hbase 概述1.1 Hbase 定义1.2 HBase 数据模型1.2.1 HBase 逻辑结构1.2.2 HBase 物理存储结构1.2.3 数据模型 1.3 HBase 基本架构 2 HBase Shell 操作2.1 基本操作2.2 namespace 操作2.3 表操作 3 HBase 原理深入3.1 RegionServer 架构3.2 HBase 写流程3.3 MemStore Flus…
阅读更多...
WPF —— 控件模版和数据模版

WPF —— 控件模版和数据模版

1:控件模版简介: 自定义控件模版&#xff1a;自己添加的样式、标签&#xff0c;控件模版也是属于资源的一种&#xff0c; 每一个控件模版都有一唯一的 key&#xff0c;在控件上通过template属性进行绑定 什么场景下使用自定义控件模版&#xff0c;当项目里面多个地方…
阅读更多...
Sentinel(流控模式:直接关联链路，流控效果:直接预热排队）

Sentinel(流控模式:直接关联链路，流控效果:直接预热排队）

Sentinel能够对流量进行控制&#xff0c;主要是监控应用的QPS流量或者并发线程数等指标&#xff0c;如果达到指定的阈值时&#xff0c;就会被流量进行控制&#xff0c;以避免服务被瞬时的高并发流量击垮&#xff0c;保证服务的高可靠性。 1.流控模式: 直接模式测试案例 表示1…
阅读更多...
【Spring】聊一聊Autowired和Resource

【Spring】聊一聊Autowired和Resource

聊一聊Autowired和Resource 对于日常使用来说&#xff0c;在Spring容器中&#xff0c;两个注解的功能基本是等价的&#xff0c;他们都可以将bean注入到对应的field中。 他们之间主要有以下几个关键的区别&#xff1a; 来源不同 Autowired 是 Spring 框架提供的注解&#xff0…
阅读更多...
微信小程序项目实战遇到的问题

微信小程序项目实战遇到的问题

我们以学生成绩平台来作为例子。这是我们想得到的效果。 以下是完整代码&#xff1a; index.js // index.js Page({//页面的初始数据data: {hello: 欢迎进入微信小程序的编程世界,score: 80,userArray: [{name: 张三,score: [66, 77, 86, 70, 90]},{name: 李四,score: [88, 7…
阅读更多...
如何让自己上百度百科？个人百科词条创建

如何让自己上百度百科？个人百科词条创建

百度百科&#xff0c;作为我国最大的中文百科全书&#xff0c;其影响力和权威性不言而喻。能够登上百度百科&#xff0c;意味着个人的知名度、成就和社会影响力得到了广泛认可。那么&#xff0c;如何才能让自己上百度百科呢&#xff1f;接下来伯乐网络传媒就来给大家讲解一下。…
阅读更多...
MyBatis3源码深度解析(十六)SqlSession的创建与执行(三)Mapper方法的调用过程

MyBatis3源码深度解析(十六)SqlSession的创建与执行(三)Mapper方法的调用过程

文章目录 前言5.9 Mapper方法的调用过程5.10 小结 前言 上一节【MyBatis3源码深度解析(十五)SqlSession的创建与执行(二)Mapper接口和XML配置文件的注册与获取】已经知道&#xff0c;调用SqlSession对象的getMapper(Class)方法&#xff0c;传入指定的Mapper接口对应的Class对象…
阅读更多...
MongoDB聚合运算符：$getField

MongoDB聚合运算符：$getField

文章目录 语法使用举例包含点号(.)的查询查询以($)开头的字段子文档字段查询 $getField聚合运算符返回文档中指定字段的值&#xff0c;字段名可以包含点.或以$开头。如果不指定&#xff0c;$getField将$$CURRENT作为字段返回。 语法 {$getField: {field: <String>,inpu…
阅读更多...
最新文章

Copyright @ 2022~2023