<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block page-css %} {% endblock %}
<body> <h1> This is the title of the motherboard </h1> {% block page-main %} {% endblock %}
<h1> Motherboard bottom content </h1>
{% block page-js %} {% endblock %}

Be careful : We usually define page specific in the motherboard CSS Block and JS block , Convenient sub page replacement .

One 、 Template inheritance

The purpose is : Reduce code redundancy

grammar :

{% block classinfo %}
{% endblock %}

Specific steps :

1、 Create a base.html file ,
2、 Write the content of the page to be displayed here , That is to say html What to display in the browser
3、 stay right There's a box in it
{% block classinfo %}

{% endblock %}
Write an empty box in it , Who will expand in the future? Just add the corresponding content in this box

4、 Then create another .html file , Let this inherit base.html file ,
{% extends "base.html" %}    # Must be in the first line of the file
Add content to the substrate
{% block classinfo %}
<h2> home page </h2>
<h2> Student information </h2>
<h3>{{ class_id }} class </h3>
{% endblock%}

5、 You can also write a lot of boxes ,
stay left Write a box in the box
{% block menu %}
<p>I see you you</p>
{% endblock %}

Be careful :
There can be default content in the box , If there is a default, if you don't expand it, you can go to the default , If you expand , It's replaced ,
So it's OK to add without replacing ? Tolerable , In the following way .
{% block.super %}

for example :

{% block menu %}
{{ block.super }}
<p>!!!</p> # Inherit the parent class's , Insert data after
{% endblock %}

1、 Template inheritance revolves around two things : Inheritance and extension
What do you inherit ,       
The expansion is the box ,
2、 The more boxes set in the template, the better , Because it's easy when you want to expand . I want to expand, so I expand . No expansion, no expansion
3、 For better readability , You can also give you  {% endblock %}  A label   name  . for example :

{% block content %}
{% endblock content %}

4、 If you find yourself copying in a lot of templates , That might mean that you should move the content to one of the parent templates  {% block %}  in .

Last , Please note that you cannot define more than one with the same name in one template  block  label . This limitation exists because block The function of the label is “ two-way ” Of . This means ,block The label not only provides a pit to fill , It's still there. _ Parent template _ The content of pit filling is defined in . If there are two people with the same name in a template  block  label , The parent template of the template will not know which one to use block The content of .

Specific examples illustrate

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

from django.shortcuts import render,redirect
# Create your views here.
def text(request,class_id):
# Class variables
print(class_id) # What you get is the number you input in the path
# Database query
return render(request, "text.html", {"class_id": class_id})

templaite / base.html

<!DOCTYPE html>
<html lang="en">
<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">
.right {
height: 400px;
background-color: silver;
{# Navigation bar #}
<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>
<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>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
{# Content #}
<div class="containers">
<div class="row">
<div class="col-md-11 col-lg-offset-1">
{# left #}
<div class="left col-md-3">
{% block menu %}
<div class="list-group">
<a href="#" class="list-group-item active">
Student classes
<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>
{% endblock %}
{# On the right side #}
<div class="right col-md-8">
{# Define a box #}
{% block classinfo %} {% endblock %}
{# Bottom #} </body>

template /    Inherit the file above

{% extends "base.html" %}

{% block classinfo %}
<h1> Student information </h1>
<h3>{{ class_id }} class </h3>
{% endblock %}

{# Additional #}
{% block menu %}
{{ block.super }}
<a href=""> Student information </a>
{% endblock %}

block (block)

By using in the motherboard {% block  xxx %} To define " block ".

In the subpage, by defining block Name to replace the corresponding contents in the motherboard .

{% block page-main %}
<p> Such kind of thin </p>
<p> Human evil </p>
<p> Flowers fall easily in the rain at dusk </p>
{% endblock %}


You can use common page content such as navigation bar , Components such as footer information are stored in separate files , Then import it in the following syntax where you need to use it .

{% include 'navbar.html' %}

Static file related

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

quote JS Use when file :

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

Multiple uses of a file can be saved as a variable

{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>

Use 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!" />

Customize simpletag

And customization filter similar , Just receive more flexible parameters .

Define registration simple tag

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

Use customization simple tag

{% load app01_demo %}
{# simple tag #}
{% plus "1" "2" "abc" %}

inclusion_tag: More for returning html code snippet

Example :


from django import template
register = template.Library()
def show_results(n):
n = 1 if n < 1 else int(n)
data = [" The first {} term ".format(i) for i in range(1, n+1)]
return {"data": data}


{% for choice in data %}
<li>{{ choice }}</li>
{% endfor %}


<!DOCTYPE html>
<html lang="en">
<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>
<body> {% load inclusion_tag_test %} {% show_results 10 %}

Two 、 Static file configuration

Some packages we import are called static files

1、 Create one in the global first static My bag ,

2、 stay static It's our bootstrap, also jquery etc.

3、 And then in Plus some configuration

STATIC_URL = '/static/' # This configuration is equivalent to the following configuration alias , If the name here is changed, import it according to the name here 
os.path.join(BASE_DIR,"static") # find static route ,BASE_DIR Is the root of the project file ]

4、 Import css,js,jquery file

<link rel = "stysheet",href= "/static/index.css/"> # Be careful : Just in front of the file directory +/static/, It will automatically help you find static Related files in the folder
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>

Django frame ---- More about template inheritance and static file configuration

  1. Django( 5、 ... and ) Framework template inheritance and static file configuration One . Template inheritance The purpose is : Reduce code redundancy grammar : {% block classinfo %} {% end ...

  2. Django Framework template inheritance and static file configuration

    One . Template inheritance The purpose is : Reduce code redundancy grammar : {% block classinfo %} {% endblock %} Specific steps : 1. Create a base.html file ,2. Write the contents of the page to be displayed here ...

  3. Django 2.0 Study (13):Django Template inheritance and static files

    Django Template inheritance and static files Template inheritance (extend) Django The most powerful and complex part of the template engine is template inheritance , Template inheritance allows us to create a basic " skeleton " Templates , It can be included in a web page ...

  4. Django The template foundation of the framework , Static file configuration

    One . Template inheritance The purpose is : Reduce code redundancy grammar : {% block classinfo %} {% endblock %} Specific steps : 1. Create a base.html file ,2. Write the contents of the page to be displayed here ...

  5. Django frame ( 8、 ... and )—— Formwork layer : Template import 、 Template inheritance 、 Static files

    Catalog Template import . Inherit . Static files One . Template import 1. grammar 2. Use Two . Inheritance of templates 1. Use template inheritance 2. emphasize ( Be careful ) 3、 ... and . Static files 1. In profile settings Static files have been configured in 2. Import uses static ...

  6. Django Template loading static file configuration details

    .settings.INSTALLED_APPS Add below :django.contrib.staticfiles Add below :STATIC_URL = '/static/' . () stay ...

  7. Django frame ( 7、 ... and )-- Formwork layer : Template import 、 Template inheritance 、 Static files

    One . Template import To reuse a component , You can write the component in a file , You can import it when you use it Used in templates 1. grammar {% include ' Template name ' %} 2. Use ad.html page <div clas ...

  8. Django frame 、HTTP agreement 、 File configuration 、 Routing settings 、

    1.socket Server side .py import socketsk = socket.socket()sk.bind(("",8000))sk.listen()whil ...

  9. Django【 The first 4 piece 】:Django Template inheritance of

    jango Framework template inheritance and static file configuration One . Template inheritance The purpose is : Reduce code redundancy grammar : {% block classinfo %} {% endblock %} Specific steps : 1. Create a base.htm ...

Random recommendation

  1. Windows Next Eclipse Connect hadoop

    2015-3-27 Reference resources : ...

  2. epoll Use specific explanations ( quintessence )

    epoll - I/O event notification facility stay linux In network programming , It's been used for a long time select To trigger events . stay linux In the new kernel , There's a mechanism to replace it , Just ...

  3. vs2008+cmake2.8+OpenCV2.8.4 During configuration OpenCV.sln Recompiling part of the project failed

    The solution comes from this link vs2008+cmake2.8+OpenCV2.8.4 The configuration process 1. decompression opencv2.4.8 2. ...

  4. Android(java) Learning notes 144:Android Audio and video recording class MediaRecorder Usage example

    Android Voice recording can be done through MediaRecorder and AudioRecorder.MediaRecorder It was originally a multimedia recording control , You can record video and voice at the same time , When no video source is specified, only voice is recorded ( Default recording language ...

  5. ( turn )keytools command

    Combined with network resources , Yes keytool Use summary , For later use : Keytool It's a Java Data certificate management tools ,Keytool Key (key) And certificates (certificates) There is one called keystore The file of ...

  6. Why array_column Unavailable ,

    not long ago , I'm in a small project , I'm going to take out a one-dimensional array of each element key Value , The formation of one-dimensional arrays , Suddenly thought of php There's a function , Realization . $array = array ( array ( "id" =& ...

  7. Python 3.X Call multithreading C modular , And in C Callback in module python Example of a function

    Because I'm doing a C++ oriented Python Of API Package project , So we need to use C Expand Python Knowledge about . Here is a brief summary . This example is divided into three parts . The first part shows how to use C stay Windows Multithreading programming in : second ...

  8. windows 10 Hide all kinds of folders key +R Turn on run , perhaps Ctrl+Alt+Del Call up the task manager -- file -- Run a new task , And then in and out of "regedit" Open the registry : 2. Find... By directory :[-HKEY_CLA ...

  9. Kettle And data modeling

    Video Course : 1. The new army   [ MOOC bus share ] Refine number into gold —— thorough BI - Kettle piece Basic books :1. Kettle 3.0 User's Manual , The file named : ETL Tools Kettle User's Manual ( On ).pdf, ...

  10. unity The mathematical formula

    Mathf.Abs The absolute value Calculates and returns the specified parameter f The absolute value . Mathf.Acos Arccosine static function Acos (f : float) : float Calculates and returns the parameter in radians f ...