母板

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Title</title>

  {% block page-css %}

  {% endblock %}

</head>

<body>

<h1>这是母板的标题</h1>

{% block page-main %}

{% endblock %}

<h1>母板底部内容</h1>

{% block page-js %}

{% endblock %}

</body>

</html>

注意：我们通常会在母板中定义页面专用的CSS块和JS块，方便子页面替换。

一、模板继承

目的是：减少代码的冗余

语法：

{% block classinfo %}

{% endblock %}

具体步骤：

1、创建一个base.html文件，
2、把要显示的页面的内容写在这里面，也就是html要在浏览器显示的内容
3、在right里面写个盒子
　　{% 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 %}

例如：

{% block menu %}

　　{{ block.super }}

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

{% endblock %}

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

{% block content %}

...

{% endblock content %}

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

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

具体例子说明

urls.py

urlpatterns = [

    url(r'^admin/', admin.site.urls),

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

]

views.py

from django.shortcuts import render,redirect

# Create your views here.

def text(request,class_id):

        # 班级变量

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

        # 数据库查询

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

templaite / base.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width">

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

    <title>Title</title>

    <style>

        .right {

            height: 400px;

            background-color: silver;

        }

    </style>

</head>

<body>

{#导航条#}

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

    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->

        <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 toggling -->

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

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

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" 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><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</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.py 继承上面的文件

{% extends "base.html" %}



{% block classinfo %}

    <h1>学生信息</h1>

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

{% endblock %}



{#追加#}

{% block menu %}

    {{ block.super }}

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

{% endblock %}

块（block）

通过在母板中使用{% block xxx %}来定义"块"。

在子页面中通过定义母板中的block名来对应替换母板中相应的内容。

{% block page-main %}

  <p>世情薄</p>

  <p>人情恶</p>

  <p>雨送黄昏花易落</p>

{% endblock %}

组件

可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方按如下语法导入即可。

{% include 'navbar.html' %}

静态文件相关

{% load static %}

<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

引用JS文件时使用：

{% load static %}

<script src="{% static "mytest.js" %}"></script>

某个文件多处被用到可以存为一个变量

{% load static %}

{% static "images/hi.jpg" as myphoto %}

<img src="{{ myphoto }}"></img>

使用get_static_prefix

{% load static %}

<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />

或者

{% load static %}

{% get_static_prefix as STATIC_PREFIX %}

<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />

<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

自定义simpletag

和自定义filter类似，只不过接收更灵活的参数。

定义注册simple tag

@register.simple_tag(name="plus")

def plus(a, b, c):

    return "{} + {} + {}".format(a, b, c)

使用自定义simple tag

{% load app01_demo %}

{# simple tag #}

{% plus "1" "2" "abc" %}

inclusion_tag:多用于返回html代码片段

示例：

templatetags/my_inclusion.py

from django import template

register = template.Library()

@register.inclusion_tag('result.html')

def show_results(n):

    n = 1 if n < 1 else int(n)

    data = ["第{}项".format(i) for i in range(1, n+1)]

    return {"data": data}

templates/snippets/result.html

<ul>

  {% for choice in data %}

    <li>{{ choice }}</li>

  {% endfor %}

</ul>

templates/index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>inclusion_tag test</title>

</head>

<body>

{% load inclusion_tag_test %}

{% show_results 10 %}

</body>

</html>

二、静态文件配置

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

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

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

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

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

STATICFILES_DIRS = [

    os.path.join(BASE_DIR,"static")  # 找到static路径，BASE_DIR为项目文件的根目录

]

4、导入css,js,jquery文件

<hade>
<link rel = "stysheet",href= "/static/index.css/"> #注意：只需要在文件目录前+/static/，会自动帮你找到static文件夹下的相关文件
</head>

<body>

<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>

Django框架----模板继承和静态文件配置的更多相关文章

Django（五）框架之模板继承和静态文件配置
https://www.cnblogs.com/haiyan123/p/7731959.html 一.模板继承目的是:减少代码的冗余语法: {% block classinfo %} {% end ...
Django框架之模板继承和静态文件配置
一.模板继承目的是:减少代码的冗余语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...
Django 2.0 学习(13)：Django模板继承和静态文件
Django模板继承和静态文件模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...
Django框架之模板基础，静态文件配置
一.模板继承目的是:减少代码的冗余语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...
Django框架（八）—— 模板层：模板导入、模板继承、静态文件
目录模板导入.继承.静态文件一.模板导入 1.语法 2.使用二.模板的继承 1.使用模板的继承 2.强调(注意点) 三.静态文件 1.在配置文件settings中配置过静态文件 2.导入使用静态 ...
Django模版中加载静态文件配置详解
.settings.INSTALLED_APPS下添加:django.contrib.staticfiles .settings.py下添加:STATIC_URL = '/static/' . ()在 ...
Django框架（七）-- 模板层：模板导入、模板继承、静态文件
一.模板导入要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可在模板中使用 1.语法 {% include '模板名字' %} 2.使用 ad.html页面 <div clas ...
Django框架、HTTP协议、文件配置、路由设置、
1.socket服务端.py import socketsk = socket.socket()sk.bind(("127.0.0.1",8000))sk.listen()whil ...
Django【第4篇】：Django之模板继承
jango框架之模板继承和静态文件配置一.模板继承目的是:减少代码的冗余语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.htm ...

随机推荐

pip升级时报错--- No module named 'pip._internal'
一.问题: 之前python3.6是安装的pip版本为:pip=9.0.1,我按照提示升级报错,一直装不上pip18.0,于是直接在site-package目录下删掉了pi ...
共分为六部完成根据模板导出excel操作
第一步.设置excel模板路径(setSrcPath) 第二步.设置要生成excel文件路径(setDesPath) 第三步.设置模板中哪个Sheet列(setSheetName) 第四步.获取所读取 ...
abap form格式的异常处理
1: form 中有异常时,需要用 raising 将异常抛出. *&------------------------------------------------------------- ...
function module 之间调用
1: 在一个function group 中定义一个function module 2:在另外一个module中调用该module "调用其它function 要用单引号引着. 一个mo ...
利用Python实现简单的相似图片搜索的教程
大概五年前吧,我那时还在为一家约会网站做开发工作.他们是早期创业公司,但他们也开始拥有了一些稳定用户量.不像其他约会网站,这家公司向来以洁身自好为主要市场形象.它不是一个供你鬼混的网站——是让你能找到 ...
以太坊如何使用CPU挖矿？
CPU挖掘你可以用电脑的中央处理器(CPU)挖以太币.自从GPU矿工的效率高出两个数量级,它就不再盈利了.然而你可以用CPU挖掘在Morden测试网或私有链上挖矿,以便创建你测试合约和交易所需要的以 ...
Python 全栈开发二 python基础字符串字典集合
一.字符串 1,在python中,字符串是最为常见的数据类型,一般情况下用引号来创建字符串. >>ch = "wallace" >>ch1 = 'walla ...
[LeetCode] 364. Nested List Weight Sum II_Medium tag:DFS
Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...
[转]sqlserver2014两台不同服务器上数据库同步
https://www.cnblogs.com/peng0731/p/7359465.html 同步了快一个月了,因为途中比较麻烦,第一次,遇到烦的地方就停下了,今天终于同步成功了,哈哈,下面我就来介 ...
come on! linux install JDK9.0.1
哈哈,JDK9已经出来了我们把它安装到Linux上吧! 一下载JDK9 http://www.oracle.com/technetwork/java/javase/downloads/index.h ...

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

母板